From 97728734a72e5effdabaa530a4d669cc4cc05b39 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 20 May 2025 11:29:18 +0700
Subject: [PATCH 1/2] chore: model loading and truncate dropdown assiatant
 title

---
 web-app/src/containers/ChatInput.tsx         | 19 +++++++++++++------
 web-app/src/containers/DropdownAssistant.tsx |  6 +++---
 web-app/src/routes/threads/$threadId.tsx     |  7 ++-----
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/web-app/src/containers/ChatInput.tsx b/web-app/src/containers/ChatInput.tsx
index 63a396f34..01a33260d 100644
--- a/web-app/src/containers/ChatInput.tsx
+++ b/web-app/src/containers/ChatInput.tsx
@@ -10,7 +10,6 @@ import {
   IconPaperclip,
   IconWorld,
   IconAtom,
-  IconMicrophone,
   IconEye,
   IconTool,
   IconCodeCircle2,
@@ -29,6 +28,7 @@ import { SystemEvent } from '@/types/events'
 import { getTools } from '@/services/mcp'
 import { useChat } from '@/hooks/useChat'
 import DropdownModelProvider from '@/containers/DropdownModelProvider'
+import { ModelLoader } from '@/containers/loaders/ModelLoader'
 
 type ChatInputProps = {
   className?: string
@@ -44,7 +44,8 @@ const ChatInput = ({
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const [isFocused, setIsFocused] = useState(false)
   const [rows, setRows] = useState(1)
-  const { streamingContent, updateTools, abortControllers } = useAppState()
+  const { streamingContent, updateTools, abortControllers, loadingModel } =
+    useAppState()
   const { prompt, setPrompt } = usePrompt()
   const { t } = useTranslation()
   const { spellCheckChatInput } = useGeneralSetting()
@@ -53,6 +54,8 @@ const ChatInput = ({
   const { selectedModel } = useModelProvider()
   const { sendMessage } = useChat()
 
+  console.log(model)
+
   useEffect(() => {
     const handleFocusIn = () => {
       if (document.activeElement === textareaRef.current) {
@@ -173,17 +176,21 @@ const ChatInput = ({
                 streamingContent && 'opacity-50 pointer-events-none'
               )}
             >
-              <DropdownModelProvider model={model} />
+              {model?.provider === 'llama.cpp' && loadingModel ? (
+                <ModelLoader />
+              ) : (
+                <DropdownModelProvider model={model} />
+              )}
 
               {/* File attachment - always available */}
               <div className="h-6 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1">
                 <IconPaperclip size={18} className="text-main-view-fg/50" />
               </div>
 
-              {/* Microphone - always available */}
-              <div className="h-6 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1">
+              {/* Microphone - always available - Temp Hide */}
+              {/* <div className="h-6 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1">
                 <IconMicrophone size={18} className="text-main-view-fg/50" />
-              </div>
+              </div> */}
 
               {selectedModel?.capabilities?.includes('vision') && (
                 <div className="h-6 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1">
diff --git a/web-app/src/containers/DropdownAssistant.tsx b/web-app/src/containers/DropdownAssistant.tsx
index 51cdc4c7b..3c9b43936 100644
--- a/web-app/src/containers/DropdownAssistant.tsx
+++ b/web-app/src/containers/DropdownAssistant.tsx
@@ -41,7 +41,7 @@ const DropdownAssistant = () => {
             </button>
           </DropdownMenuTrigger>
           <div
-            className="size-5 cursor-pointer relative z-10 flex items-center justify-center rounded hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out"
+            className="size-5 cursor-pointer relative z-10 flex items-center justify-center rounded hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out "
             onClick={() => {
               console.log('edit clicked', selectedAssistant)
               if (selectedAssistant) {
@@ -64,7 +64,7 @@ const DropdownAssistant = () => {
           align="start"
         >
           {assistants.map((assistant) => (
-            <div className="relative" key={assistant.id}>
+            <div className="relative pr-6" key={assistant.id}>
               <DropdownMenuItem className="flex justify-between items-center">
                 <span
                   className="truncate text-main-view-fg/70 flex-1 cursor-pointer"
@@ -76,7 +76,7 @@ const DropdownAssistant = () => {
                   {assistant.name}
                 </span>
               </DropdownMenuItem>
-              <div className="absolute top-1/2 -translate-y-1/2 right-2">
+              <div className="absolute top-1/2 -translate-y-1/2 right-1">
                 <div className="size-5 text-main-view-fg/50 cursor-pointer relative z-10 flex items-center justify-center rounded hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out">
                   <IconSettings
                     size={16}
diff --git a/web-app/src/routes/threads/$threadId.tsx b/web-app/src/routes/threads/$threadId.tsx
index 01b494eae..31f64f143 100644
--- a/web-app/src/routes/threads/$threadId.tsx
+++ b/web-app/src/routes/threads/$threadId.tsx
@@ -11,7 +11,7 @@ import ChatInput from '@/containers/ChatInput'
 import { useShallow } from 'zustand/react/shallow'
 import { ThreadContent } from '@/containers/ThreadContent'
 import { StreamingContent } from '@/containers/StreamingContent'
-import { ModelLoader } from '@/containers/loaders/ModelLoader'
+
 import { useMessages } from '@/hooks/useMessages'
 import { fetchMessages } from '@/services/messages'
 import { useAppState } from '@/hooks/useAppState'
@@ -31,7 +31,7 @@ function ThreadDetail() {
   const { currentThreadId, getThreadById, setCurrentThreadId } = useThreads()
   const { setCurrentAssistant, assistants } = useAssistant()
   const { setMessages } = useMessages()
-  const { streamingContent, loadingModel } = useAppState()
+  const { streamingContent } = useAppState()
 
   const { messages } = useMessages(
     useShallow((state) => ({
@@ -172,9 +172,6 @@ function ThreadDetail() {
         <div className="flex items-center justify-between w-full pr-2">
           <DropdownAssistant />
         </div>
-        {thread?.model?.provider === 'llama.cpp' && loadingModel && (
-          <ModelLoader />
-        )}
       </HeaderPage>
       <div className="flex flex-col h-[calc(100%-40px)] ">
         <div

From d95439e3f40893f24222e6900dc1ee9be36a14ad Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 20 May 2025 12:21:30 +0700
Subject: [PATCH 2/2] chore: update copy

---
 web-app/src/containers/LeftPanel.tsx | 2 +-
 web-app/src/routes/assistant.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-app/src/containers/LeftPanel.tsx b/web-app/src/containers/LeftPanel.tsx
index 1025bcdb7..733962b18 100644
--- a/web-app/src/containers/LeftPanel.tsx
+++ b/web-app/src/containers/LeftPanel.tsx
@@ -48,7 +48,7 @@ const mainMenus = [
     route: route.home,
   },
   {
-    title: 'Assistant',
+    title: 'Assistants',
     icon: IconClipboardSmileFilled,
     route: route.assistant,
   },
diff --git a/web-app/src/routes/assistant.tsx b/web-app/src/routes/assistant.tsx
index e13951ec8..11e288b4c 100644
--- a/web-app/src/routes/assistant.tsx
+++ b/web-app/src/routes/assistant.tsx
@@ -56,7 +56,7 @@ function Assistant() {
   return (
     <div className="flex h-full flex-col flex-justify-center">
       <HeaderPage>
-        <span>Assistant</span>
+        <span>Assistants</span>
       </HeaderPage>
       <div className="h-full p-4 overflow-y-auto">
         <div className="grid grid-cols-3 gap-4">