ic

apps/Test/gui/App.tsx

@@ -0,0 +1,65 @@
+import { Chat, ChatSidebar } from "@banorte/chat-ui";
+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 handleFeedback = async (key: string, rating: string): Promise<void> => {
+    await httpRequest("POST", "/v1/feedback", { key, rating });
+  };
+
+  const assistant = "Maya" + "Test";
+
+  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}
+          onFeedback={handleFeedback}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default App;