From 533558064694d54a60dc91dec56a7e583bf2f2b2 Mon Sep 17 00:00:00 2001 From: PuneetP16 Date: Sat, 30 Nov 2024 15:18:29 +0530 Subject: [PATCH 1/4] [feat]: Implement chat description editing in sidebar and header, add visual cue for active chat in sidebar --- app/components/header/Header.tsx | 24 +-- app/components/sidebar/HistoryItem.tsx | 126 +++++++++++---- app/lib/hooks/index.ts | 1 + app/lib/hooks/useEditChatDescription.ts | 152 ++++++++++++++++++ .../persistence/ChatDescription.client.tsx | 66 +++++++- app/lib/persistence/db.ts | 22 ++- app/lib/runtime/action-runner.ts | 3 + 7 files changed, 352 insertions(+), 42 deletions(-) create mode 100644 app/lib/hooks/useEditChatDescription.ts diff --git a/app/components/header/Header.tsx b/app/components/header/Header.tsx index 15cf4bf..8b2e81f 100644 --- a/app/components/header/Header.tsx +++ b/app/components/header/Header.tsx @@ -24,17 +24,19 @@ export function Header() { - - {() => } - - {chat.started && ( - - {() => ( -
- -
- )} -
+ {chat.started && ( // Display ChatDescription and HeaderActionButtons only when the chat has started. + <> + + {() => } + + + {() => ( +
+ +
+ )} +
+ )} ); diff --git a/app/components/sidebar/HistoryItem.tsx b/app/components/sidebar/HistoryItem.tsx index 4c28435..bbdcf20 100644 --- a/app/components/sidebar/HistoryItem.tsx +++ b/app/components/sidebar/HistoryItem.tsx @@ -1,6 +1,9 @@ +import { useParams } from '@remix-run/react'; +import { classNames } from '~/utils/classNames'; import * as Dialog from '@radix-ui/react-dialog'; import { type ChatHistoryItem } from '~/lib/persistence'; import WithTooltip from '~/components/ui/Tooltip'; +import { useEditChatDescription } from '~/lib/hooks'; interface HistoryItemProps { item: ChatHistoryItem; @@ -10,48 +13,115 @@ interface HistoryItemProps { } export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: HistoryItemProps) { + const { id: urlId } = useParams(); + const isActiveChat = urlId === item.urlId; + + const { editing, handleChange, handleBlur, handleSubmit, handleKeyDown, currentDescription, toggleEditMode } = + useEditChatDescription({ + initialDescription: item.description, + customChatId: item.id, + syncWithGlobalStore: isActiveChat, + }); + + const renderDescriptionForm = ( +
+ +