Add PR #292 (#294)

app/main.wasp

@@ -136,6 +136,7 @@ entity Chat {=psl
     user        User?    @relation(fields: [userId], references: [id])
     userId      Int?
     name        String?          @default("New chat")
+    isChatNameUpdated Boolean         @default(false)
     conversations    Conversation[]
 psl=}
 

app/migrations/20240404022012_add_column_to_store_chat_name_update_status/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Chat" ADD COLUMN     "isChatNameUpdated" BOOLEAN NOT NULL DEFAULT false;

app/src/client/admin/components/Sidebar.tsx

@@ -58,7 +58,7 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
   return (
     <aside
       ref={sidebar}
-      className={`absolute left-0 top-0 z-9999 flex h-screen w-72.5 flex-col overflow-y-hidden bg-captn-dark-blue duration-300 ease-linear dark:bg-captn-dark-blue lg:static lg:translate-x-0 ${
+      className={`absolute left-0 top-0 z-9999 flex h-screen w-75 flex-col overflow-y-hidden bg-captn-dark-blue duration-300 ease-linear dark:bg-captn-dark-blue lg:static lg:translate-x-0 ${
         sidebarOpen ? 'translate-x-0' : '-translate-x-full'
       }`}
     >

app/src/client/app/ChatPage.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useSocket, useSocketListener } from 'wasp/client/webSocket';
 import { type User } from 'wasp/entities';
 
@@ -23,8 +24,10 @@ import {
   callOpenAiAgent,
   handleChatError,
 } from '../utils/chatUtils';
+import { set } from 'zod';
 
 const ChatPage = ({ user }: { user: User }) => {
+  const [refetchAllChatDetails, setRefetchAllChatDetails] = useState(false);
   const { socket } = useSocket();
   const location = useLocation();
   const { pathname } = location;
@@ -66,6 +69,10 @@ const ChatPage = ({ user }: { user: User }) => {
     });
   };
 
+  const refetchChatDetails = () => {
+    setRefetchAllChatDetails(!refetchAllChatDetails);
+  };
+
   const handleFormSubmit = async (
     userQuery: string,
     isUserRespondedWithNextAction: boolean = false,
@@ -110,7 +117,8 @@ const ChatPage = ({ user }: { user: User }) => {
             currentChatDetails,
             inProgressConversation,
             socket,
-            messages
+            messages,
+            refetchChatDetails
           );
         }
       } catch (err: any) {
@@ -158,6 +166,7 @@ const ChatPage = ({ user }: { user: User }) => {
       handleFormSubmit={handleFormSubmit}
       currentChatDetails={currentChatDetails}
       triggerChatFormSubmitMsg={triggerChatFormSubmitMsg}
+      refetchAllChatDetails={refetchAllChatDetails}
     >
       <div className='flex h-full flex-col'>
         {currentChatDetails ? (

app/src/client/app/layout/ChatLayout.tsx

@@ -12,13 +12,15 @@ interface Props {
   handleFormSubmit: any;
   currentChatDetails?: Chat | null;
   triggerChatFormSubmitMsg?: string | null;
+  refetchAllChatDetails: boolean;
 }
 
 const ChatLayout: FC<Props> = ({
   children,
   handleFormSubmit,
   currentChatDetails,
   triggerChatFormSubmitMsg,
+  refetchAllChatDetails,
 }) => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const { data: user } = useAuth();
@@ -66,6 +68,7 @@ const ChatLayout: FC<Props> = ({
         <ChatSidebar
           sidebarOpen={sidebarOpen}
           setSidebarOpen={setSidebarOpen}
+          refetchAllChatDetails={refetchAllChatDetails}
         />
         {/* <!-- ===== Sidebar End ===== --> */}
 

app/src/client/components/ChatSidebar.tsx

@@ -11,9 +11,14 @@ import { updateCurrentChat } from 'wasp/client/operations';
 interface ChatSidebarProps {
   sidebarOpen: boolean;
   setSidebarOpen: (arg: boolean) => void;
+  refetchAllChatDetails: boolean;
 }
 
-const ChatSidebar = ({ sidebarOpen, setSidebarOpen }: ChatSidebarProps) => {
+const ChatSidebar = ({
+  sidebarOpen,
+  setSidebarOpen,
+  refetchAllChatDetails,
+}: ChatSidebarProps) => {
   const history = useHistory();
   const location = useLocation();
   const { pathname } = location;
@@ -33,14 +38,23 @@ const ChatSidebar = ({ sidebarOpen, setSidebarOpen }: ChatSidebarProps) => {
         id: chatId,
         data: {
           name: newChatName,
+          isChatNameUpdated: true,
         },
       });
     } catch (err: any) {
       console.log('Unable to update the chat name. Please try again later.');
     }
   };
 
-  const { data: chats, isLoading: isLoadingChats } = useQuery(getChats);
+  const {
+    data: chats,
+    isLoading: isLoadingChats,
+    refetch: refetchChats,
+  } = useQuery(getChats);
+
+  useEffect(() => {
+    refetchChats();
+  }, [refetchAllChatDetails]);
 
   // close on click outside
   useEffect(() => {
@@ -96,7 +110,7 @@ const ChatSidebar = ({ sidebarOpen, setSidebarOpen }: ChatSidebarProps) => {
   return (
     <aside
       ref={sidebar}
-      className={`border-r-2 absolute left-0 top-0 z-9999 flex h-screen w-72.5 flex-col overflow-y-hidden bg-captn-dark-blue duration-300 ease-linear dark:bg-captn-dark-blue lg:static lg:translate-x-0 ${
+      className={`border-r-2 absolute left-0 top-0 z-9999 flex h-screen w-75 flex-col overflow-y-hidden bg-captn-dark-blue duration-300 ease-linear dark:bg-captn-dark-blue lg:static lg:translate-x-0 ${
         sidebarOpen ? 'translate-x-0' : '-translate-x-full'
       }`}
     >
@@ -201,7 +215,7 @@ const ChatSidebar = ({ sidebarOpen, setSidebarOpen }: ChatSidebarProps) => {
                       >
                         <path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'></path>
                       </svg>
-                      <span className='ml-3'>
+                      <span>
                         <EditableChatName
                           chatId={chat.id}
                           chatName={chat.name ? chat.name : ''}

app/src/client/components/EditableChatName.tsx

@@ -23,6 +23,10 @@ const EditableChatName: React.FC<EditableChatNameProps> = ({
     }
   }, [isEditing]);
 
+  useEffect(() => {
+    setInputValue(chatName);
+  }, [chatName]);
+
   const handleIconClick = (event: React.MouseEvent) => {
     event.preventDefault();
     setIsEditing(true);
@@ -44,7 +48,7 @@ const EditableChatName: React.FC<EditableChatNameProps> = ({
   };
 
   return (
-    <div className='editable-chat-name' style={{ width: '170px' }}>
+    <div className='editable-chat-name' style={{ width: '195px' }}>
       {!isEditing && (
         <span
           className='chat-name overflow-ellipsis overflow-hidden whitespace-nowrap'
@@ -72,7 +76,7 @@ const EditableChatName: React.FC<EditableChatNameProps> = ({
       )}
       {!isEditing && (
         <button
-          className='edit-button absolute right-3 top-3 text-xs'
+          className='edit-button absolute right-3 top-3 text-sm'
           onClick={handleIconClick}
           data-testid='edit-button'
         >

app/src/client/tests/chatUtils.test.ts

@@ -258,14 +258,16 @@ describe('chatUtils', () => {
     const inProgressConversation = { id: 1 };
     const messages: any[] = [];
     const activeChatId = 2;
+    const refetchChatDetails = vi.fn();
 
     await handleAgentResponse(
       response,
       currentChatDetails,
       inProgressConversation,
       socket,
       messages,
-      activeChatId
+      activeChatId,
+      refetchChatDetails
     );
 
     expect(socket.emit).toHaveBeenCalledWith(
@@ -306,14 +308,16 @@ describe('chatUtils', () => {
     const inProgressConversation = { id: 1 };
     const messages: any[] = [];
     const activeChatId = 2;
+    const refetchChatDetails = vi.fn();
 
     await handleAgentResponse(
       response,
       currentChatDetails,
       inProgressConversation,
       socket,
       messages,
-      activeChatId
+      activeChatId,
+      refetchChatDetails
     );
 
     expect(socket.emit).toHaveBeenCalledWith(
@@ -364,14 +368,16 @@ describe('chatUtils', () => {
     const inProgressConversation = { id: 1 };
     const messages: any = [];
     const activeChatId = 2;
+    const refetchChatDetails = vi.fn();
 
     await handleAgentResponse(
       response,
       currentChatDetails,
       inProgressConversation,
       socket,
       messages,
-      activeChatId
+      activeChatId,
+      refetchChatDetails
     );
 
     expect(operations.updateCurrentConversation).toHaveBeenCalledWith({
@@ -409,14 +415,16 @@ describe('chatUtils', () => {
     const inProgressConversation = { id: 1 };
     const messages: any = [];
     const activeChatId = 2;
+    const refetchChatDetails = vi.fn();
 
     await handleAgentResponse(
       response,
       currentChatDetails,
       inProgressConversation,
       socket,
       messages,
-      activeChatId
+      activeChatId,
+      refetchChatDetails
     );
 
     expect(operations.updateCurrentChat).toHaveBeenCalledWith({

app/src/client/utils/chatUtils.ts

@@ -116,7 +116,8 @@ export const callOpenAiAgent = async (
   currentChatDetails: any,
   inProgressConversation: any,
   socket: any,
-  messages: any
+  messages: any,
+  refetchChatDetails: () => void
 ) => {
   const response = await getAgentResponse({
     chatId: activeChatId,
@@ -128,7 +129,8 @@ export const callOpenAiAgent = async (
     inProgressConversation,
     socket,
     messages,
-    activeChatId
+    activeChatId,
+    refetchChatDetails
   );
 };
 
@@ -138,7 +140,8 @@ export const handleAgentResponse = async (
   inProgressConversation: any,
   socket: any,
   messages: any,
-  activeChatId: number
+  activeChatId: number,
+  refetchChatDetails: () => void
 ) => {
   if (!!response.customer_brief) {
     socket.emit(
@@ -172,6 +175,12 @@ export const handleAgentResponse = async (
       },
     }));
 
+  const chatName = currentChatDetails.isChatNameUpdated
+    ? null
+    : response['conversation_name']
+      ? response['conversation_name']
+      : null;
+
   await updateCurrentChat({
     id: activeChatId,
     data: {
@@ -182,8 +191,14 @@ export const handleAgentResponse = async (
       smartSuggestions: response['smart_suggestions'],
       isExceptionOccured: response['is_exception_occured'] || false,
       customerBrief: response['customer_brief'],
+      ...(chatName && {
+        name: chatName,
+        isChatNameUpdated: true,
+      }),
     },
   });
+
+  chatName && refetchChatDetails();
 };
 
 export const handleChatError = async (

app/src/server/actions.ts

@@ -430,6 +430,9 @@ export const getAgentResponse: GetAgentResponse<
       ...(json['customer_brief'] !== undefined && {
         customer_brief: json['customer_brief'],
       }),
+      ...(json['conversation_name'] !== undefined && {
+        conversation_name: json['conversation_name'],
+      }),
       ...(json['is_exception_occured'] !== undefined && {
         is_exception_occured: Boolean(json['is_exception_occured']),
       }),