ic

apps/voz-del-cliente/gui/App.tsx

@@ -0,0 +1,67 @@
+import { ChatSidebar } from "./components/ChatSidebar";
+import { Chat } from "./components/Chat";
+import { messageStore } from "./store/messageStore";
+import { conversationStore } from "./store/conversationStore";
+import { httpRequest } from "./utils/request";
+
+// Assets
+import banorteLogo from "./assets/banortelogo.png";
+import sidebarMaya from "./assets/sidebar_maya_contigo.png";
+import brujulaElipse from "./assets/brujula_elipse.png";
+import sendIcon from "./assets/chat_maya_boton_enviar.png";
+import userAvatar from "./assets/chat_maya_default_avatar.png";
+import botAvatar from "./assets/brujula.png";
+
+function App() {
+  const { messages, pushMessage } = messageStore();
+  const {
+    conversationId,
+    setConversationId,
+    setAssistantName,
+    receivingMsg,
+    setReceivingMsg,
+  } = conversationStore();
+
+  const handleStartConversation = async (
+    user: string,
+    assistant: string
+  ): Promise<string> => {
+    const response = await httpRequest("POST", "/v1/conversation", {
+      user,
+      assistant,
+    });
+    console.log("Conversation id:", response.conversation_id);
+    return response.conversation_id;
+  };
+
+  const assistant = "Voz del cliente";
+
+  return (
+    <div className="w-screen flex flex-col h-screen min-h-screen scrollbar-none">
+      <div className="w-full flex">
+        <ChatSidebar
+          assistant={assistant}
+          logoSrc={banorteLogo}
+          sidebarImageSrc={sidebarMaya}
+          assistantAvatarSrc={brujulaElipse}
+        />
+        <Chat
+          assistant={assistant}
+          messages={messages}
+          pushMessage={pushMessage}
+          conversationId={conversationId}
+          setConversationId={setConversationId}
+          setAssistantName={setAssistantName}
+          receivingMsg={receivingMsg}
+          setReceivingMsg={setReceivingMsg}
+          onStartConversation={handleStartConversation}
+          sendIcon={sendIcon}
+          userAvatar={userAvatar}
+          botAvatar={botAvatar}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default App;