ic

apps/Test/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

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" />

apps/Test/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Test</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/gui/main.tsx"></script>
+    </body>
+</html>

apps/Test/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "Test",
+  "private": true,
+  "version": "0.0.7",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@banorte/chat-ui": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-markdown": "^9.0.1",
+    "react-spring": "^9.7.4",
+    "rehype-raw": "^7.0.0",
+    "sse.js": "^2.5.0",
+    "zustand": "^4.5.2"
+  },
+  "devDependencies": {
+    "@iconify-icon/react": "^2.1.0",
+    "@types/react": "^18.2.67",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
+    "daisyui": "^4.7.3",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "postcss": "^8.4.38",
+    "tailwind-scrollbar": "^3.1.0",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.3"
+  }
+}

apps/Test/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

apps/Test/pyproject.toml

@@ -0,0 +1,18 @@
+[project]
+name = "Test"
+version = "0.1.0"
+description = "Add your description here"
+readme = "README.md"
+requires-python = ">=3.12, <4"
+dependencies = [
+    "aiohttp>=3.11.16",
+    "fastapi>=0.115.6",
+    "hvac>=2.3.0",
+    "langchain-azure-ai[opentelemetry]>=0.1.4",
+    "mongo-memory",
+    "pydantic-settings>=2.8.1",
+    "uvicorn>=0.34.0",
+]
+
+[tool.uv.sources]
+mongo-memory = { workspace = true }

apps/Test/tailwind.config.js

@@ -0,0 +1,27 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./gui/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "navigation-pattern": "url('./assets/navigation.webp')",
+      },
+    },
+  },
+  plugins: [
+    require("daisyui"),
+    require("tailwind-scrollbar"),
+    require("@banorte/chat-ui/tailwind")
+  ],
+  daisyui: {
+    themes: [
+      {
+        light: {
+          ...require("daisyui/src/theming/themes")["light"],
+          primary: "red",
+          secondary: "teal",
+        },
+      },
+    ],
+  },
+};

apps/Test/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable", "ES2021.String"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["gui"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

apps/Test/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

apps/Test/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: "0.0.0.0",
+    port: 3000,
+    proxy: {
+      "/api": {
+        target: "http://localhost:8000",
+      },
+    },
+    allowedHosts: true,
+  },
+});