From 8a9699494fdeba0fc8f9de9c0d6ad3be528bf144 Mon Sep 17 00:00:00 2001
From: Harish Mohan Raj <harish@airt.ai>
Date: Fri, 5 Apr 2024 14:34:12 +0530
Subject: [PATCH] Update the default chat name when a new team is created
 (#292)

---
 app/main.wasp                                 |  1 +
 .../migration.sql                             |  2 ++
 app/src/client/admin/components/Sidebar.tsx   |  2 +-
 app/src/client/app/ChatPage.tsx               | 11 +++++++++-
 app/src/client/app/layout/ChatLayout.tsx      |  3 +++
 app/src/client/components/ChatSidebar.tsx     | 22 +++++++++++++++----
 .../client/components/EditableChatName.tsx    |  8 +++++--
 app/src/client/tests/chatUtils.test.ts        | 16 ++++++++++----
 app/src/client/utils/chatUtils.ts             | 21 +++++++++++++++---
 app/src/server/actions.ts                     |  3 +++
 10 files changed, 74 insertions(+), 15 deletions(-)
 create mode 100644 app/migrations/20240404022012_add_column_to_store_chat_name_update_status/migration.sql

diff --git a/app/main.wasp b/app/main.wasp
index 795fc66..7ce6035 100644
--- a/app/main.wasp
+++ b/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=}
 
diff --git a/app/migrations/20240404022012_add_column_to_store_chat_name_update_status/migration.sql b/app/migrations/20240404022012_add_column_to_store_chat_name_update_status/migration.sql
new file mode 100644
index 0000000..b8c71b9
--- /dev/null
+++ b/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;
diff --git a/app/src/client/admin/components/Sidebar.tsx b/app/src/client/admin/components/Sidebar.tsx
index 5991cbb..88e9102 100644
--- a/app/src/client/admin/components/Sidebar.tsx
+++ b/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'
       }`}
     >
diff --git a/app/src/client/app/ChatPage.tsx b/app/src/client/app/ChatPage.tsx
index 388ccc7..6bb7f57 100644
--- a/app/src/client/app/ChatPage.tsx
+++ b/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 ? (
diff --git a/app/src/client/app/layout/ChatLayout.tsx b/app/src/client/app/layout/ChatLayout.tsx
index 7eb15f5..e882751 100644
--- a/app/src/client/app/layout/ChatLayout.tsx
+++ b/app/src/client/app/layout/ChatLayout.tsx
@@ -12,6 +12,7 @@ interface Props {
   handleFormSubmit: any;
   currentChatDetails?: Chat | null;
   triggerChatFormSubmitMsg?: string | null;
+  refetchAllChatDetails: boolean;
 }
 
 const ChatLayout: FC<Props> = ({
@@ -19,6 +20,7 @@ const ChatLayout: FC<Props> = ({
   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 ===== --> */}
 
diff --git a/app/src/client/components/ChatSidebar.tsx b/app/src/client/components/ChatSidebar.tsx
index 78bff63..85e6eb8 100644
--- a/app/src/client/components/ChatSidebar.tsx
+++ b/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,6 +38,7 @@ const ChatSidebar = ({ sidebarOpen, setSidebarOpen }: ChatSidebarProps) => {
         id: chatId,
         data: {
           name: newChatName,
+          isChatNameUpdated: true,
         },
       });
     } catch (err: any) {
@@ -40,7 +46,15 @@ const ChatSidebar = ({ sidebarOpen, setSidebarOpen }: ChatSidebarProps) => {
     }
   };
 
-  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 : ''}
diff --git a/app/src/client/components/EditableChatName.tsx b/app/src/client/components/EditableChatName.tsx
index a5978b6..00cd514 100644
--- a/app/src/client/components/EditableChatName.tsx
+++ b/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'
         >
diff --git a/app/src/client/tests/chatUtils.test.ts b/app/src/client/tests/chatUtils.test.ts
index 139bbf9..7c6b22e 100644
--- a/app/src/client/tests/chatUtils.test.ts
+++ b/app/src/client/tests/chatUtils.test.ts
@@ -258,6 +258,7 @@ describe('chatUtils', () => {
     const inProgressConversation = { id: 1 };
     const messages: any[] = [];
     const activeChatId = 2;
+    const refetchChatDetails = vi.fn();
 
     await handleAgentResponse(
       response,
@@ -265,7 +266,8 @@ describe('chatUtils', () => {
       inProgressConversation,
       socket,
       messages,
-      activeChatId
+      activeChatId,
+      refetchChatDetails
     );
 
     expect(socket.emit).toHaveBeenCalledWith(
@@ -306,6 +308,7 @@ describe('chatUtils', () => {
     const inProgressConversation = { id: 1 };
     const messages: any[] = [];
     const activeChatId = 2;
+    const refetchChatDetails = vi.fn();
 
     await handleAgentResponse(
       response,
@@ -313,7 +316,8 @@ describe('chatUtils', () => {
       inProgressConversation,
       socket,
       messages,
-      activeChatId
+      activeChatId,
+      refetchChatDetails
     );
 
     expect(socket.emit).toHaveBeenCalledWith(
@@ -364,6 +368,7 @@ describe('chatUtils', () => {
     const inProgressConversation = { id: 1 };
     const messages: any = [];
     const activeChatId = 2;
+    const refetchChatDetails = vi.fn();
 
     await handleAgentResponse(
       response,
@@ -371,7 +376,8 @@ describe('chatUtils', () => {
       inProgressConversation,
       socket,
       messages,
-      activeChatId
+      activeChatId,
+      refetchChatDetails
     );
 
     expect(operations.updateCurrentConversation).toHaveBeenCalledWith({
@@ -409,6 +415,7 @@ describe('chatUtils', () => {
     const inProgressConversation = { id: 1 };
     const messages: any = [];
     const activeChatId = 2;
+    const refetchChatDetails = vi.fn();
 
     await handleAgentResponse(
       response,
@@ -416,7 +423,8 @@ describe('chatUtils', () => {
       inProgressConversation,
       socket,
       messages,
-      activeChatId
+      activeChatId,
+      refetchChatDetails
     );
 
     expect(operations.updateCurrentChat).toHaveBeenCalledWith({
diff --git a/app/src/client/utils/chatUtils.ts b/app/src/client/utils/chatUtils.ts
index 00af09b..59cf045 100644
--- a/app/src/client/utils/chatUtils.ts
+++ b/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 (
diff --git a/app/src/server/actions.ts b/app/src/server/actions.ts
index 338e6b7..ca53fa5 100644
--- a/app/src/server/actions.ts
+++ b/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']),
       }),