fixed page state while generating a message
This commit is contained in:
+48
-34
@@ -3,12 +3,11 @@
|
||||
======================================== */
|
||||
|
||||
import { useState, useRef, useCallback, useEffect } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { useMatch, useNavigate } from "react-router-dom";
|
||||
import Sidebar from "./components/sidebar/Sidebar";
|
||||
import TopNav from "./components/top-nav/TopNav";
|
||||
import ChatHistory from "./components/chat-history/ChatHistory";
|
||||
import ChatInput from "./components/chat-input/ChatInput";
|
||||
import SelectorFlow from "./components/selector-flow/SelectorFlow";
|
||||
import { useAuth } from "./lib/auth/SupabaseAuth";
|
||||
import SignInModal from "./lib/auth/SignIn";
|
||||
import { resetAppState } from "./appState";
|
||||
@@ -94,9 +93,10 @@ const chapterData = {
|
||||
};
|
||||
|
||||
function App() {
|
||||
const { isAuthenticated, user, signIn, signUp, signOut, getToken } = useAuth();
|
||||
const { isAuthenticated, user, signIn, signUp, signOut, getToken } =
|
||||
useAuth();
|
||||
const navigate = useNavigate();
|
||||
const { chatId: routeChatId } = useParams();
|
||||
const routeChatId = useMatch("/chat/:chatId")?.params.chatId ?? null;
|
||||
// Guards deep-link loading so it only fires once per route/authenticated change.
|
||||
const chatLoadHandledRef = useRef(null);
|
||||
const [messages, setMessages] = useState([]);
|
||||
@@ -166,7 +166,7 @@ function App() {
|
||||
chatLoadHandledRef.current = null;
|
||||
navigate("/");
|
||||
}
|
||||
}, [isAuthenticated, navigate, routeChatId]);
|
||||
}, [isAuthenticated, navigate]);
|
||||
|
||||
// Deep link: landing on /chat/:chatId loads that conversation (signed-in
|
||||
// users only — anonymous trials are in-memory, so a refreshed trial URL
|
||||
@@ -178,8 +178,6 @@ function App() {
|
||||
handleChatSelect(routeChatId);
|
||||
}, [routeChatId, isAuthenticated]);
|
||||
|
||||
|
||||
|
||||
// ─── Auth handlers ───
|
||||
const handleAuthError = (msg) => {
|
||||
setMessages((prev) => [
|
||||
@@ -196,7 +194,10 @@ function App() {
|
||||
const headers = {};
|
||||
if (token) headers["Authorization"] = `Bearer ${token}`;
|
||||
|
||||
const res = await fetch(`${API_BASE}/api/sessions`, { headers, credentials: "include" });
|
||||
const res = await fetch(`${API_BASE}/api/sessions`, {
|
||||
headers,
|
||||
credentials: "include",
|
||||
});
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setSessions(data);
|
||||
@@ -250,7 +251,10 @@ function App() {
|
||||
const headers = {};
|
||||
if (token) headers["Authorization"] = `Bearer ${token}`;
|
||||
|
||||
const res = await fetch(`${API_BASE}/api/chat/${sessionId}`, { headers, credentials: "include" });
|
||||
const res = await fetch(`${API_BASE}/api/chat/${sessionId}`, {
|
||||
headers,
|
||||
credentials: "include",
|
||||
});
|
||||
if (!res.ok) {
|
||||
throw new Error("Session not found");
|
||||
}
|
||||
@@ -338,9 +342,9 @@ function App() {
|
||||
const body = {
|
||||
text: text.trim(),
|
||||
chatId: fetchChatId,
|
||||
grade: activeGrade !== DEFAULTS.grade ? activeGrade : undefined,
|
||||
subject: activeSubject !== DEFAULTS.subject ? activeSubject : undefined,
|
||||
chapter: activeChapter !== DEFAULTS.chapter ? activeChapter : undefined,
|
||||
grade: activeGrade === DEFAULTS.grade ? undefined : activeGrade,
|
||||
subject: activeSubject === DEFAULTS.subject ? undefined : activeSubject,
|
||||
chapter: activeChapter === DEFAULTS.chapter ? undefined : activeChapter,
|
||||
};
|
||||
|
||||
// Open SSE connection
|
||||
@@ -406,17 +410,19 @@ function App() {
|
||||
try {
|
||||
const data = JSON.parse(jsonStr);
|
||||
if (data.type === "session") {
|
||||
// Remember which session this conversation belongs to so
|
||||
// follow-up messages reuse it (history stays together).
|
||||
// For anonymous users this is the in-memory trial id.
|
||||
setActiveChat(data.id);
|
||||
// Only reflect signed-in sessions in the URL. An anonymous
|
||||
// trial id is a capability (no server ownership check), so
|
||||
// baking it into the URL would leak it via history/logs/
|
||||
// referer — keep it in in-memory state and the POST body only.
|
||||
|
||||
if (isAuthenticated) {
|
||||
navigate(`/chat/${data.id}`, { replace: true });
|
||||
// Persist the deep-link without dispatching a router
|
||||
// navigation. React Router navigation rerenders the route
|
||||
// tree during the active stream; history.replaceState only
|
||||
// updates the address bar, so chat state remains untouched.
|
||||
chatLoadHandledRef.current = data.id;
|
||||
window.history.replaceState(
|
||||
window.history.state,
|
||||
"",
|
||||
`/chat/${encodeURIComponent(data.id)}`,
|
||||
);
|
||||
}
|
||||
} else if (data.type === "limit") {
|
||||
// Anonymous free-message budget remaining (server truth).
|
||||
@@ -425,19 +431,15 @@ function App() {
|
||||
assistantText += data.content;
|
||||
setMessages((prev) =>
|
||||
prev.map((m) =>
|
||||
m.id === assistantId
|
||||
? { ...m, text: assistantText }
|
||||
: m
|
||||
)
|
||||
m.id === assistantId ? { ...m, text: assistantText } : m,
|
||||
),
|
||||
);
|
||||
} else if (data.type === "done") {
|
||||
// Mark as non-streaming
|
||||
setMessages((prev) =>
|
||||
prev.map((m) =>
|
||||
m.id === assistantId
|
||||
? { ...m, streaming: false }
|
||||
: m
|
||||
)
|
||||
m.id === assistantId ? { ...m, streaming: false } : m,
|
||||
),
|
||||
);
|
||||
} else if (data.type === "error") {
|
||||
setMessages((prev) =>
|
||||
@@ -448,8 +450,8 @@ function App() {
|
||||
text: `⚠️ Error: ${data.message}`,
|
||||
streaming: false,
|
||||
}
|
||||
: m
|
||||
)
|
||||
: m,
|
||||
),
|
||||
);
|
||||
}
|
||||
} catch {
|
||||
@@ -461,7 +463,8 @@ function App() {
|
||||
setIsTyping(false);
|
||||
abortRef.current = null;
|
||||
|
||||
// Refresh sessions to update timestamps (signed-in users only)
|
||||
// Refresh the sidebar without changing routes. The active session id
|
||||
// already lives in state and is reused by the next message.
|
||||
if (isAuthenticated) loadSessions();
|
||||
})
|
||||
.catch((err) => {
|
||||
@@ -478,14 +481,23 @@ function App() {
|
||||
abortRef.current = null;
|
||||
});
|
||||
},
|
||||
[isTyping, activeChat, activeGrade, activeSubject, activeChapter, isAnonymous, anonRemaining, isAuthenticated]
|
||||
[
|
||||
isTyping,
|
||||
activeChat,
|
||||
activeGrade,
|
||||
activeSubject,
|
||||
activeChapter,
|
||||
isAnonymous,
|
||||
anonRemaining,
|
||||
isAuthenticated,
|
||||
],
|
||||
);
|
||||
|
||||
const handlePromptClick = useCallback(
|
||||
(promptText) => {
|
||||
handleSend(promptText);
|
||||
},
|
||||
[handleSend]
|
||||
[handleSend],
|
||||
);
|
||||
|
||||
/* ─── Selector step handlers ─── */
|
||||
@@ -619,7 +631,9 @@ function App() {
|
||||
onPromptClick={handlePromptClick}
|
||||
isTyping={isTyping}
|
||||
selectorStep={selectorStep}
|
||||
selectorData={selectorStep !== "chat" ? selectorData[selectorStep] : null}
|
||||
selectorData={
|
||||
selectorStep === "chat" ? null : selectorData[selectorStep]
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,167 +2,256 @@
|
||||
ChatHistory Component — padhle (Refined Workspace)
|
||||
======================================== */
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import Message from "../message/Message";
|
||||
import SelectorFlow from "../selector-flow/SelectorFlow";
|
||||
import "./ChatHistory.css";
|
||||
|
||||
const ChatHistory = ({
|
||||
messages,
|
||||
activeSubject,
|
||||
activeGrade,
|
||||
activeChapter,
|
||||
onPromptClick,
|
||||
isTyping,
|
||||
selectorStep,
|
||||
selectorData,
|
||||
messages,
|
||||
activeSubject,
|
||||
activeGrade,
|
||||
activeChapter,
|
||||
onPromptClick,
|
||||
isTyping,
|
||||
selectorStep,
|
||||
selectorData,
|
||||
}) => {
|
||||
const hasMessages = messages.length > 0;
|
||||
const isSelector = selectorStep !== "chat";
|
||||
const hasMessages = messages.length > 0;
|
||||
const isSelector = selectorStep !== "chat";
|
||||
|
||||
const suggestions = [
|
||||
{
|
||||
id: 1,
|
||||
icon: "eco",
|
||||
iconFilled: true,
|
||||
color: "--color-accent-green",
|
||||
colorBg: "--color-accent-green-bg",
|
||||
keywords: ["photosynthesis"],
|
||||
text: "Explain how ",
|
||||
textEnd: " works in simple terms",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "calculate",
|
||||
iconFilled: false,
|
||||
color: "--color-accent-blue",
|
||||
colorBg: "--color-accent-blue-bg",
|
||||
keywords: ["derivatives"],
|
||||
text: "Help me understand ",
|
||||
textEnd: " in calculus",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "account_balance",
|
||||
iconFilled: false,
|
||||
color: "--color-accent-orange",
|
||||
colorBg: "--color-accent-orange-bg",
|
||||
keywords: ["Industrial"],
|
||||
text: "What caused the ",
|
||||
textEnd: " Revolution?",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "edit",
|
||||
iconFilled: true,
|
||||
color: "--color-accent-purple",
|
||||
colorBg: "--color-accent-purple-bg",
|
||||
keywords: ["Romeo and Juliet"],
|
||||
text: "Help me analyze themes in ",
|
||||
textEnd: "",
|
||||
},
|
||||
];
|
||||
const suggestions = [
|
||||
{
|
||||
id: 1,
|
||||
icon: "eco",
|
||||
iconFilled: true,
|
||||
color: "--color-accent-green",
|
||||
colorBg: "--color-accent-green-bg",
|
||||
keywords: ["photosynthesis"],
|
||||
text: "Explain how ",
|
||||
textEnd: " works in simple terms",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "calculate",
|
||||
iconFilled: false,
|
||||
color: "--color-accent-blue",
|
||||
colorBg: "--color-accent-blue-bg",
|
||||
keywords: ["derivatives"],
|
||||
text: "Help me understand ",
|
||||
textEnd: " in calculus",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "account_balance",
|
||||
iconFilled: false,
|
||||
color: "--color-accent-orange",
|
||||
colorBg: "--color-accent-orange-bg",
|
||||
keywords: ["Industrial"],
|
||||
text: "What caused the ",
|
||||
textEnd: " Revolution?",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "edit",
|
||||
iconFilled: true,
|
||||
color: "--color-accent-purple",
|
||||
colorBg: "--color-accent-purple-bg",
|
||||
keywords: ["Romeo and Juliet"],
|
||||
text: "Help me analyze themes in ",
|
||||
textEnd: "",
|
||||
},
|
||||
];
|
||||
|
||||
const fullPromptTexts = suggestions.map((s) => s.text + s.keywords.join(" ") + s.textEnd);
|
||||
const fullPromptTexts = suggestions.map(
|
||||
(s) => s.text + s.keywords.join(" ") + s.textEnd,
|
||||
);
|
||||
|
||||
const streamingMsg = messages.find((m) => m.streaming);
|
||||
const streamingMsg = messages.find((m) => m.streaming);
|
||||
const historyRef = useRef(null);
|
||||
|
||||
/* ─── Messages mode ─── */
|
||||
if (hasMessages) {
|
||||
return (
|
||||
<div className="chat-history">
|
||||
<div className="chat-history__list">
|
||||
{messages.map((message) => (
|
||||
<Message key={message.id} message={message} />
|
||||
))}
|
||||
{isTyping && !streamingMsg && (
|
||||
<Message message={{ id: "typing", role: "assistant", text: "", streaming: true }} />
|
||||
)}
|
||||
<div ref={(el) => el && el.scrollIntoView({ behavior: "smooth", block: "end" })} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// Scroll only the chat pane, and only when a message is added. Streaming
|
||||
// token updates must not move the page or restart a smooth-scroll animation.
|
||||
useEffect(() => {
|
||||
const history = historyRef.current;
|
||||
if (history) history.scrollTop = history.scrollHeight;
|
||||
}, [messages.length]);
|
||||
|
||||
/* ─── Selector mode (grade → subject → chapter) ─── */
|
||||
if (isSelector && selectorData) {
|
||||
return (
|
||||
<div className="chat-history">
|
||||
<SelectorFlow
|
||||
title={selectorData.title}
|
||||
subtitle={selectorData.subtitle}
|
||||
selected={selectorData.selected}
|
||||
items={selectorData.items}
|
||||
onSelect={selectorData.onSelect}
|
||||
step={selectorStep}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
/* ─── Messages mode ─── */
|
||||
if (hasMessages) {
|
||||
return (
|
||||
<div className="chat-history" ref={historyRef}>
|
||||
<div className="chat-history__list">
|
||||
{messages.map((message) => (
|
||||
<Message
|
||||
key={message.id}
|
||||
message={message}
|
||||
/>
|
||||
))}
|
||||
{isTyping && !streamingMsg && (
|
||||
<Message
|
||||
message={{
|
||||
id: "typing",
|
||||
role: "assistant",
|
||||
text: "",
|
||||
streaming: true,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─── Welcome / suggestions mode ─── */
|
||||
return (
|
||||
<div className="chat-history">
|
||||
<div className="chat-history__focus">
|
||||
{/* Welcome Header */}
|
||||
<div className="chat-history__welcome">
|
||||
<div className="chat-history__welcome-icon">
|
||||
<span className="material-symbols-outlined" style={{ fontWeight: 200 }}>menu_book</span>
|
||||
<span className="material-symbols-outlined chat-history__welcome-sparkle">auto_awesome</span>
|
||||
</div>
|
||||
<h2 className="chat-history__welcome-title">Welcome to padhle</h2>
|
||||
<p className="chat-history__welcome-subtitle">Your AI tutor for grades 6–12. Ask anything!</p>
|
||||
</div>
|
||||
/* ─── Selector mode (grade → subject → chapter) ─── */
|
||||
if (isSelector && selectorData) {
|
||||
return (
|
||||
<div className="chat-history">
|
||||
<SelectorFlow
|
||||
title={selectorData.title}
|
||||
subtitle={selectorData.subtitle}
|
||||
selected={selectorData.selected}
|
||||
items={selectorData.items}
|
||||
onSelect={selectorData.onSelect}
|
||||
step={selectorStep}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
{/* Bento Grid Suggestions */}
|
||||
<div className="chat-history__bento">
|
||||
{suggestions.map((suggestion) => {
|
||||
const colorVar = suggestion.color.replace("--", "var(");
|
||||
const bgColorVar = suggestion.colorBg.replace("--", "var(");
|
||||
/* ─── Welcome / suggestions mode ─── */
|
||||
return (
|
||||
<div className="chat-history">
|
||||
<div className="chat-history__focus">
|
||||
{/* Welcome Header */}
|
||||
<div className="chat-history__welcome">
|
||||
<div className="chat-history__welcome-icon">
|
||||
<span
|
||||
className="material-symbols-outlined"
|
||||
style={{
|
||||
fontWeight: 200,
|
||||
}}
|
||||
>
|
||||
menu_book
|
||||
</span>
|
||||
<span className="material-symbols-outlined chat-history__welcome-sparkle">
|
||||
auto_awesome
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="chat-history__welcome-title">
|
||||
Welcome to padhle
|
||||
</h2>
|
||||
<p className="chat-history__welcome-subtitle">
|
||||
Your AI tutor for grades 6–12.
|
||||
Ask anything!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<button
|
||||
key={suggestion.id}
|
||||
className="chat-history__bento-card"
|
||||
onClick={() => {
|
||||
const text = fullPromptTexts[suggestion.id - 1];
|
||||
onPromptClick(text);
|
||||
}}
|
||||
>
|
||||
<div className="chat-history__bento-icon-wrap" style={{ backgroundColor: `var(${bgColorVar})` }}>
|
||||
<span className="material-symbols-outlined" style={{ color: `var(${colorVar})`, fontWeight: suggestion.iconFilled ? 700 : 200 }}>
|
||||
{suggestion.icon}
|
||||
</span>
|
||||
{/* Bento Grid Suggestions */}
|
||||
<div className="chat-history__bento">
|
||||
{suggestions.map((suggestion) => {
|
||||
const colorVar =
|
||||
suggestion.color.replace(
|
||||
"--",
|
||||
"var(",
|
||||
);
|
||||
const bgColorVar =
|
||||
suggestion.colorBg.replace(
|
||||
"--",
|
||||
"var(",
|
||||
);
|
||||
|
||||
return (
|
||||
<button
|
||||
key={
|
||||
suggestion.id
|
||||
}
|
||||
className="chat-history__bento-card"
|
||||
onClick={() => {
|
||||
const text =
|
||||
fullPromptTexts[
|
||||
suggestion.id -
|
||||
1
|
||||
];
|
||||
onPromptClick(
|
||||
text,
|
||||
);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="chat-history__bento-icon-wrap"
|
||||
style={{
|
||||
backgroundColor: `var(${bgColorVar})`,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="material-symbols-outlined"
|
||||
style={{
|
||||
color: `var(${colorVar})`,
|
||||
fontWeight: suggestion.iconFilled
|
||||
? 700
|
||||
: 200,
|
||||
}}
|
||||
>
|
||||
{
|
||||
suggestion.icon
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
<div className="chat-history__bento-text">
|
||||
<span className="chat-history__bento-text-main">
|
||||
{
|
||||
suggestion.text
|
||||
}
|
||||
</span>
|
||||
<span
|
||||
className="chat-history__bento-text-highlight"
|
||||
style={{
|
||||
color: `var(${colorVar})`,
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{
|
||||
suggestion
|
||||
.keywords[0]
|
||||
}
|
||||
</span>
|
||||
{
|
||||
suggestion.textEnd
|
||||
}
|
||||
</div>
|
||||
<span className="material-symbols-outlined chat-history__bento-arrow">
|
||||
arrow_forward
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Info Panel */}
|
||||
<div className="chat-history__info">
|
||||
<div className="chat-history__info-icon-wrap">
|
||||
<span className="material-symbols-outlined">
|
||||
lightbulb
|
||||
</span>
|
||||
</div>
|
||||
<div className="chat-history__info-content">
|
||||
<h4 className="chat-history__info-title">
|
||||
Focused on your learning
|
||||
</h4>
|
||||
<p className="chat-history__info-text">
|
||||
I'll answer questions
|
||||
related to your selected
|
||||
subject and chapter
|
||||
<br />
|
||||
using your textbook
|
||||
content.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="chat-history__bento-text">
|
||||
<span className="chat-history__bento-text-main">{suggestion.text}</span>
|
||||
<span className="chat-history__bento-text-highlight" style={{ color: `var(${colorVar})`, fontWeight: 600 }}>
|
||||
{suggestion.keywords[0]}
|
||||
</span>
|
||||
{suggestion.textEnd}
|
||||
</div>
|
||||
<span className="material-symbols-outlined chat-history__bento-arrow">arrow_forward</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Info Panel */}
|
||||
<div className="chat-history__info">
|
||||
<div className="chat-history__info-icon-wrap">
|
||||
<span className="material-symbols-outlined">lightbulb</span>
|
||||
</div>
|
||||
<div className="chat-history__info-content">
|
||||
<h4 className="chat-history__info-title">Focused on your learning</h4>
|
||||
<p className="chat-history__info-text">
|
||||
I'll answer questions related to your selected subject and chapter
|
||||
<br />
|
||||
using your textbook content.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatHistory;
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
Message Component — padhle (Refined Workspace)
|
||||
======================================== */
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import remarkMath from "remark-math";
|
||||
import rehypeKatex from "rehype-katex";
|
||||
@@ -12,61 +11,76 @@ import "./Message.css";
|
||||
const Message = ({ message }) => {
|
||||
const { role, text, streaming } = message;
|
||||
const isUser = role === "user";
|
||||
const endRef = useRef(null);
|
||||
|
||||
// Auto-scroll to bottom when text updates
|
||||
useEffect(() => {
|
||||
if (endRef.current) {
|
||||
endRef.current.scrollIntoView({ behavior: "smooth", block: "end" });
|
||||
}
|
||||
}, [text, streaming]);
|
||||
|
||||
return (
|
||||
<div className={`message ${isUser ? "message--user" : "message--assistant"}`}>
|
||||
<div
|
||||
className={`message ${isUser ? "message--user" : "message--assistant"}`}
|
||||
>
|
||||
{!isUser && (
|
||||
<div className="message__avatar">
|
||||
<div className="message__avatar-icon">
|
||||
<span className="material-symbols-outlined" style={{ fontWeight: 700 }}>school</span>
|
||||
<span
|
||||
className="material-symbols-outlined"
|
||||
style={{ fontWeight: 700 }}
|
||||
>
|
||||
school
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="message__bubble">
|
||||
<div className={`message__text ${!isUser ? "markdown-body" : ""}`}>
|
||||
{isUser ? (
|
||||
text
|
||||
) : (
|
||||
text && (
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkMath]}
|
||||
rehypePlugins={[rehypeKatex]}
|
||||
>
|
||||
{text}
|
||||
</ReactMarkdown>
|
||||
)
|
||||
<div className={`message__text ${isUser ? "" : "markdown-body"}`}>
|
||||
{isUser
|
||||
? text
|
||||
: text && (
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkMath]}
|
||||
rehypePlugins={[rehypeKatex]}
|
||||
>
|
||||
{text}
|
||||
</ReactMarkdown>
|
||||
)}
|
||||
{streaming && (
|
||||
<span className="message__typing-dots">
|
||||
<span className="message__typing-dot"></span>
|
||||
<span className="message__typing-dot"></span>
|
||||
<span className="message__typing-dot"></span>
|
||||
</span>
|
||||
)}
|
||||
{streaming && <span className="message__typing-dots">
|
||||
<span className="message__typing-dot"></span>
|
||||
<span className="message__typing-dot"></span>
|
||||
<span className="message__typing-dot"></span>
|
||||
</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action buttons for assistant messages */}
|
||||
{!isUser && text && (
|
||||
<div className="message__actions">
|
||||
<button className="message__action" aria-label="Helpful" title="Helpful">
|
||||
<button
|
||||
className="message__action"
|
||||
aria-label="Helpful"
|
||||
title="Helpful"
|
||||
>
|
||||
<span className="material-symbols-outlined">thumb_up</span>
|
||||
</button>
|
||||
<button className="message__action" aria-label="Save note" title="Save Note">
|
||||
<button
|
||||
className="message__action"
|
||||
aria-label="Save note"
|
||||
title="Save Note"
|
||||
>
|
||||
<span className="material-symbols-outlined">bookmark_border</span>
|
||||
</button>
|
||||
<button className="message__action message__action--primary" aria-label="Explain deeper" title="Explain Deeper">
|
||||
<span className="material-symbols-outlined" style={{ fontWeight: 700 }}>menu_book</span>
|
||||
<button
|
||||
className="message__action message__action--primary"
|
||||
aria-label="Explain deeper"
|
||||
title="Explain Deeper"
|
||||
>
|
||||
<span
|
||||
className="material-symbols-outlined"
|
||||
style={{ fontWeight: 700 }}
|
||||
>
|
||||
menu_book
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div ref={endRef} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -14,14 +14,10 @@ ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
<AuthProvider>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
{/* Both paths render the same App shell; the chat id is read via
|
||||
useParams() to support deep links like /chat/:chatId. A catch-all
|
||||
keeps unknown paths on the app (Vite SPA fallback serves index.html). */}
|
||||
<Route path="/" element={<App />} />
|
||||
<Route path="/chat/:chatId" element={<App />} />
|
||||
{/* One route owns the app shell so URL changes never remount it. */}
|
||||
<Route path="*" element={<App />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</AuthProvider>
|
||||
</React.StrictMode>
|
||||
</React.StrictMode>,
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user