From dfe155629b654e31f293e29b5c31bfe6be59ddbd Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Wed, 26 Jun 2024 22:33:27 +0700
Subject: [PATCH 1/2] fix: handle long thread title without space, and make
 searchbar autofocus inside model dropdown

---
 web/containers/ModelDropdown/index.tsx              | 11 +++++++++--
 web/screens/Thread/ThreadLeftPanel/index.tsx        |  2 +-
 web/screens/Thread/ThreadRightPanel/Tools/index.tsx |  2 +-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/web/containers/ModelDropdown/index.tsx b/web/containers/ModelDropdown/index.tsx
index ed7eed635f..3d72df615f 100644
--- a/web/containers/ModelDropdown/index.tsx
+++ b/web/containers/ModelDropdown/index.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect, useCallback } from 'react'
+import { useState, useMemo, useEffect, useCallback, useRef } from 'react'
 
 import { InferenceEngine } from '@janhq/core'
 import { Badge, Input, ScrollArea, Select, useClickOutside } from '@janhq/joi'
@@ -70,7 +70,7 @@ const ModelDropdown = ({
   const downloadStates = useAtomValue(modelDownloadStateAtom)
   const setThreadModelParams = useSetAtom(setThreadModelParamsAtom)
   const { updateModelParameter } = useUpdateModelParameters()
-
+  const searchInputRef = useRef<HTMLInputElement>(null)
   const configuredModels = useAtomValue(configuredModelsAtom)
   const featuredModel = configuredModels.filter((x) =>
     x.metadata.tags.includes('Featured')
@@ -108,6 +108,12 @@ const ModelDropdown = ({
     [configuredModels, searchText, searchFilter]
   )
 
+  useEffect(() => {
+    if (open && searchInputRef.current) {
+      searchInputRef.current.focus()
+    }
+  }, [open])
+
   useEffect(() => {
     if (!activeThread) return
     let model = downloadedModels.find(
@@ -258,6 +264,7 @@ const ModelDropdown = ({
             <Input
               placeholder="Search"
               value={searchText}
+              ref={searchInputRef}
               className="rounded-none border-x-0 border-t-0 focus-within:ring-0 hover:border-b-[hsla(var(--app-border))]"
               onChange={(e) => setSearchText(e.target.value)}
               suffixIcon={
diff --git a/web/screens/Thread/ThreadLeftPanel/index.tsx b/web/screens/Thread/ThreadLeftPanel/index.tsx
index 0da7d0088e..c239559494 100644
--- a/web/screens/Thread/ThreadLeftPanel/index.tsx
+++ b/web/screens/Thread/ThreadLeftPanel/index.tsx
@@ -125,7 +125,7 @@ const ThreadLeftPanel = () => {
                 onThreadClick(thread)
               }}
             >
-              <div className="relative z-10 p-2">
+              <div className="relative z-10 break-all p-2">
                 <h1
                   className={twMerge(
                     'line-clamp-1 pr-2 font-medium group-hover/message:pr-6',
diff --git a/web/screens/Thread/ThreadRightPanel/Tools/index.tsx b/web/screens/Thread/ThreadRightPanel/Tools/index.tsx
index 7faecc08ae..2b34cbb677 100644
--- a/web/screens/Thread/ThreadRightPanel/Tools/index.tsx
+++ b/web/screens/Thread/ThreadRightPanel/Tools/index.tsx
@@ -166,7 +166,7 @@ const Tools = () => {
                   <div className="mb-2 flex items-center">
                     <label
                       id="vector-database"
-                      className="inline-block font-medium"
+                      className="inline-flex items-center font-medium"
                     >
                       Vector Database
                       <Tooltip

From d10283415f7f1ee36993d2d71e2c11d564f76fff Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Thu, 27 Jun 2024 01:06:59 +0700
Subject: [PATCH 2/2] feat: enable right click to show setting on thread items
 (#3108)

---
 .../ModalCleanThread/index.tsx                |  8 ++-
 .../ModalDeleteThread/index.tsx               |  9 +++-
 .../ModalEditTitleThread/index.tsx            |  8 ++-
 web/screens/Thread/ThreadLeftPanel/index.tsx  | 51 +++++++++++++++++--
 4 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/web/screens/Thread/ThreadLeftPanel/ModalCleanThread/index.tsx b/web/screens/Thread/ThreadLeftPanel/ModalCleanThread/index.tsx
index f03dcc8b5e..03878254f3 100644
--- a/web/screens/Thread/ThreadLeftPanel/ModalCleanThread/index.tsx
+++ b/web/screens/Thread/ThreadLeftPanel/ModalCleanThread/index.tsx
@@ -7,9 +7,10 @@ import useDeleteThread from '@/hooks/useDeleteThread'
 
 type Props = {
   threadId: string
+  closeContextMenu?: () => void
 }
 
-const ModalCleanThread = ({ threadId }: Props) => {
+const ModalCleanThread = ({ threadId, closeContextMenu }: Props) => {
   const { cleanThread } = useDeleteThread()
   const onCleanThreadClick = useCallback(
     (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
@@ -22,6 +23,11 @@ const ModalCleanThread = ({ threadId }: Props) => {
   return (
     <Modal
       title="Clean Thread"
+      onOpenChange={(open) => {
+        if (open && closeContextMenu) {
+          closeContextMenu()
+        }
+      }}
       trigger={
         <div
           className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]"
diff --git a/web/screens/Thread/ThreadLeftPanel/ModalDeleteThread/index.tsx b/web/screens/Thread/ThreadLeftPanel/ModalDeleteThread/index.tsx
index 83e865de81..75c158c870 100644
--- a/web/screens/Thread/ThreadLeftPanel/ModalDeleteThread/index.tsx
+++ b/web/screens/Thread/ThreadLeftPanel/ModalDeleteThread/index.tsx
@@ -7,10 +7,12 @@ import useDeleteThread from '@/hooks/useDeleteThread'
 
 type Props = {
   threadId: string
+  closeContextMenu?: () => void
 }
 
-const ModalDeleteThread = ({ threadId }: Props) => {
+const ModalDeleteThread = ({ threadId, closeContextMenu }: Props) => {
   const { deleteThread } = useDeleteThread()
+
   const onDeleteThreadClick = useCallback(
     (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
       e.stopPropagation()
@@ -22,6 +24,11 @@ const ModalDeleteThread = ({ threadId }: Props) => {
   return (
     <Modal
       title="Delete Thread"
+      onOpenChange={(open) => {
+        if (open && closeContextMenu) {
+          closeContextMenu()
+        }
+      }}
       trigger={
         <div
           className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]"
diff --git a/web/screens/Thread/ThreadLeftPanel/ModalEditTitleThread/index.tsx b/web/screens/Thread/ThreadLeftPanel/ModalEditTitleThread/index.tsx
index 79cb26e271..93c338f2ff 100644
--- a/web/screens/Thread/ThreadLeftPanel/ModalEditTitleThread/index.tsx
+++ b/web/screens/Thread/ThreadLeftPanel/ModalEditTitleThread/index.tsx
@@ -8,9 +8,10 @@ import { useCreateNewThread } from '@/hooks/useCreateNewThread'
 
 type Props = {
   thread: Thread
+  closeContextMenu?: () => void
 }
 
-const ModalEditTitleThread = ({ thread }: Props) => {
+const ModalEditTitleThread = ({ thread, closeContextMenu }: Props) => {
   const [title, setTitle] = useState(thread.title)
 
   const { updateThreadMetadata } = useCreateNewThread()
@@ -30,6 +31,11 @@ const ModalEditTitleThread = ({ thread }: Props) => {
   return (
     <Modal
       title="Edit title thread"
+      onOpenChange={(open) => {
+        if (open && closeContextMenu) {
+          closeContextMenu()
+        }
+      }}
       trigger={
         <div
           className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]"
diff --git a/web/screens/Thread/ThreadLeftPanel/index.tsx b/web/screens/Thread/ThreadLeftPanel/index.tsx
index c239559494..34d15932f1 100644
--- a/web/screens/Thread/ThreadLeftPanel/index.tsx
+++ b/web/screens/Thread/ThreadLeftPanel/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import { Thread } from '@janhq/core'
 
@@ -43,6 +43,14 @@ const ThreadLeftPanel = () => {
   const setEditMessage = useSetAtom(editMessageAtom)
   const { recommendedModel, downloadedModels } = useRecommendedModel()
 
+  const [contextMenu, setContextMenu] = useState<{
+    visible: boolean
+    thread?: Thread
+  }>({
+    visible: false,
+    thread: undefined,
+  })
+
   const onThreadClick = useCallback(
     (thread: Thread) => {
       setActiveThread(thread)
@@ -91,6 +99,21 @@ const ThreadLeftPanel = () => {
     }
   }
 
+  const onContextMenu = (event: React.MouseEvent, thread: Thread) => {
+    event.preventDefault()
+    setContextMenu({
+      visible: true,
+      thread,
+    })
+  }
+
+  const closeContextMenu = () => {
+    setContextMenu({
+      visible: false,
+      thread: undefined,
+    })
+  }
+
   return (
     <LeftPanelContainer>
       {threads.length === 0 ? (
@@ -124,6 +147,8 @@ const ThreadLeftPanel = () => {
               onClick={() => {
                 onThreadClick(thread)
               }}
+              onContextMenu={(e) => onContextMenu(e, thread)}
+              onMouseLeave={closeContextMenu}
             >
               <div className="relative z-10 break-all p-2">
                 <h1
@@ -143,10 +168,26 @@ const ThreadLeftPanel = () => {
                 <Button theme="icon" className="mt-2">
                   <MoreHorizontalIcon />
                 </Button>
-                <div className="invisible absolute -right-1 z-50 w-40 overflow-hidden rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] shadow-lg group-hover/icon:visible">
-                  <ModalEditTitleThread thread={thread} />
-                  <ModalCleanThread threadId={thread.id} />
-                  <ModalDeleteThread threadId={thread.id} />
+                <div
+                  className={twMerge(
+                    'invisible absolute -right-1 z-50 w-40 overflow-hidden rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] shadow-lg group-hover/icon:visible',
+                    contextMenu.visible &&
+                      contextMenu.thread?.id === thread.id &&
+                      'visible'
+                  )}
+                >
+                  <ModalEditTitleThread
+                    thread={thread}
+                    closeContextMenu={closeContextMenu}
+                  />
+                  <ModalCleanThread
+                    threadId={thread.id}
+                    closeContextMenu={closeContextMenu}
+                  />
+                  <ModalDeleteThread
+                    threadId={thread.id}
+                    closeContextMenu={closeContextMenu}
+                  />
                 </div>
               </div>
               {activeThreadId === thread.id && (