forked from innovacion/Mayacontigo
ic
This commit is contained in:
Rogelio
184
apps/voz-del-cliente/gui/components/Chat.tsx
Normal file
184
apps/voz-del-cliente/gui/components/Chat.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
288
apps/voz-del-cliente/gui/components/ChatMessage.tsx
Normal file
288
apps/voz-del-cliente/gui/components/ChatMessage.tsx
Normal file
@@ -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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
55
apps/voz-del-cliente/gui/components/ChatSidebar.tsx
Normal file
55
apps/voz-del-cliente/gui/components/ChatSidebar.tsx
Normal file
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user