Chat overflow (#1723)

web/src/app/chat/input/ChatInputBar.tsx

@@ -177,14 +177,16 @@ export function ChatInputBar({
               }}
               suppressContentEditableWarning={true}
             />
-            <div className="flex items-center space-x-3  px-4 pb-2">
+            <div className="flex items-center space-x-3 mr-12 px-4 pb-2 overflow-hidden">
               <ChatInputOption
+                flexPriority="shrink"
                 name={selectedAssistant ? selectedAssistant.name : "Assistants"}
                 icon={FaBrain}
                 onClick={() => setConfigModalActiveTab("assistants")}
               />
 
               <ChatInputOption
+                flexPriority="second"
                 name={
                   llmOverrideManager.llmOverride.modelName ||
                   (selectedAssistant
@@ -194,14 +196,18 @@ export function ChatInputBar({
                 icon={FiCpu}
                 onClick={() => setConfigModalActiveTab("llms")}
               />
+
               {!retrievalDisabled && (
                 <ChatInputOption
+                  flexPriority="stiff"
                   name="Filters"
                   icon={FiFilter}
                   onClick={() => setConfigModalActiveTab("filters")}
                 />
               )}
+
               <ChatInputOption
+                flexPriority="stiff"
                 name="File"
                 icon={FiPlusCircle}
                 onClick={() => {

web/src/app/chat/input/ChatInputOption.tsx

@@ -8,7 +8,9 @@ interface ChatInputOptionProps {
   icon: IconType;
   onClick: () => void;
   size?: number;
+
   options?: { name: string; value: number; onClick?: () => void }[];
+  flexPriority?: "shrink" | "stiff" | "second";
 }
 
 const ChatInputOption = ({
@@ -17,6 +19,7 @@ const ChatInputOption = ({
   onClick,
   size = 16,
   options,
+  flexPriority,
 }: ChatInputOptionProps) => {
   const [isDropupVisible, setDropupVisible] = useState(false);
 
@@ -70,14 +73,25 @@ const ChatInputOption = ({
         onClick={handleClick}
         title={name}
       >
-        <Icon size={size} />
-        <span className="text-sm">{name}</span>
+        <Icon size={size} className="flex-none" />
+        <span className="text-sm break-all line-clamp-1">{name}</span>
       </div>
     </div>
   );
 
   if (!dropdownContent) {
-    return <div onClick={onClick}>{option}</div>;
+    return (
+      <div
+        onClick={onClick}
+        className={`text-ellipsis
+          ${flexPriority == "shrink" && "flex-shrink-[10000] flex-grow-0 flex-basis-auto min-w-[30px] whitespace-nowrap overflow-hidden"}
+          ${flexPriority == "second" && "flex-shrink flex-basis-0 min-w-[30px] whitespace-nowrap overflow-hidden"}
+          ${flexPriority == "stiff" && "flex-none whitespace-nowrap overflow-hidden"}
+          `}
+      >
+        {option}
+      </div>
+    );
   }
 
   return (