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;

apps/voz-del-cliente/gui/components/Chat.tsx

@@ -0,0 +1,184 @@
+import { FormEvent, useState, useEffect, useRef } from "react";
+import { ChatMessage } from "./ChatMessage";
+import "material-symbols";
+
+export { Chat };
+
+interface Message {
+  user: boolean;
+  content: string;
+  withDeepResearch: boolean;
+}
+
+interface ChatProps {
+  assistant: string;
+  messages: Message[];
+  pushMessage: (message: Message) => void;
+  conversationId: string;
+  setConversationId: (id: string) => void;
+  setAssistantName: (name: string) => void;
+  receivingMsg: boolean;
+  setReceivingMsg: (receiving: boolean) => void;
+  onStartConversation: (
+    user: string,
+    assistant: string,
+    withDeepResearch: boolean
+  ) => Promise<string>;
+  sendIcon: string;
+  userAvatar: string;
+  botAvatar: string;
+  onFeedback?: (key: string, rating: string) => Promise<void>;
+}
+
+function Chat({
+  assistant,
+  messages,
+  pushMessage,
+  conversationId,
+  setConversationId,
+  setAssistantName,
+  receivingMsg,
+  setReceivingMsg,
+  onStartConversation,
+  sendIcon,
+  userAvatar,
+  botAvatar,
+  onFeedback,
+}: ChatProps) {
+  const [input, setInput] = useState("");
+  const [isDeepResearch, setIsDeepResearch] = useState(false);
+  const bottomRef = useRef(null);
+
+  async function startConversation() {
+    const newId = await onStartConversation("user", assistant, isDeepResearch);
+    setConversationId(newId);
+  }
+
+  useEffect(() => {
+    setAssistantName(assistant);
+    startConversation();
+  }, []);
+
+  function changeInput(e: FormEvent<HTMLInputElement>) {
+    e.preventDefault();
+    setInput(e.currentTarget.value);
+  }
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    const trimmedInput = input.trim();
+    if (!trimmedInput) return;
+
+    pushMessage({
+      user: true,
+      content: trimmedInput,
+      withDeepResearch: isDeepResearch,
+    });
+    setInput("");
+    pushMessage({
+      user: false,
+      content: trimmedInput,
+      withDeepResearch: isDeepResearch,
+    });
+  }
+
+  function toggleDeepResearch() {
+    setIsDeepResearch(!isDeepResearch);
+  }
+
+  function scrollToBottom() {
+    // @ts-expect-error idk
+    bottomRef.current.scrollIntoView({ behavior: "smooth" });
+  }
+
+  return (
+    <div className="flex flex-1 flex-col items-center bg-slate-100 h-screen">
+      <div className="mt-5 w-3/5 flex-1 overflow-y-auto scrollbar min-h-0">
+        {messages.map((message, index) => (
+          <ChatMessage
+            key={index}
+            isUser={message.user}
+            content={message.content}
+            event={scrollToBottom}
+            conversationId={conversationId}
+            withDeepResearch={message.withDeepResearch}
+            setReceivingMsg={setReceivingMsg}
+            userAvatar={userAvatar}
+            botAvatar={botAvatar}
+            onFeedback={onFeedback}
+          />
+        ))}
+        <div ref={bottomRef}></div>
+      </div>
+      <form
+        className="flex-shrink-0 ml-5 my-5 flex w-3/4 items-center justify-center mr-5"
+        onSubmit={handleSubmit}
+      >
+        <div
+          className="
+            flex h-auto w-[90%] flex-col
+            rounded-3xl border border-gray-300 bg-white
+            transition-all duration-300
+            focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-300
+          "
+        >
+          <input
+            type="text"
+            autoFocus
+            value={input}
+            onChange={changeInput}
+            disabled={receivingMsg}
+            placeholder="¡Pregúntame algo!"
+            className="
+              w-full resize-none border-none bg-transparent
+              p-4 pb-2 text-base
+              focus:outline-none focus:ring-0
+            "
+          />
+          <div className="self-start px-3 pb-2">
+            <button
+              title="Obtén respuestas detalladas"
+              type="button"
+              onClick={toggleDeepResearch}
+              disabled={receivingMsg}
+              className={`flex cursor-pointer items-center rounded-lg p-1 transition-colors duration-200
+                ${isDeepResearch ? "bg-red-100" : "hover:bg-slate-100"}
+              `}
+            >
+              <span
+                className="material-symbols-rounded align-middle"
+                style={
+                  isDeepResearch
+                    ? { color: "rgb(235, 0, 41)" }
+                    : { color: "rgb(107, 114, 128)" }
+                }
+              >
+                travel_explore
+              </span>
+              <span
+                className="ml-2 text-sm font-medium"
+                style={
+                  isDeepResearch
+                    ? { color: "rgb(235, 0, 41)" }
+                    : { color: "rgb(107, 114, 128)" }
+                }
+              >
+                Deep Research
+              </span>
+            </button>
+          </div>
+        </div>
+
+        <button
+          type="submit"
+          className={`btn-error ml-4 hover:border-red-200 hover:opacity-80 ${
+            !input.trim() ? "opacity-50" : ""
+          }`}
+          disabled={receivingMsg || !input.trim()}
+        >
+          <img src={sendIcon} alt="Send" className="h-14 w-14" />
+        </button>
+      </form>
+    </div>
+  );
+}

