fix chat width bugs (#259)

llm-ui-kit · Jun 1, 2024 · 3958ca6 · 3958ca6
1 parent 2a9ea6c
commit 3958ca6
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/.astro/settings.json b/.astro/settings.json
@@ -0,0 +1,5 @@
+{
+  "devToolbar": {
+    "enabled": false
+  }
+}
diff --git a/apps/www/src/components/Chat.tsx b/apps/www/src/components/Chat.tsx
@@ -38,8 +38,9 @@ const ChatMessage: React.FC<{
       )}
       <div
         className={cn(
-          "flex flex-1 space-y-2 overflow-x-hidden",
+          "flex space-y-2 min-w-0", // min-w-0 stops overflows
           role === "user" && "bg-background rounded-lg px-4 py-1",
+          role !== "user" && "flex-1",
         )}
       >
         <MessageComponent
@@ -162,7 +163,7 @@ export const Chat = () => {
           className="flex flex-1 flex-col-reverse overflow-y-auto pt-4 pb-3"
         >
           {/* This div takes up all the remaining space so the messages start at the top */}
-          <div className="flex flex-1 flex-col" />
+          <div className="flex flex-1 flex-col" />{" "}
           {reversedMessagesWithoutSystem.map((message, index) => {
             const { role } = message;
             const isStreamFinished =

diff --git a/apps/www/src/components/demo/message/Message.tsx b/apps/www/src/components/demo/message/Message.tsx
@@ -23,8 +23,9 @@ export const Message: React.FC<{
     isStreamFinished,
   });
 
+  // min-w-0 stops overflows
   return (
-    <div className="flex flex-1 flex-col">
+    <div className="flex flex-1 flex-col min-w-0">
       {blockMatches.map((blockMatch, index) => {
         const Component = blockMatch.block.component;
         return <Component key={index} blockMatch={blockMatch} />;