Ext: polish dropdown convo list (#8930)

* Ext: polish dropdown convo list * Fix padding input bar
dust-tt · Nov 27, 2024 · a64fa07 · a64fa07
1 parent 48e7ccd
commit a64fa07
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/extension/app/src/components/conversation/ConversationsListButton.tsx b/extension/app/src/components/conversation/ConversationsListButton.tsx
@@ -12,6 +12,7 @@ import {
 } from "@dust-tt/sparkle";
 import { useConversations } from "@extension/components/conversation/useConversations";
 import moment from "moment";
+import React from "react";
 import { useNavigate, useParams } from "react-router-dom";
 
 type GroupLabel =
@@ -85,7 +86,7 @@ const Content = () => {
   ) : (
     <ScrollArea className="h-[80vh]">
       {Object.keys(conversationsByDate).map((dateLabel) => (
-        <>
+        <React.Fragment key={dateLabel}>
           {conversationsByDate[dateLabel as GroupLabel].length > 0 && (
             <DropdownMenuLabel label={dateLabel} />
           )}
@@ -103,7 +104,7 @@ const Content = () => {
               }}
             />
           ))}
-        </>
+        </React.Fragment>
       ))}
     </ScrollArea>
   );
@@ -126,7 +127,9 @@ export const ConversationsListButton = ({
         />
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-[80vw]">
-        <Content />
+        <div className="py-2">
+          <Content />
+        </div>
       </DropdownMenuContent>
     </DropdownMenu>
   );

diff --git a/extension/app/src/components/input_bar/InputBar.tsx b/extension/app/src/components/input_bar/InputBar.tsx
@@ -268,7 +268,7 @@ export function AssistantInputBar({
         <div className="flex w-full flex-1 flex-col items-end self-stretch">
           <div
             className={classNames(
-              "relative flex w-full flex-1 flex-col items-stretch gap-0 self-stretch p-2",
+              "relative flex w-full flex-1 flex-col items-stretch gap-0 self-stretch p-3",
               "border-struture-200 border-t bg-white/90 backdrop-blur focus-within:border-structure-300",
               "transition-all",
               "rounded-2xl border-b border-l border-r border-element-500 focus-within:border-action-300 focus-within:shadow-md focus-within:ring-1",

diff --git a/extension/app/src/components/input_bar/InputBarContainer.tsx b/extension/app/src/components/input_bar/InputBarContainer.tsx
@@ -69,7 +69,7 @@ export const InputBarContainer = ({
 
   const contentEditableClasses = classNames(
     "inline-block w-full",
-    "border-0 pr-1 pl-2 sm:pl-0 outline-none ring-0 focus:border-0 focus:outline-none focus:ring-0 py-3.5",
+    "border-0 pr-1 pl-2 sm:pl-0 outline-none ring-0 focus:border-0 focus:outline-none focus:ring-0",
     "whitespace-pre-wrap font-normal"
   );