From e653d3953b199c9cc25834967d57eb65895db082 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Tue, 28 Jan 2025 12:55:53 -0700
Subject: [PATCH] better pill handling

---
 .../ChatResponseMessage_ThoughtPills.tsx      | 30 +++++++++----------
 .../ChatLayoutContext/ChatLayoutContext.tsx   |  5 +---
 web/src/context/Chats/MOCK_CHAT.ts            |  4 +--
 3 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseMessage_ThoughtPills.tsx b/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseMessage_ThoughtPills.tsx
index 0b6db0a06..d221541e3 100644
--- a/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseMessage_ThoughtPills.tsx
+++ b/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseMessage_ThoughtPills.tsx
@@ -38,6 +38,11 @@ const pillVariants = {
   }
 };
 
+const pillPadding = 8; // 4px left + 4px right
+const pillMargin = 6; // 1.5 * 4 for gap
+const pillBorder = 1; // 0.5px * 2
+const font = '11px -apple-system, BlinkMacSystemFont, sans-serif'; // Match your app's font
+
 export const PillContainer: React.FC<{
   pills: BusterChatMessage_thought['thought_pills'];
   isCompletedStream: boolean;
@@ -49,10 +54,9 @@ export const PillContainer: React.FC<{
   const [hasDoneInitialAnimation, setHasDoneInitialAnimation] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const useAnimation = !hasDoneInitialAnimation && !isCompletedStream;
-  const chatContentWidth = useChatLayoutContextSelector((x) => x.chatContentWidth);
 
   const size = useSize(containerRef);
-  const thoughtContainerWidth = size?.width || chatContentWidth - 85;
+  const thoughtContainerWidth = size?.width;
   const debouncedWidth = useDebounce(thoughtContainerWidth, {
     wait: 150,
     leading: true
@@ -68,23 +72,19 @@ export const PillContainer: React.FC<{
     }
   );
 
-  useLayoutEffect(() => {
-    if (!pills) return;
+  const moreTextWidth = useMemo(() => {
+    return calculateTextWidth('+99 more', font) + pillPadding + pillBorder;
+  }, [font]);
 
-    const containerWidth = containerRef.current?.offsetWidth || thoughtContainerWidth;
-    console.log(containerWidth, thoughtContainerWidth, chatContentWidth);
-    const pillPadding = 8; // 4px left + 4px right
-    const pillMargin = 6; // 1.5 * 4 for gap
-    const pillBorder = 1; // 0.5px * 2
-    const font = '11px -apple-system, BlinkMacSystemFont, sans-serif'; // Match your app's font
+  useLayoutEffect(() => {
+    if (!pills || !containerRef.current) return;
+
+    const containerWidth = thoughtContainerWidth || 240;
 
     let currentLineWidth = 0;
     const visible: BusterChatMessage_thoughtPill[] = [];
     let hidden = 0;
 
-    // Calculate width needed for "+X more" pill
-    const moreTextWidth = calculateTextWidth('+99 more', font) + pillPadding + pillBorder;
-
     for (let i = 0; i < pills.length; i++) {
       const pill = pills[i];
       const textWidth = calculateTextWidth(pill.text, font);
@@ -117,9 +117,7 @@ export const PillContainer: React.FC<{
         variants={containerVariants}
         initial="hidden"
         animate={pills.length > 0 ? 'visible' : 'hidden'}
-        className={cx(
-          'flex w-full flex-wrap flex-nowrap gap-1.5 overflow-hidden border border-red-500'
-        )}>
+        className={cx('flex w-full flex-wrap flex-nowrap gap-1.5 overflow-hidden')}>
         {visiblePills.map((pill) => (
           <Pill key={pill.id} useAnimation={useAnimation} {...pill} onClick={undefined} />
         ))}
diff --git a/web/src/app/app/_layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx b/web/src/app/app/_layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx
index 1e81f9767..0ab7d1963 100644
--- a/web/src/app/app/_layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx
+++ b/web/src/app/app/_layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx
@@ -30,10 +30,8 @@ export const useChatLayout = ({
 }: UseChatSplitterProps) => {
   const [isPending, startTransition] = useTransition();
   const onChangePage = useAppLayoutContextSelector((state) => state.onChangePage);
-  const chatContentSize = useSize(chatContentRef);
-  const selectedLayout = defaultSelectedLayout;
 
-  const chatContentWidth = chatContentSize?.width || 325;
+  const selectedLayout = defaultSelectedLayout;
 
   const animateOpenSplitter = useMemoizedFn((side: 'left' | 'right' | 'both') => {
     if (appSplitterRef.current) {
@@ -84,7 +82,6 @@ export const useChatLayout = ({
     selectedLayout,
     isPureFile,
     isPureChat,
-    chatContentWidth,
     onSetSelectedFile,
     onCollapseFileClick,
     animateOpenSplitter
diff --git a/web/src/context/Chats/MOCK_CHAT.ts b/web/src/context/Chats/MOCK_CHAT.ts
index 9b0e123e4..9a9574045 100644
--- a/web/src/context/Chats/MOCK_CHAT.ts
+++ b/web/src/context/Chats/MOCK_CHAT.ts
@@ -71,8 +71,8 @@ export const MOCK_CHAT: BusterChat = {
       response_messages: [
         createMockResponseMessageText(),
         createMockResponseMessageThought(),
-        createMockResponseMessageThought(),
-        createMockResponseMessageThought(),
+        // createMockResponseMessageThought(),
+        // createMockResponseMessageThought(),
         // createMockResponseMessageThought(),
         createMockResponseMessageFile(),
         createMockResponseMessageFile()