Merge pull request #1156 from buster-so/big-nate-bus-1949-three-dot-rename-does-nothing-in-the-chat

Big nate bus 1949 three dot rename does nothing in the chat

apps/web/src/api/buster-electric/chats/hook.ts

@@ -13,6 +13,7 @@ const updateOperations: Array<`insert` | `update` | `delete`> = ['update'];
 export const useTrackAndUpdateChatChanges = (
   {
     chatId,
+    isStreamingMessage,
   }: {
     chatId: string | undefined;
     isStreamingMessage: boolean;
@@ -23,7 +24,7 @@ export const useTrackAndUpdateChatChanges = (
   const shape = useMemo(() => {
     return chatShape({ chatId: chatId || '' });
   }, [chatId]);
-  const subscribe = !!chatId;
+  const subscribe = !!chatId && isStreamingMessage;
 
   return useShapeStream(
     shape,

apps/web/src/api/buster-electric/messages/hooks.ts

@@ -33,6 +33,7 @@ export const useTrackAndUpdateMessageChanges = (
   {
     chatId,
     messageId,
+    isStreamingMessage,
   }: {
     chatId: string | undefined;
     messageId: string;
@@ -45,7 +46,7 @@ export const useTrackAndUpdateMessageChanges = (
   const getChatMemoized = useGetChatMemoized();
   const queryClient = useQueryClient();
 
-  const subscribe = !!chatId && !!messageId && messageId !== 'undefined';
+  const subscribe = !!chatId && !!messageId && messageId !== 'undefined' && isStreamingMessage;
 
   const shape = useMemo(() => {
     return messageShape({ chatId: chatId || '', messageId });

apps/web/src/components/features/chat/ChatHeaderTitle.tsx

@@ -15,9 +15,10 @@ export const CHAT_HEADER_TITLE_ID = 'chat-header-title';
 export const ChatHeaderTitle: React.FC<{
   chatTitle: string;
   chatId: string;
-  isStreamFinished: boolean;
-}> = ({ chatTitle, chatId, isStreamFinished }) => {
+  isStreamingMessage: boolean;
+}> = ({ chatTitle, chatId, isStreamingMessage }) => {
   const { mutateAsync: updateChat } = useUpdateChat();
+  const isStreamFinished = !isStreamingMessage;
 
   if (!chatTitle) {
     return <div />; //we need to return something for alignment
@@ -26,8 +27,11 @@ export const ChatHeaderTitle: React.FC<{
   return (
     <AnimatePresence mode="wait" initial={isStreamFinished}>
       <motion.div
-        {...(!isStreamFinished ? animation : {})}
+        {...(isStreamFinished ? {} : animation)}
         key={chatTitle || 'initial'}
+        transition={{
+          duration: isStreamFinished ? 0 : 0.2,
+        }}
         className="flex w-full items-center overflow-hidden"
       >
         <EditableTitle

apps/web/src/components/features/chat/threeDotMenuHooks.tsx

@@ -7,6 +7,7 @@ import { createDropdownItem } from '@/components/ui/dropdown';
 import { ArrowRight, DuplicatePlus, Pencil, ShareRight, Star, Trash } from '@/components/ui/icons';
 import { Star as StarFilled } from '@/components/ui/icons/NucleoIconFilled';
 import { useBusterNotifications } from '@/context/BusterNotifications';
+import { ensureElementExists } from '@/lib/element';
 import { getIsEffectiveOwner } from '@/lib/share';
 import { timeout } from '@/lib/timeout';
 import { getShareAssetConfig, ShareMenuContent } from '../ShareMenu';
@@ -45,12 +46,18 @@ export const useRenameChatTitle = () => {
         label: 'Rename',
         value: 'edit-chat-title',
         icon: <Pencil />,
-        onClick: async () => {
-          const input = document.getElementById(CHAT_HEADER_TITLE_ID) as HTMLInputElement;
+        onClick: async (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          const input = await ensureElementExists(
+            () => document.getElementById(CHAT_HEADER_TITLE_ID) as HTMLInputElement
+          );
           if (input) {
-            await timeout(25);
+            // Focus first, then select after a small delay to ensure focus completes
             input.focus();
-            input.select();
+            setTimeout(() => {
+              input.select(); //i think this is related to how the dropdown is closing and taking away focus
+            }, 200);
           }
         },
       }),

apps/web/src/context/Chats/useIsStreamingMessage.ts

@@ -22,9 +22,12 @@ export const useIsStreamingMessage = () => {
   const isStreamingMessage = useQueries({
     queries: stableQueries,
     combine: useCallback(
-      (result: { data: boolean | undefined }[]) => result.some((res) => res.data === false),
-      []
+      (result: { data: boolean | undefined }[]) => {
+        return result.some((res) => res.data === false);
+      },
+      [stableQueries]
     ),
   });
+
   return isStreamingMessage;
 };

apps/web/src/layouts/ChatLayout/ChatHeader.tsx

@@ -7,14 +7,14 @@ import { useGetChatId } from '@/context/Chats/useGetChatId';
 export const ChatHeader: React.FC = React.memo(() => {
   const chatId = useGetChatId();
   const chatTitle = useGetActiveChatTitle();
-  const isStreamFinished = useIsStreamingMessage();
+  const isStreamingMessage = useIsStreamingMessage();
 
   return (
     <>
       <ChatHeaderTitle
         chatTitle={chatTitle || ''}
         chatId={chatId || ''}
-        isStreamFinished={isStreamFinished}
+        isStreamingMessage={isStreamingMessage}
       />
       <ChatHeaderOptions />
     </>

apps/web/src/layouts/ChatLayout/ChatLayoutContext/useChatStreaming.tsx

@@ -11,7 +11,6 @@ import {
 import { chatQueryKeys } from '@/api/query_keys/chat';
 import { metricsQueryKeys } from '@/api/query_keys/metric';
 import { useBlackboxMessage } from '@/context/BlackBox/useBlackboxMessage';
-import { updateDocumentTitle } from '@/hooks/useDocumentTitle';
 import { useMemoizedFn } from '@/hooks/useMemoizedFn';
 import { updateChatToIChat } from '@/lib/chat';
 

apps/web/src/lib/routes/index.test.ts

@@ -38,11 +38,13 @@ describe('createFullURL', () => {
       pathname: '/reports/123',
       search: { tab: 'overview' },
       searchStr: '?tab=overview',
-      state: {},
+      state: { __TSR_index: 0 },
       hash: '',
       key: 'test-key',
       maskedLocation: undefined,
-    } as ParsedLocation;
+      publicHref: '/reports/123?tab=overview',
+      url: '/reports/123?tab=overview',
+    } as unknown as ParsedLocation;
 
     const result = createFullURL(mockLocation);