From bc327c40d4c2df3798d73fdea85c5b22d3df2be0 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Sun, 18 May 2025 14:58:15 +0700
Subject: [PATCH] chore: update empty state thread list, search, and no model

---
 web-app/src/containers/LeftPanel.tsx          | 53 ++++++++------
 .../settings/providers/$providerName.tsx      | 73 +++++++++++--------
 web-app/src/routes/threads/$threadId.tsx      |  1 -
 3 files changed, 76 insertions(+), 51 deletions(-)

diff --git a/web-app/src/containers/LeftPanel.tsx b/web-app/src/containers/LeftPanel.tsx
index 0748a5855..523b4d0a8 100644
--- a/web-app/src/containers/LeftPanel.tsx
+++ b/web-app/src/containers/LeftPanel.tsx
@@ -8,6 +8,7 @@ import {
   IconSettingsFilled,
   IconTrash,
   IconStar,
+  IconMessageFilled,
   IconAppsFilled,
   IconX,
   IconSearch,
@@ -50,9 +51,6 @@ const mainMenus = [
     icon: IconAppsFilled,
     route: route.hub,
   },
-]
-
-const secondaryMenus = [
   {
     title: 'common.settings',
     icon: IconSettingsFilled,
@@ -89,6 +87,8 @@ const LeftPanel = () => {
 
   const [openDropdown, setOpenDropdown] = useState(false)
 
+  console.log(threads)
+
   return (
     <aside
       className={cn(
@@ -109,23 +109,7 @@ const LeftPanel = () => {
 
       <div className="flex flex-col justify-between h-[calc(100%-32px)] mt-0">
         <div className="flex flex-col justify-between h-full">
-          <div className="mt-2 mb-4 space-y-1">
-            {mainMenus.map((menu) => {
-              return (
-                <Link
-                  key={menu.title}
-                  to={menu.route}
-                  className="flex items-center gap-1.5 cursor-pointer hover:bg-left-panel-fg/10 py-1 px-1 rounded [&.active]:bg-left-panel-fg/10"
-                >
-                  <menu.icon size={18} className="text-left-panel-fg/70" />
-                  <span className="font-medium text-left-panel-fg/90">
-                    {t(menu.title)}
-                  </span>
-                </Link>
-              )
-            })}
-          </div>
-          <div className="relative mb-4 mx-1">
+          <div className="relative mb-4 mx-1 mt-2">
             <IconSearch className="absolute size-4 top-1/2 left-2 -translate-y-1/2 text-left-panel-fg/50" />
             <input
               type="text"
@@ -275,6 +259,33 @@ const LeftPanel = () => {
                 </div>
               )}
 
+              {filteredThreads.length === 0 && searchTerm.length > 0 && (
+                <div className="px-1 mt-2">
+                  <div className="flex items-center gap-1 text-left-panel-fg/80">
+                    <IconSearch size={18} />
+                    <h6 className="font-medium text-base">No results found</h6>
+                  </div>
+                  <p className="text-left-panel-fg/60 mt-1 text-xs leading-relaxed">
+                    We couldn't find any chats matching your search. Try a
+                    different keyword.
+                  </p>
+                </div>
+              )}
+
+              {Object.keys(threads).length === 0 && !searchTerm && (
+                <>
+                  <div className="px-1 mt-2">
+                    <div className="flex items-center gap-1 text-left-panel-fg/80">
+                      <IconMessageFilled size={18} />
+                      <h6 className="font-medium text-base">No threads yet</h6>
+                    </div>
+                    <p className="text-left-panel-fg/60 mt-1 text-xs leading-relaxed">
+                      Start a new conversation to see your thread history here.
+                    </p>
+                  </div>
+                </>
+              )}
+
               <div className="flex flex-col mb-4">
                 <ThreadList threads={unFavoritedThreads} />
               </div>
@@ -282,7 +293,7 @@ const LeftPanel = () => {
           </div>
 
           <div className="space-y-1 py-1 mt-2">
-            {secondaryMenus.map((menu) => {
+            {mainMenus.map((menu) => {
               const isActive =
                 currentPath.includes(route.settings.index) &&
                 menu.route.includes(route.settings.index)
diff --git a/web-app/src/routes/settings/providers/$providerName.tsx b/web-app/src/routes/settings/providers/$providerName.tsx
index 6e3062e21..83dc77269 100644
--- a/web-app/src/routes/settings/providers/$providerName.tsx
+++ b/web-app/src/routes/settings/providers/$providerName.tsx
@@ -6,6 +6,7 @@ import { cn, getProviderTitle } from '@/lib/utils'
 import { Switch } from '@/components/ui/switch'
 import {
   createFileRoute,
+  Link,
   useNavigate,
   useParams,
   useSearch,
@@ -228,35 +229,49 @@ function ProviderDetail() {
                   </div>
                 }
               >
-                {provider?.models.map((model, modelIndex) => {
-                  const capabilities = model.capabilities || []
-                  return (
-                    <CardItem
-                      key={modelIndex}
-                      title={
-                        <div className="flex items-center gap-2">
-                          <h1 className="font-medium">{model.id}</h1>
-                          <Capabilities capabilities={capabilities} />
-                        </div>
-                      }
-                      actions={
-                        <div className="flex items-center gap-2">
-                          <DialogEditModel
-                            provider={provider}
-                            modelId={model.id}
-                          />
-                          {model.settings && (
-                            <ModelSetting provider={provider} model={model} />
-                          )}
-                          <DialoDeleteModel
-                            provider={provider}
-                            modelId={model.id}
-                          />
-                        </div>
-                      }
-                    />
-                  )
-                })}
+                {provider?.models.length ? (
+                  provider?.models.map((model, modelIndex) => {
+                    const capabilities = model.capabilities || []
+                    return (
+                      <CardItem
+                        key={modelIndex}
+                        title={
+                          <div className="flex items-center gap-2">
+                            <h1 className="font-medium">{model.id}</h1>
+                            <Capabilities capabilities={capabilities} />
+                          </div>
+                        }
+                        actions={
+                          <div className="flex items-center gap-2">
+                            <DialogEditModel
+                              provider={provider}
+                              modelId={model.id}
+                            />
+                            {model.settings && (
+                              <ModelSetting provider={provider} model={model} />
+                            )}
+                            <DialoDeleteModel
+                              provider={provider}
+                              modelId={model.id}
+                            />
+                          </div>
+                        }
+                      />
+                    )
+                  })
+                ) : (
+                  <div className="-mt-2">
+                    <div className="flex items-center gap-2 text-left-panel-fg/80">
+                      <h6 className="font-medium text-base">No model found</h6>
+                    </div>
+                    <p className="text-left-panel-fg/60 mt-1 text-xs leading-relaxed">
+                      Available models will be listed here. If you don’t have
+                      any models yet, visit the&nbsp;
+                      <Link to={route.hub}>Hub</Link>
+                      &nbsp;to download.
+                    </p>
+                  </div>
+                )}
               </Card>
             </div>
           </div>
diff --git a/web-app/src/routes/threads/$threadId.tsx b/web-app/src/routes/threads/$threadId.tsx
index 12fee157f..b5708ec78 100644
--- a/web-app/src/routes/threads/$threadId.tsx
+++ b/web-app/src/routes/threads/$threadId.tsx
@@ -177,7 +177,6 @@ function ThreadDetail() {
               messages.map((item, index) => {
                 // Only pass isLastMessage to the last message in the array
                 const isLastMessage = index === messages.length - 1
-                console.log(messages, 'messages')
                 return (
                   <div
                     key={item.id}