feat: Built floating ChatWidget with streaming responses, citation link…
- "frontend/src/components/ChatWidget.tsx" - "frontend/src/components/ChatWidget.module.css" - "frontend/src/pages/CreatorDetail.tsx" GSD-Task: S03/T01
This commit is contained in:
jlightner
parent
19a6ff660c
commit
0098254fdd
4 changed files with 751 additions and 1 deletions
388
frontend/src/components/ChatWidget.module.css
Normal file
388
frontend/src/components/ChatWidget.module.css
Normal file
|
|
@ -0,0 +1,388 @@
|
|||
/* ChatWidget — floating chat bubble + expandable panel */
|
||||
|
||||
/* ── Bubble ───────────────────────────────────────────────── */
|
||||
|
||||
.bubble {
|
||||
position: fixed;
|
||||
bottom: 1.5rem;
|
||||
right: 1.5rem;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-accent);
|
||||
color: #0f0f14;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
box-shadow: 0 4px 16px var(--color-shadow-heavy);
|
||||
transition: transform 0.15s, background 0.15s;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.bubble:hover {
|
||||
background: var(--color-accent-hover);
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
/* ── Panel ────────────────────────────────────────────────── */
|
||||
|
||||
.panel {
|
||||
position: fixed;
|
||||
bottom: 1.5rem;
|
||||
right: 1.5rem;
|
||||
width: 400px;
|
||||
max-height: 60vh;
|
||||
background: var(--color-bg-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 8px 32px var(--color-shadow-heavy);
|
||||
z-index: 1001;
|
||||
animation: slideUp 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Header ───────────────────────────────────────────────── */
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.headerTitle {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.headerLabel {
|
||||
font-size: 0.6875rem;
|
||||
color: var(--color-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.closeBtn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.closeBtn:hover {
|
||||
color: var(--color-text-primary);
|
||||
background: var(--color-bg-surface-hover);
|
||||
}
|
||||
|
||||
/* ── Messages area ────────────────────────────────────────── */
|
||||
|
||||
.messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0.75rem 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.userMsg {
|
||||
align-self: flex-end;
|
||||
background: var(--color-accent);
|
||||
color: #0f0f14;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 12px 12px 4px 12px;
|
||||
font-size: 0.875rem;
|
||||
max-width: 85%;
|
||||
word-break: break-word;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.assistantMsg {
|
||||
align-self: flex-start;
|
||||
background: var(--color-bg-page);
|
||||
border: 1px solid var(--color-border);
|
||||
padding: 0.625rem 0.75rem;
|
||||
border-radius: 12px 12px 12px 4px;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-primary);
|
||||
max-width: 90%;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* ── Cursor ───────────────────────────────────────────────── */
|
||||
|
||||
.cursor {
|
||||
display: inline-block;
|
||||
width: 2px;
|
||||
height: 1em;
|
||||
background: var(--color-accent);
|
||||
margin-left: 2px;
|
||||
vertical-align: text-bottom;
|
||||
animation: blink 0.8s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* ── Typing indicator ─────────────────────────────────────── */
|
||||
|
||||
.typing {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0.75rem;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.typingDot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-text-secondary);
|
||||
animation: bounce 1.2s infinite;
|
||||
}
|
||||
|
||||
.typingDot:nth-child(2) {
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
|
||||
.typingDot:nth-child(3) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 60%, 100% { transform: translateY(0); }
|
||||
30% { transform: translateY(-4px); }
|
||||
}
|
||||
|
||||
/* ── Sources ──────────────────────────────────────────────── */
|
||||
|
||||
.sources {
|
||||
margin-top: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.sourcesLabel {
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
margin: 0 0 0.375rem;
|
||||
}
|
||||
|
||||
.sourceList {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.sourceItem {
|
||||
display: flex;
|
||||
gap: 0.375rem;
|
||||
align-items: baseline;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.sourceNum {
|
||||
flex-shrink: 0;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-accent);
|
||||
color: #0f0f14;
|
||||
border-radius: 3px;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sourceLink {
|
||||
color: var(--color-accent);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sourceLink:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ── Citation superscripts ────────────────────────────────── */
|
||||
|
||||
.citationGroup {
|
||||
font-size: 0.7em;
|
||||
vertical-align: super;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.citationLink {
|
||||
color: var(--color-accent);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.citationLink:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ── Error ────────────────────────────────────────────────── */
|
||||
|
||||
.errorMsg {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #f87171;
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 0.625rem;
|
||||
font-size: 0.8125rem;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
/* ── Suggestions ──────────────────────────────────────────── */
|
||||
|
||||
.suggestions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.suggestionsLabel {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.suggestionBtn {
|
||||
background: var(--color-bg-page);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 0.625rem;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 0.8125rem;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.suggestionBtn:hover {
|
||||
border-color: var(--color-accent);
|
||||
background: var(--color-bg-surface-hover);
|
||||
}
|
||||
|
||||
/* ── Input row ────────────────────────────────────────────── */
|
||||
|
||||
.inputRow {
|
||||
display: flex;
|
||||
gap: 0.375rem;
|
||||
padding: 0.625rem 0.75rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
padding: 0.5rem 0.625rem;
|
||||
background: var(--color-bg-input);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 0.8125rem;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 0 0 0 2px var(--color-accent-focus);
|
||||
}
|
||||
|
||||
.input::placeholder {
|
||||
color: var(--color-text-secondary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.sendBtn {
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: var(--color-accent);
|
||||
color: #0f0f14;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sendBtn:hover:not(:disabled) {
|
||||
background: var(--color-accent-hover);
|
||||
}
|
||||
|
||||
.sendBtn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ── Responsive (mobile) ──────────────────────────────────── */
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.bubble {
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.panel {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
max-height: 75vh;
|
||||
border-radius: 16px 16px 0 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
359
frontend/src/components/ChatWidget.tsx
Normal file
359
frontend/src/components/ChatWidget.tsx
Normal file
|
|
@ -0,0 +1,359 @@
|
|||
/**
|
||||
* ChatWidget — floating chat bubble + expandable conversation panel.
|
||||
*
|
||||
* Renders a fixed-position bubble (bottom-right). Clicking opens a slide-up
|
||||
* panel with message history, streaming responses, citation rendering,
|
||||
* suggested questions, and a typing indicator. Scoped to a specific creator.
|
||||
*/
|
||||
|
||||
import React, { useState, useRef, useCallback, useEffect, useMemo } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { streamChat, type ChatSource } from "../api/chat";
|
||||
import styles from "./ChatWidget.module.css";
|
||||
|
||||
// Same citation regex as ChatPage / utils/citations.tsx
|
||||
const CITATION_RE = /\[(\d+(?:,\s*\d+)*)\]/g;
|
||||
|
||||
interface Technique {
|
||||
title: string;
|
||||
slug: string;
|
||||
topic_category: string;
|
||||
}
|
||||
|
||||
interface ChatWidgetProps {
|
||||
creatorName: string;
|
||||
techniques: Technique[];
|
||||
}
|
||||
|
||||
interface Message {
|
||||
role: "user" | "assistant";
|
||||
text: string;
|
||||
sources: ChatSource[];
|
||||
done: boolean;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
/** Generate 3 suggested questions from the creator's techniques. */
|
||||
function buildSuggestions(creatorName: string, techniques: Technique[]): string[] {
|
||||
if (techniques.length === 0) {
|
||||
return [`What techniques does ${creatorName} use?`];
|
||||
}
|
||||
|
||||
const suggestions: string[] = [];
|
||||
|
||||
// First technique by name
|
||||
if (techniques[0]) {
|
||||
suggestions.push(`How does ${creatorName} approach ${techniques[0].title.toLowerCase()}?`);
|
||||
}
|
||||
|
||||
// Category-based question if there are multiple categories
|
||||
const categories = [...new Set(techniques.map((t) => t.topic_category).filter(Boolean))];
|
||||
if (categories.length > 1 && categories[0]) {
|
||||
suggestions.push(`What ${categories[0].toLowerCase()} techniques does ${creatorName} teach?`);
|
||||
} else if (techniques[1]) {
|
||||
suggestions.push(`Tell me about ${techniques[1].title.toLowerCase()}`);
|
||||
}
|
||||
|
||||
// General question
|
||||
suggestions.push(`What makes ${creatorName}'s production style unique?`);
|
||||
|
||||
return suggestions.slice(0, 3);
|
||||
}
|
||||
|
||||
/** Parse citation markers [N] into React nodes with superscript links. */
|
||||
function parseCitations(text: string, sources: ChatSource[]): React.ReactNode[] {
|
||||
const nodes: React.ReactNode[] = [];
|
||||
let lastIndex = 0;
|
||||
|
||||
for (const match of text.matchAll(CITATION_RE)) {
|
||||
const matchStart = match.index ?? 0;
|
||||
if (matchStart > lastIndex) {
|
||||
nodes.push(text.slice(lastIndex, matchStart));
|
||||
}
|
||||
|
||||
const rawGroup = match[1];
|
||||
if (!rawGroup) continue;
|
||||
const indices = rawGroup.split(",").map((s) => parseInt(s.trim(), 10));
|
||||
const links: React.ReactNode[] = [];
|
||||
|
||||
for (let i = 0; i < indices.length; i++) {
|
||||
const idx = indices[i]!;
|
||||
const source = sources[idx - 1];
|
||||
if (source) {
|
||||
if (i > 0) links.push(", ");
|
||||
const href = source.section_anchor
|
||||
? `/techniques/${source.slug}#${source.section_anchor}`
|
||||
: `/techniques/${source.slug}`;
|
||||
links.push(
|
||||
<Link
|
||||
key={`${matchStart}-${idx}`}
|
||||
to={href}
|
||||
className={styles.citationLink}
|
||||
title={`${source.title}${source.section_heading ? ` — ${source.section_heading}` : ""}`}
|
||||
>
|
||||
{idx}
|
||||
</Link>,
|
||||
);
|
||||
} else {
|
||||
if (i > 0) links.push(", ");
|
||||
links.push(String(idx));
|
||||
}
|
||||
}
|
||||
|
||||
nodes.push(
|
||||
<sup key={`cite-${matchStart}`} className={styles.citationGroup}>
|
||||
[{links}]
|
||||
</sup>,
|
||||
);
|
||||
lastIndex = matchStart + match[0].length;
|
||||
}
|
||||
|
||||
if (lastIndex < text.length) {
|
||||
nodes.push(text.slice(lastIndex));
|
||||
}
|
||||
|
||||
return nodes.length > 0 ? nodes : [text];
|
||||
}
|
||||
|
||||
export default function ChatWidget({ creatorName, techniques }: ChatWidgetProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [input, setInput] = useState("");
|
||||
const [streaming, setStreaming] = useState(false);
|
||||
|
||||
const abortRef = useRef<AbortController | null>(null);
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const suggestions = useMemo(
|
||||
() => buildSuggestions(creatorName, techniques),
|
||||
[creatorName, techniques],
|
||||
);
|
||||
|
||||
// Scroll to bottom when messages update
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}, [messages]);
|
||||
|
||||
// Focus input when panel opens
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
// Small delay to let animation settle
|
||||
const t = setTimeout(() => inputRef.current?.focus(), 100);
|
||||
return () => clearTimeout(t);
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
// Cleanup on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
abortRef.current?.abort();
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Escape key closes panel
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const handleKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") setOpen(false);
|
||||
};
|
||||
document.addEventListener("keydown", handleKey);
|
||||
return () => document.removeEventListener("keydown", handleKey);
|
||||
}, [open]);
|
||||
|
||||
const sendMessage = useCallback(
|
||||
(text: string) => {
|
||||
const q = text.trim();
|
||||
if (!q || streaming) return;
|
||||
|
||||
abortRef.current?.abort();
|
||||
|
||||
const userMsg: Message = { role: "user", text: q, sources: [], done: true };
|
||||
const assistantMsg: Message = { role: "assistant", text: "", sources: [], done: false };
|
||||
const newMessages = [...messages, userMsg, assistantMsg];
|
||||
setMessages(newMessages);
|
||||
setInput("");
|
||||
setStreaming(true);
|
||||
|
||||
const assistantIndex = newMessages.length - 1;
|
||||
|
||||
abortRef.current = streamChat(
|
||||
q,
|
||||
{
|
||||
onSources: (sources) => {
|
||||
setMessages((prev) =>
|
||||
prev.map((m, i) => (i === assistantIndex ? { ...m, sources } : m)),
|
||||
);
|
||||
},
|
||||
onToken: (token) => {
|
||||
setMessages((prev) =>
|
||||
prev.map((m, i) =>
|
||||
i === assistantIndex ? { ...m, text: m.text + token } : m,
|
||||
),
|
||||
);
|
||||
},
|
||||
onDone: () => {
|
||||
setMessages((prev) =>
|
||||
prev.map((m, i) => (i === assistantIndex ? { ...m, done: true } : m)),
|
||||
);
|
||||
setStreaming(false);
|
||||
},
|
||||
onError: (msg) => {
|
||||
setMessages((prev) =>
|
||||
prev.map((m, i) =>
|
||||
i === assistantIndex ? { ...m, done: true, error: msg } : m,
|
||||
),
|
||||
);
|
||||
setStreaming(false);
|
||||
},
|
||||
},
|
||||
creatorName,
|
||||
);
|
||||
},
|
||||
[messages, streaming, creatorName],
|
||||
);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
sendMessage(input);
|
||||
};
|
||||
|
||||
const handleSuggestion = (q: string) => {
|
||||
sendMessage(q);
|
||||
};
|
||||
|
||||
if (!open) {
|
||||
return (
|
||||
<button
|
||||
className={styles.bubble}
|
||||
onClick={() => setOpen(true)}
|
||||
aria-label={`Chat with ${creatorName}`}
|
||||
title={`Ask about ${creatorName}'s techniques`}
|
||||
>
|
||||
💬
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
const showSuggestions = messages.length === 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Keep bubble underneath for z-index stacking, hidden visually */}
|
||||
<div className={styles.panel}>
|
||||
{/* Header */}
|
||||
<div className={styles.header}>
|
||||
<div>
|
||||
<span className={styles.headerLabel}>Chat with</span>
|
||||
<h3 className={styles.headerTitle}>{creatorName}</h3>
|
||||
</div>
|
||||
<button
|
||||
className={styles.closeBtn}
|
||||
onClick={() => setOpen(false)}
|
||||
aria-label="Close chat"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Messages */}
|
||||
<div className={styles.messages}>
|
||||
{showSuggestions && (
|
||||
<div className={styles.suggestions}>
|
||||
<p className={styles.suggestionsLabel}>Suggested questions</p>
|
||||
{suggestions.map((q) => (
|
||||
<button
|
||||
key={q}
|
||||
className={styles.suggestionBtn}
|
||||
onClick={() => handleSuggestion(q)}
|
||||
>
|
||||
{q}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{messages.map((msg, i) => {
|
||||
if (msg.role === "user") {
|
||||
return (
|
||||
<div key={i} className={styles.userMsg}>
|
||||
{msg.text}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Assistant message
|
||||
return (
|
||||
<div key={i} className={styles.assistantMsg}>
|
||||
{msg.error ? (
|
||||
<div className={styles.errorMsg}>{msg.error}</div>
|
||||
) : (
|
||||
<>
|
||||
{parseCitations(msg.text, msg.sources)}
|
||||
{!msg.done && <span className={styles.cursor} />}
|
||||
{msg.done && msg.sources.length > 0 && (
|
||||
<div className={styles.sources}>
|
||||
<p className={styles.sourcesLabel}>Sources</p>
|
||||
<ol className={styles.sourceList}>
|
||||
{msg.sources.map((src) => {
|
||||
const href = src.section_anchor
|
||||
? `/techniques/${src.slug}#${src.section_anchor}`
|
||||
: `/techniques/${src.slug}`;
|
||||
return (
|
||||
<li key={src.number} className={styles.sourceItem}>
|
||||
<span className={styles.sourceNum}>{src.number}</span>
|
||||
<Link to={href} className={styles.sourceLink}>
|
||||
{src.title}
|
||||
{src.section_heading ? ` — ${src.section_heading}` : ""}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Typing indicator during loading before first token */}
|
||||
{streaming &&
|
||||
messages.length > 0 &&
|
||||
messages[messages.length - 1]?.role === "assistant" &&
|
||||
messages[messages.length - 1]?.text === "" &&
|
||||
!messages[messages.length - 1]?.error && (
|
||||
<div className={styles.typing}>
|
||||
<span className={styles.typingDot} />
|
||||
<span className={styles.typingDot} />
|
||||
<span className={styles.typingDot} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
{/* Input */}
|
||||
<form className={styles.inputRow} onSubmit={handleSubmit}>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
className={styles.input}
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="Ask a question…"
|
||||
disabled={streaming}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className={styles.sendBtn}
|
||||
disabled={!input.trim() || streaming}
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -18,6 +18,7 @@ import {
|
|||
import { useAuth } from "../context/AuthContext";
|
||||
import CreatorAvatar from "../components/CreatorAvatar";
|
||||
import { SocialIcon } from "../components/SocialIcons";
|
||||
import ChatWidget from "../components/ChatWidget";
|
||||
import SortDropdown from "../components/SortDropdown";
|
||||
import TagList from "../components/TagList";
|
||||
import { catSlug } from "../utils/catSlug";
|
||||
|
|
@ -478,6 +479,8 @@ export default function CreatorDetail() {
|
|||
</>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<ChatWidget creatorName={creator.name} techniques={creator.techniques} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/admin-pipeline.ts","./src/api/admin-techniques.ts","./src/api/auth.ts","./src/api/chat.ts","./src/api/client.ts","./src/api/consent.ts","./src/api/creator-dashboard.ts","./src/api/creators.ts","./src/api/follows.ts","./src/api/highlights.ts","./src/api/index.ts","./src/api/reports.ts","./src/api/search.ts","./src/api/stats.ts","./src/api/techniques.ts","./src/api/topics.ts","./src/api/videos.ts","./src/components/AdminDropdown.tsx","./src/components/AppFooter.tsx","./src/components/AudioWaveform.tsx","./src/components/CategoryIcons.tsx","./src/components/ChapterMarkers.tsx","./src/components/ConfirmModal.tsx","./src/components/CopyLinkButton.tsx","./src/components/CreatorAvatar.tsx","./src/components/ImpersonationBanner.tsx","./src/components/PlayerControls.tsx","./src/components/ProtectedRoute.tsx","./src/components/ReportIssueModal.tsx","./src/components/SearchAutocomplete.tsx","./src/components/SocialIcons.tsx","./src/components/SortDropdown.tsx","./src/components/TableOfContents.tsx","./src/components/TagList.tsx","./src/components/ToggleSwitch.tsx","./src/components/TranscriptSidebar.tsx","./src/components/VideoPlayer.tsx","./src/context/AuthContext.tsx","./src/hooks/useCountUp.ts","./src/hooks/useDocumentTitle.ts","./src/hooks/useMediaSync.ts","./src/hooks/useSortPreference.ts","./src/pages/About.tsx","./src/pages/AdminAuditLog.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.tsx","./src/pages/AdminTechniquePages.tsx","./src/pages/AdminUsers.tsx","./src/pages/ChapterReview.tsx","./src/pages/ChatPage.tsx","./src/pages/ConsentDashboard.tsx","./src/pages/CreatorDashboard.tsx","./src/pages/CreatorDetail.tsx","./src/pages/CreatorSettings.tsx","./src/pages/CreatorTiers.tsx","./src/pages/CreatorsBrowse.tsx","./src/pages/HighlightQueue.tsx","./src/pages/Home.tsx","./src/pages/Login.tsx","./src/pages/Register.tsx","./src/pages/SearchResults.tsx","./src/pages/SubTopicPage.tsx","./src/pages/TechniquePage.tsx","./src/pages/TopicsBrowse.tsx","./src/pages/WatchPage.tsx","./src/utils/catSlug.ts","./src/utils/citations.tsx"],"version":"5.6.3"}
|
||||
{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/admin-pipeline.ts","./src/api/admin-techniques.ts","./src/api/auth.ts","./src/api/chat.ts","./src/api/client.ts","./src/api/consent.ts","./src/api/creator-dashboard.ts","./src/api/creators.ts","./src/api/follows.ts","./src/api/highlights.ts","./src/api/index.ts","./src/api/reports.ts","./src/api/search.ts","./src/api/stats.ts","./src/api/techniques.ts","./src/api/topics.ts","./src/api/videos.ts","./src/components/AdminDropdown.tsx","./src/components/AppFooter.tsx","./src/components/AudioWaveform.tsx","./src/components/CategoryIcons.tsx","./src/components/ChapterMarkers.tsx","./src/components/ChatWidget.tsx","./src/components/ConfirmModal.tsx","./src/components/CopyLinkButton.tsx","./src/components/CreatorAvatar.tsx","./src/components/ImpersonationBanner.tsx","./src/components/PlayerControls.tsx","./src/components/ProtectedRoute.tsx","./src/components/ReportIssueModal.tsx","./src/components/SearchAutocomplete.tsx","./src/components/SocialIcons.tsx","./src/components/SortDropdown.tsx","./src/components/TableOfContents.tsx","./src/components/TagList.tsx","./src/components/ToggleSwitch.tsx","./src/components/TranscriptSidebar.tsx","./src/components/VideoPlayer.tsx","./src/context/AuthContext.tsx","./src/hooks/useCountUp.ts","./src/hooks/useDocumentTitle.ts","./src/hooks/useMediaSync.ts","./src/hooks/useSortPreference.ts","./src/pages/About.tsx","./src/pages/AdminAuditLog.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.tsx","./src/pages/AdminTechniquePages.tsx","./src/pages/AdminUsers.tsx","./src/pages/ChapterReview.tsx","./src/pages/ChatPage.tsx","./src/pages/ConsentDashboard.tsx","./src/pages/CreatorDashboard.tsx","./src/pages/CreatorDetail.tsx","./src/pages/CreatorSettings.tsx","./src/pages/CreatorTiers.tsx","./src/pages/CreatorsBrowse.tsx","./src/pages/HighlightQueue.tsx","./src/pages/Home.tsx","./src/pages/Login.tsx","./src/pages/Register.tsx","./src/pages/SearchResults.tsx","./src/pages/SubTopicPage.tsx","./src/pages/TechniquePage.tsx","./src/pages/TopicsBrowse.tsx","./src/pages/WatchPage.tsx","./src/utils/catSlug.ts","./src/utils/citations.tsx"],"version":"5.6.3"}
|
||||
Loading…
Add table
Reference in a new issue