feat: edit title thread (#2964)

* feat: edit title thread * fix: fix copies * fix copies * fix copies
janhq · May 30, 2024 · 6bbd4fb · 6bbd4fb
1 parent 353fe4c
commit 6bbd4fb
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 1 deletion.
diff --git a/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx b/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
@@ -232,7 +232,10 @@ const ChatInput = () => {
         {showAttacmentMenus && (
           <div
             ref={refAttachmentMenus}
-            className="absolute bottom-14 left-0 z-30 w-36 cursor-pointer rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] py-1 shadow-sm"
+            className={twMerge(
+              'absolute bottom-14 left-0 z-30 w-36 cursor-pointer rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] py-1 shadow-sm',
+              activeSetting && 'bottom-28'
+            )}
           >
             <ul>
               <Tooltip

diff --git a/web/screens/Thread/ThreadLeftPanel/ModalEditTitleThread/index.tsx b/web/screens/Thread/ThreadLeftPanel/ModalEditTitleThread/index.tsx
@@ -0,0 +1,71 @@
+import { useCallback, memo, useState } from 'react'
+
+import { Thread } from '@janhq/core'
+import { Modal, ModalClose, Button, Input } from '@janhq/joi'
+import { PencilIcon } from 'lucide-react'
+
+import { useCreateNewThread } from '@/hooks/useCreateNewThread'
+
+type Props = {
+  thread: Thread
+}
+
+const ModalEditTitleThread = ({ thread }: Props) => {
+  const [title, setTitle] = useState(thread.title)
+
+  const { updateThreadMetadata } = useCreateNewThread()
+
+  const onUpdateTitle = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+      e.stopPropagation()
+
+      updateThreadMetadata({
+        ...thread,
+        title: title || 'New Thread',
+      })
+    },
+    [thread, title, updateThreadMetadata]
+  )
+
+  return (
+    <Modal
+      title="Edit title thread"
+      trigger={
+        <div
+          className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <PencilIcon size={16} className="text-[hsla(var(--secondary))]" />
+          <span className="text-bold text-[hsla(var(--secondary))]">
+            Edit title
+          </span>
+        </div>
+      }
+      content={
+        <form className="mt-4">
+          <Input
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            autoFocus
+          />
+          <div className="mt-4 flex justify-end gap-x-2">
+            <ModalClose asChild onClick={(e) => e.stopPropagation()}>
+              <Button theme="ghost">Cancel</Button>
+            </ModalClose>
+            <ModalClose asChild>
+              <Button
+                type="submit"
+                onClick={onUpdateTitle}
+                disabled={title.length === 0}
+              >
+                Save
+              </Button>
+            </ModalClose>
+          </div>
+        </form>
+      }
+    />
+  )
+}
+
+export default memo(ModalEditTitleThread)
diff --git a/web/screens/Thread/ThreadLeftPanel/index.tsx b/web/screens/Thread/ThreadLeftPanel/index.tsx
@@ -22,6 +22,7 @@ import useSetActiveThread from '@/hooks/useSetActiveThread'
 
 import ModalCleanThread from './ModalCleanThread'
 import ModalDeleteThread from './ModalDeleteThread'
+import ModalEditTitleThread from './ModalEditTitleThread'
 
 import { assistantsAtom } from '@/helpers/atoms/Assistant.atom'
 import { editMessageAtom } from '@/helpers/atoms/ChatMessage.atom'
@@ -143,6 +144,7 @@ const ThreadLeftPanel = () => {
                   <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>