Merge pull request #5032 from menloresearch/chore/model-loading

chore: model loading and truncate dropdown assiatant title

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'
               )}
             >
+              {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 */}
+              {/* 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">
+              {/* <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">

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}

web-app/src/containers/LeftPanel.tsx

@@ -48,7 +48,7 @@ const mainMenus = [
     route: route.home,
   },
   {
-    title: 'Assistant',
+    title: 'Assistants',
     icon: IconClipboardSmileFilled,
     route: route.assistant,
   },

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">

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