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;

apps/Test/gui/index.css

@@ -0,0 +1,16 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.markdown a {
+    color: #0000FF;
+    text-decoration: underline;
+}
+
+.markdown a:hover {
+    color: #FF0000;
+}
+
+.markdown a:visited {
+    color: #800080;
+}

apps/Test/gui/main.tsx

@@ -0,0 +1,5 @@
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

apps/Test/gui/store/conversationStore.ts

@@ -0,0 +1,19 @@
+import { create } from "zustand";
+
+interface conversationState {
+  assistantName: string;
+  conversationId: string;
+  receivingMsg: boolean;
+  setConversationId: (newId: string) => void;
+  setAssistantName: (newName: string) => void;
+  setReceivingMsg: (newState: boolean) => void;
+}
+
+export const conversationStore = create<conversationState>()((set) => ({
+  assistantName: "",
+  conversationId: "",
+  receivingMsg: false,
+  setConversationId: (newId) => set({ conversationId: newId }),
+  setAssistantName: (newName) => set({ assistantName: newName }),
+  setReceivingMsg: (newState) => set({ receivingMsg: newState }),
+}));

apps/Test/gui/store/messageStore.ts

@@ -0,0 +1,14 @@
+import { create } from "zustand";
+
+interface messageState {
+  messages: Array<{ user: boolean; content: string }>;
+  pushMessage: (newMessage: { user: boolean; content: string }) => void;
+  resetConversation: () => void;
+}
+
+export const messageStore = create<messageState>()((set) => ({
+  messages: [],
+  pushMessage: (newMessage) =>
+    set((state) => ({ messages: [...state.messages, newMessage] })),
+  resetConversation: () => set(() => ({ messages: [] })),
+}));

apps/Test/gui/utils/request.ts

@@ -0,0 +1,16 @@
+export async function httpRequest(
+  method: string,
+  endpoint: string,
+  body: object | null,
+) {
+  const url = "/api" + endpoint;
+  const data = {
+    method: method,
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(body),
+    credentials: "include" as RequestCredentials,
+  };
+  return await fetch(url, data).then((response) => response.json());
+}

apps/Test/gui/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />