- {/* Top bar */}
-
+
+ );
+}
+
export function ChatPanel({
messages,
isLoading,
error,
input,
hasSelection,
+ models,
+ selectedModel,
+ onModelChange,
onSend,
onQuickAction,
onSetInput,
onStop,
onNewChat,
+ onClose,
}: ChatPanelProps) {
const scrollRef = useRef(null);
@@ -70,16 +118,51 @@ export function ChatPanel({
}
};
+ const estimatedTokens = messages.reduce((sum, msg) => {
+ const text = msg.parts
+ ?.filter((p) => p.type === "text")
+ .map((p) => (p as { type: "text"; text: string }).text)
+ .join("") ?? "";
+ return sum + Math.ceil(text.length / 4);
+ }, 0);
+
+ const selectedModelInfo = models.find((m) => m.id === selectedModel);
+ const contextLimit = selectedModelInfo
+ ? parseFloat(selectedModelInfo.context) * 1000
+ : 200_000;
+ const usageRatio = Math.min(estimatedTokens / contextLimit, 1);
+
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {user.avatarUrl && 
}
- {user.name}
-
-
+
+ setSettingsOpen(true)}
+ onOpenPublish={openPublishDialog}
+ onOpenMobileToc={() => setTocSidebarOpen(true)}
+ />
+
+ {!isEditorReady && (
+
+
@@ -350,53 +647,36 @@ export default function App() {
settingsMap={settingsMap}
/>
- {/* Publish dialog (native
);
}
diff --git a/frontend/src/components/ChatPanel.tsx b/frontend/src/components/ChatPanel.tsx
index 46ea627b5fd5d4332fd1b6c198004e35c0ebe7dd..ae18ca511d062098d87dfecdf3df57ad8e4c59ce 100644
--- a/frontend/src/components/ChatPanel.tsx
+++ b/frontend/src/components/ChatPanel.tsx
@@ -1,17 +1,29 @@
import { useState, useRef, useEffect, type KeyboardEvent } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
import { Tooltip } from "./Tooltip";
import {
Send,
Square,
Plus,
+ X,
Sparkles,
AlignLeft,
Expand,
SpellCheck,
Languages,
Shrink,
+ Loader,
} from "lucide-react";
import type { UIMessage } from "ai";
+import { isToolPart, normalizeToolPart } from "../utils/ai-tool-parts";
+
+export interface ModelOption {
+ id: string;
+ label: string;
+ context: string;
+ cost: string;
+}
interface ChatPanelProps {
messages: UIMessage[];
@@ -19,11 +31,15 @@ interface ChatPanelProps {
error: Error | undefined;
input: string;
hasSelection: boolean;
+ models: ModelOption[];
+ selectedModel: string;
+ onModelChange: (modelId: string) => void;
onSend: (content: string) => void;
onQuickAction: (action: string) => void;
onSetInput: (value: string) => void;
onStop: () => void;
onNewChat: () => void;
+ onClose?: () => void;
}
const QUICK_ACTIONS = [
@@ -35,17 +51,49 @@ const QUICK_ACTIONS = [
{ id: "simplify", label: "Simplify", Icon: AlignLeft },
];
+function TokenGauge({ tokens, ratio }: { tokens: number; ratio: number }) {
+ const r = 8;
+ const circ = 2 * Math.PI * r;
+ const offset = circ * (1 - ratio);
+ const color = ratio > 0.8 ? "var(--ed-error)" : ratio > 0.5 ? "#ff9800" : "var(--ed-text-disabled)";
+ const label = tokens < 1000 ? `${tokens}` : `${(tokens / 1000).toFixed(1)}k`;
+
+ if (tokens === 0) return null;
+
+ return (
+
+
+
+ )}
- {/* Single scroll container */}
-
-
@@ -284,46 +586,41 @@ export default function App() {
editorRef={editorRef}
onCommentStoreReady={onCommentStoreReady}
onFrontmatterStoreReady={onFrontmatterStoreReady}
+ onEmbedStoreReady={onEmbedStoreReady}
onSettingsMapReady={onSettingsMapReady}
onEditorReady={onEditorReady}
onUndoManagerReady={setUndoManager}
+ onProviderReady={onProviderReady}
onAddComment={handleAddComment}
/>
-
-
- agentChat.clearMessages()}
+ onClose={() => setChatOpen(false)}
+ />
) : (
- AI Assistant
-
-
-
- window.location.reload()}
- />
-
+
+
+
+
{/* Header */}
- Assistant
-
-
-
+ AI Assistant
+
{/* Messages */}
@@ -94,11 +177,8 @@ export function ChatPanel({
+
+
+
+ {onClose && (
+
+ )}
+
-
- Thinking...
-
+ {isLoading && messages.length > 0 && (
+
{textContent && (
= {
- replaceSelection: "Replaced selection",
- insertAtCursor: "Inserted text",
- applyDiff: "Applied edit",
- updateFrontmatter: "Updated metadata",
- addAuthor: "Added author",
- removeAuthor: "Removed author",
- };
- return labels[name] || name;
+const TOOL_LABELS: Record = {
+ replaceSelection: ["Replacing selection...", "Replaced selection"],
+ insertAtCursor: ["Inserting text...", "Inserted text"],
+ applyDiff: ["Applying edit...", "Applied edit"],
+ updateFrontmatter: ["Updating metadata...", "Updated metadata"],
+ addAuthor: ["Adding author...", "Added author"],
+ removeAuthor: ["Removing author...", "Removed author"],
+};
+
+function toolLabel(name: string, state: string): string {
+ const pair = TOOL_LABELS[name];
+ if (!pair) return name;
+ return state === "result" ? pair[1] : pair[0];
+}
+
+function AgentStatus({ messages }: { messages: UIMessage[] }) {
+ const last = messages[messages.length - 1];
+ if (!last) return null;
+
+ if (last.role === "assistant") {
+ const parts = last.parts ?? [];
+ const runningTools = parts
+ .map((p) => normalizeToolPart(p))
+ .filter((t): t is NonNullable => t !== null && t.state !== "result")
+ .map((t) => t.toolName);
+
+ if (runningTools.length > 0) {
+ const label = TOOL_LABELS[runningTools[runningTools.length - 1]];
+ const text = label ? label[0] : runningTools[runningTools.length - 1];
+ return (
+ {
+ const map = new Map();
+ editor.state.doc.descendants((node, pos) => {
+ for (const mark of node.marks) {
+ if (mark.type.name === "comment" && !map.has(mark.attrs.commentId)) {
+ map.set(mark.attrs.commentId, pos);
+ }
+ }
+ });
+ return map;
+}
+
+export function CommentMarginIcons({ editor, commentStore, user }: Props) {
+ const [positions, setPositions] = useState([]);
+ const [activeId, setActiveId] = useState(null);
+ const [activeComment, setActiveComment] = useState(null);
+ const [replyText, setReplyText] = useState("");
+ const popoverRef = useRef(null);
+ const replyInputRef = useRef(null);
+
+ const activeIdRef = useRef(null);
+ activeIdRef.current = activeId;
+
+ const updatePositions = useCallback(() => {
+ if (!editor || !commentStore) return;
+ if (activeIdRef.current) return; // freeze while popover open
+ const comments = commentStore.getAll().filter((c) => !c.resolved);
+ if (comments.length === 0) {
+ setPositions([]);
+ return;
+ }
+
+ const scrollParent = editor.view.dom.closest(".editor-scroll");
+ if (!scrollParent) return;
+ const scrollTop = scrollParent.scrollTop;
+ const scrollRect = scrollParent.getBoundingClientRect();
+
+ const markPos = buildMarkPositions(editor);
+ const result: CommentPosition[] = [];
+
+ for (const c of comments) {
+ const pos = markPos.get(c.id);
+ if (pos === undefined) continue;
+ try {
+ const coords = editor.view.coordsAtPos(pos);
+ const top = coords.top - scrollRect.top + scrollTop;
+ result.push({ id: c.id, top });
+ } catch { /* not mapped */ }
+ }
+
+ result.sort((a, b) => a.top - b.top);
+ const MIN_GAP = 32;
+ for (let i = 1; i < result.length; i++) {
+ if (result[i].top < result[i - 1].top + MIN_GAP) {
+ result[i].top = result[i - 1].top + MIN_GAP;
+ }
+ }
+ setPositions(result);
+ }, [editor, commentStore]);
+
+ useEffect(() => {
+ updatePositions();
+ if (!commentStore) return;
+ return commentStore.observe(updatePositions);
+ }, [commentStore, updatePositions]);
+
+ useEffect(() => {
+ if (!editor) return;
+ const scrollParent = editor.view.dom.closest(".editor-scroll");
+ if (!scrollParent) return;
+
+ let timer = 0;
+ const debounced = () => {
+ clearTimeout(timer);
+ timer = window.setTimeout(updatePositions, 120);
+ };
+ scrollParent.addEventListener("scroll", debounced, { passive: true });
+ editor.on("update", debounced);
+ return () => {
+ scrollParent.removeEventListener("scroll", debounced);
+ editor.off("update", debounced);
+ clearTimeout(timer);
+ };
+ }, [editor, updatePositions]);
+
+ // Also open popover when clicking on a comment-mark in the text
+ useEffect(() => {
+ if (!editor || !commentStore) return;
+ const handleSelection = () => {
+ const { from, to } = editor.state.selection;
+ if (from !== to) return;
+ const resolved = editor.state.doc.resolve(from);
+ for (const mark of resolved.marks()) {
+ if (mark.type.name === "comment" && mark.attrs.commentId) {
+ const id = mark.attrs.commentId as string;
+ const comment = commentStore.get(id);
+ if (comment && !comment.resolved) {
+ setActiveId(id);
+ setActiveComment(comment);
+ setReplyText("");
+ return;
+ }
+ }
+ }
+ };
+ editor.on("selectionUpdate", handleSelection);
+ return () => { editor.off("selectionUpdate", handleSelection); };
+ }, [editor, commentStore]);
+
+ // Refresh active comment data from store
+ useEffect(() => {
+ if (!activeId || !commentStore) return;
+ const refresh = () => {
+ const updated = commentStore.get(activeId);
+ if (updated) setActiveComment(updated);
+ else { setActiveComment(null); setActiveId(null); }
+ };
+ return commentStore.observe(refresh);
+ }, [activeId, commentStore]);
+
+ // Recalculate positions when popover closes (unfreeze)
+ const prevActiveId = useRef(null);
+ useEffect(() => {
+ if (prevActiveId.current && !activeId) {
+ setTimeout(updatePositions, 50);
+ }
+ prevActiveId.current = activeId;
+ }, [activeId, updatePositions]);
+
+ // Close on outside click
+ useEffect(() => {
+ if (!activeId) return;
+ const handler = (e: MouseEvent) => {
+ if (popoverRef.current && !popoverRef.current.contains(e.target as Node)) {
+ const target = e.target as HTMLElement;
+ if (target.closest(".comment-margin-icon")) return;
+ setActiveId(null);
+ setActiveComment(null);
+ }
+ };
+ document.addEventListener("mousedown", handler);
+ return () => document.removeEventListener("mousedown", handler);
+ }, [activeId]);
+
+ const handleIconClick = (id: string) => {
+ if (!commentStore) return;
+ if (activeId === id) {
+ setActiveId(null);
+ setActiveComment(null);
+ return;
+ }
+ const comment = commentStore.get(id);
+ if (!comment) return;
+ setActiveId(id);
+ setActiveComment(comment);
+ setReplyText("");
+ };
+
+ const handleReply = () => {
+ if (!replyText.trim() || !commentStore || !activeId) return;
+ commentStore.addReply(activeId, {
+ id: `r_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`,
+ author: user.name,
+ authorColor: user.color,
+ text: replyText.trim(),
+ createdAt: Date.now(),
+ });
+ setReplyText("");
+ setTimeout(() => replyInputRef.current?.focus(), 50);
+ };
+
+ const removeMarkAndData = useCallback((id: string) => {
+ if (!commentStore || !editor) return;
+ commentStore.remove(id);
+ const { doc, tr } = editor.state;
+ const markType = editor.schema.marks.comment;
+ doc.descendants((node, pos) => {
+ node.marks.forEach((mark) => {
+ if (mark.type === markType && mark.attrs.commentId === id) {
+ tr.removeMark(pos, pos + node.nodeSize, markType);
+ }
+ });
+ });
+ editor.view.dispatch(tr);
+ setActiveId(null);
+ setActiveComment(null);
+ }, [commentStore, editor]);
+
+ const activePos = positions.find((p) => p.id === activeId);
+
+ const formatTime = (ts: number) =>
+ new Date(ts).toLocaleString(undefined, {
+ month: "short", day: "numeric", hour: "2-digit", minute: "2-digit",
+ });
+
+ return (
+
- {textContent}
+ {isUser ? textContent : (
+ {textContent}
+ )}
)}
{toolParts.map((part, i) => {
- const tool = part as { type: "tool-invocation"; toolInvocation: { toolName: string; state: string; result?: unknown } };
+ const tool = normalizeToolPart(part);
+ if (!tool) return null;
return (
+
+ );
+ }
+
+ const hasText = parts.some((p) => p.type === "text" && (p as any).text?.trim());
+ if (hasText) return null;
+ }
+
+ return (
+
+
+ );
}
diff --git a/frontend/src/components/CommentPopover.tsx b/frontend/src/components/CommentPopover.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9bfccd6bbe3f3e8f9431c15ff2796b0979a49804
--- /dev/null
+++ b/frontend/src/components/CommentPopover.tsx
@@ -0,0 +1,293 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { CheckCircle, Trash2, Send, MessageCircle } from "lucide-react";
+import type { Editor } from "@tiptap/core";
+import type { CommentStore, CommentData } from "../editor/comments";
+
+interface Props {
+ editor: Editor | null;
+ commentStore: CommentStore | null;
+ user: { name: string; color: string; avatarUrl?: string };
+}
+
+interface CommentPosition {
+ id: string;
+ top: number;
+}
+
+function buildMarkPositions(editor: Editor): Map
+ {positions.map((p) => (
+
handleIconClick(p.id)}
+ >
+
+ ))}
+
+ {activeComment && activePos && (
+
+
+
+
+
+
+
+ {activeComment.replies.map((reply) => (
+
+
+ {activeComment.author}
+
+ {formatTime(activeComment.createdAt)}
+
+ {activeComment.text}
+
+
+ ))}
+
+
+ {reply.author}
+
+ {formatTime(reply.createdAt)}
+
+ {reply.text}
+
+