Refactor ChatList component to include type declaration for ChatMessage

Royal-lobster · Apr 13, 2024 · 89e0669 · 89e0669
1 parent 01fb040
commit 89e0669
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 13 deletions.
diff --git a/src/components/Sidebar/chat/ChangeChatModel.tsx b/src/components/Sidebar/chat/ChangeChatModel.tsx
@@ -1,23 +1,21 @@
+import { RiRobotLine } from 'react-icons/ri'
 import type { AvailableModels } from '../../../config/settings'
 import { useChatModels } from '../../../hooks/useChatModels'
 import { capitalizeText } from '../../../lib/capitalizeText'
+import { BsRobot } from 'react-icons/bs'
 
 const ChangeChatModel = () => {
   const { availableModels, activeChatModel, setActiveChatModel } =
     useChatModels()
   return (
-    <div className="cdx-flex cdx-gap-1 cdx-text-neutral-500  dark:cdx-bg-black/20 cdx-bg-black/10 cdx-border cdx-rounded-full cdx-border-neutral-400/30 dark:cdx-border-neutral-500/50 cdx-px-2 cdx-py-1">
-      <span className="cdx-pl-1">Using</span>
+    <div className="cdx-flex cdx-items-center cdx-gap-1 cdx-text-neutral-500 dark:cdx-bg-black/20 cdx-bg-black/10 cdx-border cdx-rounded-md cdx-border-neutral-400/30 dark:cdx-border-neutral-500/30 cdx-py-1 cdx-px-3">
+      <BsRobot size={18} className="cdx-flex-shrink-0" />
       <select
         value={activeChatModel}
-        className="cdx-bg-transparent cdx-underline cdx-decoration-dotted cdx-underline-offset-4 !m-0 !p-0 cdx-box-border"
+        className="cdx-bg-transparent !m-0 !p-0 cdx-box-border cdx-w-min focus:cdx-outline-none focus:cdx-ring-1"
         onChange={(e) => {
           setActiveChatModel(e.target.value as AvailableModels)
         }}
-        style={{
-          appearance: 'none',
-          backgroundImage: 'none',
-        }}
       >
         {availableModels.map(([modal, value]) => (
           <option key={modal} value={value}>

diff --git a/src/components/Sidebar/chat/ChatHistory.tsx b/src/components/Sidebar/chat/ChatHistory.tsx
@@ -29,7 +29,7 @@ const ChatHistory = () => {
   return (
     <div>
       <DropdownMenu.Root>
-        <DropdownMenu.Trigger className="cdx-border dark:cdx-bg-neutral-800/80 cdx-backdrop-blur cdx-border-neutral-500/20 cdx-flex cdx-gap-2 cdx-items-center cdx-p-2 cdx-text-sm cdx-text-neutral-700 dark:cdx-text-neutral-300 cdx-rounded-md">
+        <DropdownMenu.Trigger className="cdx-flex cdx-items-center cdx-gap-1 cdx-text-neutral-500 dark:cdx-bg-black/20 cdx-bg-black/10 cdx-border cdx-rounded-md cdx-border-neutral-400/30 dark:cdx-border-neutral-500/30 cdx-py-1 cdx-px-3">
           <RiTimeLine size={18} className="cdx-flex-shrink-0" /> History
         </DropdownMenu.Trigger>
         <DropdownMenu.Content

diff --git a/src/components/Sidebar/chat/ChatInput.tsx b/src/components/Sidebar/chat/ChatInput.tsx
@@ -102,15 +102,17 @@ export function SidebarInput({
           <button
             type="button"
             onClick={clearMessages}
-            className="cdx-rounded-full cdx-h-10 cdx-w-10 cdx-grid cdx-place-items-center cdx-text-center cdx-bg-blue-500 hover:cdx-bg-blue-700 cdx-text-white"
+            className="cdx-rounded-full cdx-h-8 cdx-w-8 cdx-grid cdx-place-items-center cdx-text-center cdx-bg-blue-500 hover:cdx-bg-blue-700 cdx-text-white"
           >
-            <GiMagicBroom size={18} className="mx-auto" />
+            <GiMagicBroom size={16} className="mx-auto" />
           </button>
         ) : (
           <div />
         )}
-        <ChangeChatModel />
-        {(history.length || !chatIsEmpty) && <ChatHistory />}
+        <div className="cdx-flex cdx-gap-2">
+          <ChangeChatModel />
+          {(history.length || !chatIsEmpty) && <ChatHistory />}
+        </div>
       </div>
 
       <div className="cdx-m-2 cdx-rounded-md cdx-border dark:cdx-border-neutral-800 cdx-border-neutral-300 dark:cdx-bg-neutral-900/90 cdx-bg-neutral-200/90 focus:cdx-outline-none focus:cdx-ring-2 focus:cdx-ring-blue-900 focus:cdx-ring-opacity-50">

diff --git a/src/components/Sidebar/chat/ChatList.tsx b/src/components/Sidebar/chat/ChatList.tsx
@@ -4,7 +4,7 @@ import { ReactMarkdown } from 'react-markdown/lib/react-markdown'
 import rehypeRaw from 'rehype-raw'
 import remarkBreaks from 'remark-breaks'
 import remarkGfm from 'remark-gfm'
-import { ChatMessage, ChatRole } from '../../../hooks/useCurrentChat'
+import { type ChatMessage, ChatRole } from '../../../hooks/useCurrentChat'
 import FilePreviewBar from './FilePreviewBar'
 import CodeBlock from './markdown-components/CodeBlock'
 import { Table } from './markdown-components/Table'