apps/voz-del-cliente/gui/components/ChatMessage.tsx

@@ -0,0 +1,288 @@
+import { useState, useEffect } from "react";
+import { FeedbackButton } from "@banorte/chat-ui";
+import Markdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import { SSE } from "sse.js";
+
+export { ChatMessage };
+
+interface ChatMessageProps {
+  isUser: boolean;
+  content: string;
+  event: CallableFunction;
+  conversationId: string;
+  withDeepResearch: boolean;
+  setReceivingMsg: (receiving: boolean) => void;
+  userAvatar: string;
+  botAvatar: string;
+  onFeedback?: (key: string, rating: string) => Promise<void>;
+}
+
+function ChatMessage({
+  isUser,
+  content,
+  event,
+  conversationId,
+  withDeepResearch,
+  setReceivingMsg,
+  userAvatar,
+  botAvatar,
+  onFeedback,
+}: ChatMessageProps) {
+  const [buff, setBuff] = useState("");
+  const [responseId, setResponseId] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const [images, setImages] = useState<string[]>([]);
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const [acceptFeedback, setAcceptFeedback] = useState(false);
+  const [streamIndex, setStreamIndex] = useState(0);
+  const [fullResponse, setFullResponse] = useState("");
+  const [pendingReferences, setPendingReferences] = useState<Array<string>>([]);
+  const [streamingComplete, setStreamingComplete] = useState(false);
+
+  const nextImage = () => {
+    if (currentImageIndex < images.length - 1) {
+      setCurrentImageIndex((prev) => prev + 1);
+    }
+  };
+
+  const prevImage = () => {
+    if (currentImageIndex > 0) {
+      setCurrentImageIndex((prev) => prev - 1);
+    }
+  };
+
+  function setReferences(buff: string, references: Array<string>) {
+    const citations = buff.match(/\[(\d+)\]/g);
+    let newText = buff;
+    if (citations) {
+      citations.forEach((citation) => {
+        const citationNumber = parseInt(citation.replace(/\[|\]/g, "")) - 1;
+        const reference = references[citationNumber];
+        const anchorTag = `<a class="text-blue-700 underline" href="${reference}"  target="_blank" rel="noopener noreferrer">${citation}</a>`;
+        newText = newText.replaceAll(citation, anchorTag);
+      });
+    }
+    return newText;
+  }
+
+  useEffect(() => {
+    if (fullResponse && streamIndex < fullResponse.length) {
+      setLoading(false);
+
+      const timer = setTimeout(() => {
+        setBuff((prev) => prev + fullResponse[streamIndex]);
+        setStreamIndex((prev) => prev + 1);
+        event();
+      }, 3);
+
+      return () => clearTimeout(timer);
+    } else if (fullResponse && streamIndex === fullResponse.length) {
+      setReceivingMsg(false);
+      setStreamingComplete(true);
+      // Apply references after streaming is complete
+      if (pendingReferences.length > 0) {
+        const referencedText = setReferences(fullResponse, pendingReferences);
+        setBuff(referencedText);
+        setPendingReferences([]);
+      }
+    }
+  }, [fullResponse, streamIndex, pendingReferences]);
+
+  async function getStream() {
+    const payload = JSON.stringify({
+      prompt: content,
+      conversation_id: conversationId,
+      with_deep_research: withDeepResearch,
+    });
+
+    const url = "/api/v1/message?stream=True";
+    const eventSource = new SSE(url, {
+      withCredentials: true,
+      headers: { "Content-Type": "application/json" },
+      payload: payload,
+    });
+
+    eventSource.onmessage = async (event) => {
+      console.log(event.data);
+      const ResponseChunk = JSON.parse(event.data);
+
+      if (ResponseChunk["type"] === "text") {
+        setFullResponse((prev) => prev + ResponseChunk["content"]);
+      } else if (ResponseChunk["type"] === "reference") {
+        setPendingReferences(ResponseChunk["content"]);
+      } else if (ResponseChunk["type"] === "end") {
+        setResponseId(ResponseChunk["content"]);
+        eventSource.close();
+      } else if (ResponseChunk["type"] === "image") {
+        const newImages = ResponseChunk.content.slice(0, 3);
+        setImages((prev) => {
+          const combinedImages = [...prev, ...newImages];
+          return combinedImages.slice(0, 3);
+        });
+      } else if (ResponseChunk["type"] == "tool") {
+        setAcceptFeedback(true);
+      } else if (ResponseChunk["type"] === "error") {
+        setFullResponse((prev) => prev + "\n\n" + ResponseChunk["content"]);
+        eventSource.close();
+      }
+    };
+    eventSource.onerror = async (e) => {
+      console.log("error" + e);
+      setReceivingMsg(false);
+      setLoading(false);
+      eventSource.close();
+    };
+  }
+
+  useEffect(() => {
+    if (!isUser) {
+      setLoading(true);
+      setReceivingMsg(true);
+      getStream();
+    } else {
+      setBuff(content);
+      event();
+    }
+  }, []);
+
+  const ImageViewer = () => {
+    if (images.length === 0) return null;
+
+    return (
+      <div className="mt-5 space-y-4">
+        <div className="relative">
+          <img
+            src={images[currentImageIndex]}
+            alt={`Generated image ${currentImageIndex + 1}`}
+            className="w-full h-auto rounded-lg"
+          />
+          <div className="flex justify-between items-center mt-4">
+            <button
+              onClick={prevImage}
+              disabled={currentImageIndex === 0}
+              className={`px-4 py-2 rounded ${
+                currentImageIndex === 0
+                  ? "text-gray-400 cursor-not-allowed"
+                  : "text-gray-700 hover:bg-gray-100"
+              }`}
+            >
+              ←
+            </button>
+            <button
+              onClick={nextImage}
+              disabled={currentImageIndex === images.length - 1}
+              className={`px-4 py-2 rounded ${
+                currentImageIndex === images.length - 1
+                  ? "text-gray-400 cursor-not-allowed"
+                  : "text-gray-700 hover:bg-gray-100"
+              }`}
+            >
+              →
+            </button>
+          </div>
+          <span className="text-sm text-gray-600 mt-2 block text-center">
+            Imagen {currentImageIndex + 1} de {images.length}
+          </span>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {isUser ? (
+        <div className="m-5 mr-5 flex flex-row-reverse items-start space-x-4">
+          <div className="avatar placeholder mx-4 w-14 -mt-1">
+            <img src={userAvatar} alt="user avatar icon" />
+          </div>
+          <div className="inline-block max-w-[82%] 2xl:max-w-[88%]">
+            <div className="border border-slate-400 rounded-3xl bg-white p-4 text-gray-500">
+              <div className="whitespace-pre-wrap text-left">
+                {loading && (
+                  <span className="loading loading-dots loading-md"></span>
+                )}
+                <Markdown rehypePlugins={[rehypeRaw]}>{buff}</Markdown>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="m-5 flex items-start space-x-4 w-full">
+          <div className="avatar placeholder mx-4 w-14 -mt-1 mr-2">
+            <img src={botAvatar} alt="bot avatar icon" />
+          </div>
+          <div className="inline-block max-w-[82%] 2xl:max-w-[88%]">
+            <div className="border-2 border-red-500 rounded-3xl bg-white p-4 text-gray-500 pl-6">
+              <div className="flex flex-col items-start">
+                <div className="text-left w-full">
+                  {loading && (
+                    <>
+                      {withDeepResearch ? (
+                        <div className="flex items-center justify-center gap-2 w-full my-2">
+                          <span className="loading loading-spinner loading-md"></span>
+                          <span className="text-gray-800 text-m font-medium">
+                            Pensamiento profundo...
+                          </span>
+                        </div>
+                      ) : (
+                        <span className="loading loading-dots loading-md"></span>
+                      )}
+                    </>
+                  )}
+                  <Markdown
+                    rehypePlugins={[rehypeRaw]}
+                    components={{
+                      h1: ({ ...props }) => (
+                        <h1 className="text-2xl font-bold mb-4" {...props} />
+                      ),
+                      h2: ({ ...props }) => (
+                        <h2 className="text-xl font-bold mb-3" {...props} />
+                      ),
+                      h3: ({ ...props }) => (
+                        <h3 className="text-lg font-bold mb-2" {...props} />
+                      ),
+                      p: ({ ...props }) => <p className="mb-4" {...props} />,
+                      ul: ({ ...props }) => (
+                        <ul
+                          className="list-disc pl-6 mb-4 space-y-2"
+                          {...props}
+                        />
+                      ),
+                      ol: ({ ...props }) => (
+                        <ol
+                          className="list-decimal pl-6 mb-4 space-y-2"
+                          {...props}
+                        />
+                      ),
+                      li: ({ ...props }) => <li className="mb-1" {...props} />,
+                      a: ({ ...props }) => (
+                        <a
+                          className="text-blue-600 underline hover:text-blue-800"
+                          {...props}
+                        />
+                      ),
+                      strong: ({ ...props }) => (
+                        <strong className="font-bold" {...props} />
+                      ),
+                    }}
+                  >
+                    {buff}
+                  </Markdown>
+                  <ImageViewer />
+                </div>
+                {streamingComplete && acceptFeedback && onFeedback && (
+                  <FeedbackButton
+                    messageKey={responseId}
+                    onFeedback={onFeedback}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

apps/voz-del-cliente/gui/components/ChatSidebar.tsx

@@ -0,0 +1,55 @@
+export { ChatSidebar };
+
+interface ChatSidebarProps {
+  assistant: string;
+  logoSrc: string;
+  sidebarImageSrc: string;
+  assistantAvatarSrc: string;
+}
+
+function ChatSidebar({
+  assistant,
+  logoSrc,
+  sidebarImageSrc,
+  assistantAvatarSrc,
+}: ChatSidebarProps) {
+  return (
+    <>
+      <nav className="bg-[#1b0103] shadow-lg min-h-[641px] min-w-[250px] py-6 px-6 font-[sans-serif] flex flex-col overflow-auto w-[272px] 2xl:h-screen">
+        <div className="flex flex-wrap items-center cursor-pointer">
+          <div className="relative w-full mb-12 ">
+            <div className="mx-5 w-3/4 -inset-3mt-2">
+              <a href="/">
+                <img className="h-10" src={logoSrc} alt="Logo" />
+              </a>
+            </div>
+          </div>
+          <div className="relative items-center text-center mx-auto -mt-5">
+            <img src={assistantAvatarSrc} className="w-24 h-24 border-white" />
+          </div>
+        </div>
+        <div className="mt-2 items-center text-center mx-auto">
+          <h2 className="text-xl font-extrabold text-gray-300">Maya</h2>
+          <h2 className="text-xl font-extrabold text-gray-300">{assistant}</h2>
+        </div>
+
+        <ul className="space-y-3 flex-1 mt-5 mb-10 pl-5"></ul>
+        <ul className="w-full">
+          <li className="w-full">
+            <a
+              href=""
+              className="text-gray-300 hover:text-white text-base flex items-center rounded-md"
+            ></a>
+          </li>
+        </ul>
+        <div className="w-[272px] -p-6 -m-6">
+          <img
+            src={sidebarImageSrc}
+            alt="Sidebar Image"
+            className="w-[272px]"
+          />
+        </div>
+      </nav>
+    </>
+  );
+}

apps/voz-del-cliente/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/voz-del-cliente/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/voz-del-cliente/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/voz-del-cliente/gui/store/messageStore.ts

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

apps/voz-del-cliente/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/voz-del-cliente/gui/vite-env.d.ts

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