better pill handling

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(() => {
+  const moreTextWidth = useMemo(() => {
-    if (!pills) return;
+    return calculateTextWidth('+99 more', font) + pillPadding + pillBorder;
+  }, [font]);
 
-    const containerWidth = containerRef.current?.offsetWidth || thoughtContainerWidth;
+  useLayoutEffect(() => {
-    console.log(containerWidth, thoughtContainerWidth, chatContentWidth);
+    if (!pills || !containerRef.current) return;
-    const pillPadding = 8; // 4px left + 4px right
+
-    const pillMargin = 6; // 1.5 * 4 for gap
+    const containerWidth = thoughtContainerWidth || 240;
-    const pillBorder = 1; // 0.5px * 2
-    const font = '11px -apple-system, BlinkMacSystemFont, sans-serif'; // Match your app's font
 
     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(
+        className={cx('flex w-full flex-wrap flex-nowrap gap-1.5 overflow-hidden')}>
-          'flex w-full flex-wrap flex-nowrap gap-1.5 overflow-hidden border border-red-500'
-        )}>
         {visiblePills.map((pill) => (
           <Pill key={pill.id} useAnimation={useAnimation} {...pill} onClick={undefined} />
         ))}

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

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()