refactor(frontend): rename project to s2s-frontend

2026-10-06 17:00:57 -03:00
parent 99413fc06d
commit 6c4ee3a5e3
54 changed files with 26 additions and 26 deletions
@@ -0,0 +1,140 @@
+import { Download, MessageCircle, Wrench } from "lucide-react";
+import { memo, useEffect, useRef, useState } from "react";
+
+import { initials } from "../lib/context";
+import type { ConnectionStatus } from "../lib/contracts";
+import { displayTime, exportConversation, renderMarkdown, type Message } from "../lib/messages";
+import { LIVE_STATES } from "../realtime/controller";
+
+const MessageRow = memo(function MessageRow({ message, userName }: { message: Message; userName: string }) {
+  const [expanded, setExpanded] = useState(false);
+  const time = displayTime(message.timestamp);
+  if (message.role === "tool") {
+    return (
+      <div className="hist-msg tool">
+        <div className="hist-role">Llamada a herramienta</div>
+        <button
+          className="hist-tool-header"
+          type="button"
+          aria-expanded={expanded}
+          onClick={() => {
+            setExpanded(!expanded);
+          }}
+        >
+          <Wrench className="hist-tool-icon" />
+          <span className="hist-tool-name">{message.toolName}</span>
+        </button>
+        <div className={`hist-tool-body ${expanded ? "open" : ""}`}>
+          <div className="hist-tool-label">Entrada</div>
+          <pre className="hist-tool-block">{message.toolArguments}</pre>
+          <div className="hist-tool-label">Salida</div>
+          <pre className="hist-tool-block hist-tool-output">{message.text}</pre>
+        </div>
+      </div>
+    );
+  }
+  const data = {
+    "data-user-name": userName,
+    "data-user-initials": initials(userName),
+    "data-asst-name": "Vocero",
+    "data-timestamp": time,
+  };
+  return (
+    <div className={`hist-msg ${message.role} ${message.interrupted ? "interrupted" : ""}`} {...data}>
+      <div className="hist-role">{message.role === "user" ? userName : "Vocero"}</div>
+      {message.role === "assistant" ? (
+        <div
+          className={`hist-body markdown-content ${message.partial ? "partial" : ""}`}
+          {...data}
+          dangerouslySetInnerHTML={{ __html: renderMarkdown(message.text) }}
+        />
+      ) : (
+        <div className={`hist-body ${message.partial ? "partial" : ""}`} {...data}>
+          {message.text}
+        </div>
+      )}
+      {message.interrupted && <div className="hist-note">Interrumpido</div>}
+    </div>
+  );
+});
+export const Conversation = memo(function Conversation({
+  messages,
+  userName,
+  status,
+  white,
+}: {
+  messages: Message[];
+  userName: string;
+  status: ConnectionStatus;
+  white: boolean;
+}) {
+  const history = useRef<HTMLDivElement>(null);
+  const atBottom = useRef(true);
+  useEffect(() => {
+    const element = history.current;
+    if (element && atBottom.current) {
+      element.scrollTop = element.scrollHeight;
+    }
+  }, [messages]);
+  const live = LIVE_STATES.has(status);
+  const waiting = ["connecting", "queued", "your-turn"].includes(status);
+  return (
+    <section id="chat-panel" className="chat-panel chat-panel-inline" aria-label="Transcripción de la conversación">
+      <div className="chat-panel-inner">
+        <header className="chat-panel-header">
+          <h2>Conversación</h2>
+          <div className="chat-header-actions" role="group" aria-label="Acciones de la conversación">
+            {white && (
+              <span
+                className="chat-status-pill"
+                data-status={live ? "online" : status === "error" ? "error" : waiting ? "waiting" : "idle"}
+                role="status"
+              >
+                <span className="chat-status-dot" aria-hidden="true" />
+                <span>
+                  {live ? "En línea" : status === "error" ? "Sin conexión" : waiting ? "Conectando" : "Sin sesión"}
+                </span>
+              </span>
+            )}
+            <button
+              className="chat-export-btn icon-btn"
+              type="button"
+              aria-label="Descargar conversación"
+              title="Descargar conversación (JSON + TXT)"
+              disabled={!messages.length}
+              onClick={() => {
+                exportConversation(messages, userName);
+              }}
+            >
+              <Download size={18} />
+            </button>
+          </div>
+        </header>
+        <div
+          ref={history}
+          id="chat-history"
+          className="chat-history"
+          role="log"
+          aria-live="polite"
+          aria-atomic="false"
+          onScroll={() => {
+            const element = history.current;
+            if (element) {
+              atBottom.current = element.scrollHeight - element.scrollTop - element.clientHeight < 60;
+            }
+          }}
+        >
+          {messages.length ? (
+            messages.map((message) => <MessageRow key={message.id} message={message} userName={userName} />)
+          ) : (
+            <div className="chat-empty">
+              <MessageCircle aria-hidden="true" />
+              <span className="chat-empty-title">Aún no hay mensajes</span>
+              <span className="chat-empty-hint">Toca el círculo y empieza a hablar</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+});