iris-chatbot 4.1.0 → 5.0.1

package/template/src/components/ChatView.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type MouseEvent as ReactMouseEvent } from "react";
 import type {
   ChatCitationSource,
   ModelConnection,
@@ -26,7 +26,7 @@ import {
 } from "../lib/memory";
 import { useUIStore } from "../lib/store";
 import { toChatConnectionPayload } from "../lib/connections";
-import { ArrowDown } from "lucide-react";
+import { ArrowDown, TextQuote } from "lucide-react";
 import MessageCard from "./MessageCard";
 import Composer from "./Composer";
 
@@ -326,6 +326,10 @@ export default function ChatView({
   const [showJumpToBottom, setShowJumpToBottom] = useState(false);
   const [micMode, setMicMode] = useState<MicMode>("off");
   const [micState, setMicState] = useState<MicState>("idle");
+  const [quotedContext, setQuotedContext] = useState<string | null>(null);
+  const [askButtonPos, setAskButtonPos] = useState<{ top: number; left: number } | null>(null);
+  const [pendingSelection, setPendingSelection] = useState<string | null>(null);
+  const askButtonRef = useRef<HTMLButtonElement | null>(null);
   const focusedMessageId = useUIStore((state) => state.focusedMessageId);
   const setFocusedMessageId = useUIStore((state) => state.setFocusedMessageId);
   const chatScrollRef = useRef<HTMLDivElement | null>(null);
@@ -346,7 +350,7 @@ export default function ChatView({
   const recognitionFinalTranscriptRef = useRef("");
   const recognitionInterimTranscriptRef = useRef("");
   const micSilenceTimerRef = useRef<number | null>(null);
-  const handleSendRef = useRef<(overrideInput?: string) => Promise<void>>(async () => {});
+  const handleSendRef = useRef<(overrideInput?: string) => Promise<void>>(async () => { });
 
   const scrollToBottom = useCallback((behavior: ScrollBehavior = "smooth") => {
     const container = chatScrollRef.current;
@@ -819,12 +823,113 @@ export default function ChatView({
     startMicRecognitionSession("dictation");
   }, [micSupported, startMicRecognitionSession, stopMicMode]);
 
+  const handleTextSelection = useCallback(() => {
+    const selection = window.getSelection();
+    if (!selection || selection.isCollapsed || !selection.toString().trim()) {
+      setAskButtonPos(null);
+      setPendingSelection(null);
+      return;
+    }
+
+    const selectedText = selection.toString().trim();
+    if (!selectedText) {
+      setAskButtonPos(null);
+      setPendingSelection(null);
+      return;
+    }
+
+    // Check if the selection is inside an assistant message
+    let node: Node | null = selection.anchorNode;
+    let isInAssistantMessage = false;
+    while (node) {
+      if (node instanceof HTMLElement) {
+        if (node.classList.contains("assistant-card") || node.closest?.(".assistant-card")) {
+          isInAssistantMessage = true;
+          break;
+        }
+        if (node.classList.contains("message-row") && node.classList.contains("assistant")) {
+          isInAssistantMessage = true;
+          break;
+        }
+      }
+      node = node.parentNode;
+    }
+
+    if (!isInAssistantMessage) {
+      setAskButtonPos(null);
+      setPendingSelection(null);
+      return;
+    }
+
+    const range = selection.getRangeAt(0);
+    const rect = range.getBoundingClientRect();
+    const scrollContainer = chatScrollRef.current;
+
+    if (scrollContainer) {
+      const containerRect = scrollContainer.getBoundingClientRect();
+      setAskButtonPos({
+        top: rect.top - containerRect.top + scrollContainer.scrollTop - 44,
+        left: rect.left - containerRect.left + rect.width / 2,
+      });
+    } else {
+      setAskButtonPos({
+        top: rect.top + window.scrollY - 44,
+        left: rect.left + rect.width / 2,
+      });
+    }
+    setPendingSelection(selectedText);
+  }, []);
+
+  const handleAskClick = useCallback((event: ReactMouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (pendingSelection) {
+      setQuotedContext(pendingSelection);
+      setAskButtonPos(null);
+      setPendingSelection(null);
+      window.getSelection()?.removeAllRanges();
+    }
+  }, [pendingSelection]);
+
+  const handleClearQuotedContext = useCallback(() => {
+    setQuotedContext(null);
+  }, []);
+
+  useEffect(() => {
+    const onMouseUp = () => {
+      // Small delay so the selection is finalized
+      setTimeout(handleTextSelection, 10);
+    };
+
+    const onSelectionChange = () => {
+      const selection = window.getSelection();
+      if (!selection || selection.isCollapsed) {
+        // Don't dismiss if the ask button itself was clicked
+        setTimeout(() => {
+          const currentSelection = window.getSelection();
+          if (!currentSelection || currentSelection.isCollapsed) {
+            setAskButtonPos(null);
+            setPendingSelection(null);
+          }
+        }, 150);
+      }
+    };
+
+    document.addEventListener("mouseup", onMouseUp);
+    document.addEventListener("selectionchange", onSelectionChange);
+    return () => {
+      document.removeEventListener("mouseup", onMouseUp);
+      document.removeEventListener("selectionchange", onSelectionChange);
+    };
+  }, [handleTextSelection]);
+
   const handleSend = useCallback(async (overrideInput?: string) => {
     const resolvedThread =
       thread || (activeThreadId ? await db.threads.get(activeThreadId) : null);
     if (!resolvedThread) return;
     const trimmed = (overrideInput ?? input).trim();
-    if (!trimmed) return;
+    const hasQuoted = Boolean(quotedContext);
+    if (!trimmed && !hasQuoted) return;
     const sendTriggeredByMic =
       typeof overrideInput === "string" || micModeRef.current !== "off";
     const stopMicAfterValidationFailure = () => {
@@ -886,6 +991,8 @@ export default function ChatView({
     inflightThreadIdsRef.current.add(resolvedThread.id);
     setError(null);
     setInput("");
+    const capturedQuotedContext = quotedContext;
+    setQuotedContext(null);
     setFocusedMessageId(null);
     pendingSendScrollThreadIdRef.current = resolvedThread.id;
     isUserNearBottomRef.current = true;
@@ -894,9 +1001,15 @@ export default function ChatView({
     smoothFollowUntilRef.current = performance.now() + 1200;
     scrollToBottom("smooth");
 
+    const contentToSend = capturedQuotedContext
+      ? trimmed
+        ? `Regarding this text: "${capturedQuotedContext}"\n\n${trimmed}`
+        : `Explain this: "${capturedQuotedContext}"`
+      : trimmed;
+
     const { userMessage, assistantMessage } = await appendUserAndAssistant({
       thread: resolvedThread,
-      content: trimmed,
+      content: contentToSend,
       provider: connection.kind === "builtin" ? connection.provider ?? connection.id : connection.id,
       model,
     });
@@ -906,8 +1019,8 @@ export default function ChatView({
     const lastAssistantMessageContent =
       lastAssistantMessage?.role === "assistant"
         ? (typeof lastAssistantMessage.content === "string"
-            ? lastAssistantMessage.content
-            : "")
+          ? lastAssistantMessage.content
+          : "")
         : undefined;
     const memoryEnabled = settings.memory?.enabled !== false;
     const memoryAutoCaptureEnabled =
@@ -971,10 +1084,10 @@ export default function ChatView({
 
     const siblingThreadsContext = shouldIncludeSiblingThreadContext(trimmed)
       ? buildSiblingThreadsContext({
-          allThreads: threads,
-          activeThread: resolvedThread,
-          messageMap: map,
-        })
+        allThreads: threads,
+        activeThread: resolvedThread,
+        messageMap: map,
+      })
       : null;
     if (siblingThreadsContext) {
       payloadMessages.push({
@@ -987,8 +1100,8 @@ export default function ChatView({
 
     payloadMessages.push(
       ...history
-      .filter((message) => message.role !== "system")
-      .map((message) => ({ role: message.role, content: message.content })),
+        .filter((message) => message.role !== "system")
+        .map((message) => ({ role: message.role, content: message.content })),
     );
 
     const controller = new AbortController();
@@ -1363,6 +1476,7 @@ export default function ChatView({
     stopMicRecognitionSession,
     startMicRecognitionSession,
     stopMicMode,
+    quotedContext,
     messageMap,
   ]);
 
@@ -1472,9 +1586,8 @@ export default function ChatView({
       <div
         ref={chatScrollRef}
         onScroll={updateBottomVisibility}
-        className={`chat-scroll flex-1 overflow-y-auto px-6 py-8${
-          threadMessages.length === 0 ? " empty" : ""
-        }`}
+        className={`chat-scroll flex-1 overflow-y-auto px-6 py-8${threadMessages.length === 0 ? " empty" : ""
+          }`}
       >
         {threadMessages.length === 0 ? (
           <div className="empty-hero">
@@ -1493,6 +1606,8 @@ export default function ChatView({
                 onMicToggle={handleMicToggle}
                 micState={micState}
                 micDisabled={Boolean(activeStreamingMessageId)}
+                quotedContext={quotedContext}
+                onClearQuotedContext={handleClearQuotedContext}
               />
             </div>
           </div>
@@ -1501,21 +1616,36 @@ export default function ChatView({
             {renderedThreadRows}
           </div>
         )}
+        {askButtonPos ? (
+          <button
+            ref={askButtonRef}
+            className="ask-selection-button"
+            style={{
+              top: askButtonPos.top,
+              left: askButtonPos.left,
+            }}
+            onMouseDown={handleAskClick}
+            aria-label="Ask about selection"
+          >
+            <TextQuote className="h-3.5 w-3.5" />
+            Ask
+          </button>
+        ) : null}
         <div ref={bottomRef} className="h-2" />
       </div>
       {threadMessages.length > 0 ? (
-	        <>
-	          {showJumpToBottom ? (
+        <>
+          {showJumpToBottom ? (
             <div className="pointer-events-none absolute bottom-28 left-1/2 z-30 -translate-x-1/2 opacity-80 transition-opacity duration-200">
               <button
-	                className="pointer-events-auto inline-flex h-9 w-9 items-center justify-center rounded-full border border-[var(--border-strong)] bg-[var(--panel)] text-[var(--text-primary)] shadow-[var(--shadow)] transition hover:translate-y-[1px] hover:border-[var(--accent)] hover:opacity-100"
-	                onClick={() => {
-                    shouldStickToBottomRef.current = true;
-                    setShowJumpToBottom(false);
-                    smoothFollowUntilRef.current = performance.now() + 900;
-	                  bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
-	                }}
-	                aria-label="Jump to latest message"
+                className="pointer-events-auto inline-flex h-9 w-9 items-center justify-center rounded-full border border-[var(--border-strong)] bg-[var(--panel)] text-[var(--text-primary)] shadow-[var(--shadow)] transition hover:translate-y-[1px] hover:border-[var(--accent)] hover:opacity-100"
+                onClick={() => {
+                  shouldStickToBottomRef.current = true;
+                  setShowJumpToBottom(false);
+                  smoothFollowUntilRef.current = performance.now() + 900;
+                  bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+                }}
+                aria-label="Jump to latest message"
                 title="Jump to latest"
               >
                 <ArrowDown className="h-4 w-4" />
@@ -1523,27 +1653,29 @@ export default function ChatView({
             </div>
           ) : null}
 
-        <div className="composer-bar px-6 py-4">
-          <div className="mx-auto w-full max-w-3xl">
-            {error ? (
-              <div className="mb-3 rounded-lg border border-[var(--border)] bg-[var(--panel-2)] px-3 py-2 text-xs text-[var(--danger)]">
-                {error}
-              </div>
-            ) : null}
-            <Composer
-              value={input}
-              onChange={setInput}
-              onSend={() => {
-                void handleSend();
-              }}
-              onStop={handleStop}
-              isStreaming={Boolean(activeStreamingMessageId)}
-              onMicToggle={handleMicToggle}
-              micState={micState}
-              micDisabled={Boolean(activeStreamingMessageId)}
-            />
+          <div className="composer-bar px-6 py-4">
+            <div className="mx-auto w-full max-w-3xl">
+              {error ? (
+                <div className="mb-3 rounded-lg border border-[var(--border)] bg-[var(--panel-2)] px-3 py-2 text-xs text-[var(--danger)]">
+                  {error}
+                </div>
+              ) : null}
+              <Composer
+                value={input}
+                onChange={setInput}
+                onSend={() => {
+                  void handleSend();
+                }}
+                onStop={handleStop}
+                isStreaming={Boolean(activeStreamingMessageId)}
+                onMicToggle={handleMicToggle}
+                micState={micState}
+                micDisabled={Boolean(activeStreamingMessageId)}
+                quotedContext={quotedContext}
+                onClearQuotedContext={handleClearQuotedContext}
+              />
+            </div>
           </div>
-        </div>
         </>
       ) : null}
     </div>

package/template/src/components/Composer.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
-import { ArrowUp, Loader2, Mic, Square } from "lucide-react";
+import { ArrowUp, CornerDownRight, Loader2, Mic, Square, X } from "lucide-react";
 
 function normalizePastedText(input: string): string {
   return input
@@ -21,6 +21,8 @@ export default function Composer({
   onMicToggle,
   micState = "idle",
   micDisabled = false,
+  quotedContext = null,
+  onClearQuotedContext,
 }: {
   value: string;
   onChange: (value: string) => void;
@@ -30,6 +32,8 @@ export default function Composer({
   onMicToggle?: () => void;
   micState?: "idle" | "listening" | "processing";
   micDisabled?: boolean;
+  quotedContext?: string | null;
+  onClearQuotedContext?: () => void;
 }) {
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const minRowsRef = useRef(1);
@@ -109,61 +113,87 @@ export default function Composer({
     };
   }, [resizeTextarea, value]);
 
+  useEffect(() => {
+    if (quotedContext && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [quotedContext]);
+
   return (
-    <div className="composer flex items-end gap-3">
-      <textarea
-        ref={textareaRef}
-        rows={1}
-        className="composer-textarea flex-1 text-base text-[var(--text-primary)]"
-        value={value}
-        onChange={(event) => onChange(event.target.value)}
-        onPaste={(event) => {
-          const clipboardText = event.clipboardData.getData("text/plain");
-          if (!clipboardText) {
-            return;
-          }
-          event.preventDefault();
-          insertAtCursor(normalizePastedText(clipboardText));
-        }}
-        placeholder="Ask anything"
-        onKeyDown={(event) => {
-          if (event.key === "Enter" && !event.shiftKey) {
-            event.preventDefault();
-            if (!isStreaming) onSend();
-          }
-        }}
-      />
-      {onMicToggle ? (
-        <button
-          onClick={onMicToggle}
-          className={`send-button mic-button shrink-0 ${micState !== "idle" ? "active" : ""}`}
-          disabled={micDisabled || micState === "processing"}
-          title={micButtonTitle}
-          aria-label={micButtonTitle}
-        >
-          {micState === "processing" ? (
-            <Loader2 className="h-4 w-4 animate-spin" />
-          ) : (
-            <Mic className="h-4 w-4" />
-          )}
-        </button>
+    <div className="composer-wrapper">
+      {quotedContext ? (
+        <div className="quoted-context-container">
+          <div className="quoted-context-content">
+            <CornerDownRight className="quoted-context-icon" />
+            <span className="quoted-context-text">
+              &ldquo;{quotedContext.length > 280 ? `${quotedContext.slice(0, 280)}…` : quotedContext}&rdquo;
+            </span>
+          </div>
+          <button
+            className="quoted-context-dismiss"
+            onClick={onClearQuotedContext}
+            aria-label="Remove quoted context"
+          >
+            <X className="h-3.5 w-3.5" />
+          </button>
+        </div>
       ) : null}
-      {isStreaming ? (
-        <button
-          onClick={onStop}
-          className="flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--panel-2)] px-3 py-2 text-xs text-[var(--text-secondary)]"
-        >
-          <Square className="h-3 w-3" />
-          Stop
-        </button>
-      ) : (
-        <button
-          onClick={onSend}
-          className={`send-button shrink-0 ${hasText ? "active" : ""}`}
-        >
-          <ArrowUp className="h-4 w-4" />
-        </button>
-      )}
+      <div className="composer flex items-end gap-3">
+        <textarea
+          ref={textareaRef}
+          rows={1}
+          className="composer-textarea flex-1 text-base text-[var(--text-primary)]"
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+          onPaste={(event) => {
+            const clipboardText = event.clipboardData.getData("text/plain");
+            if (!clipboardText) {
+              return;
+            }
+            event.preventDefault();
+            insertAtCursor(normalizePastedText(clipboardText));
+          }}
+          placeholder={quotedContext ? "Ask about this selection" : "Ask anything"}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" && !event.shiftKey) {
+              event.preventDefault();
+              if (!isStreaming) onSend();
+            }
+          }}
+        />
+        {onMicToggle ? (
+          <button
+            onClick={onMicToggle}
+            className={`send-button mic-button shrink-0 ${micState !== "idle" ? "active" : ""}`}
+            disabled={micDisabled || micState === "processing"}
+            title={micButtonTitle}
+            aria-label={micButtonTitle}
+          >
+            {micState === "processing" ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Mic className="h-4 w-4" />
+            )}
+          </button>
+        ) : null}
+        {isStreaming ? (
+          <button
+            onClick={onStop}
+            className="flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--panel-2)] px-3 py-2 text-xs text-[var(--text-secondary)]"
+          >
+            <Square className="h-3 w-3" />
+            Stop
+          </button>
+        ) : (
+          <button
+            onClick={onSend}
+            className={`send-button shrink-0 ${hasText || quotedContext ? "active" : ""}`}
+          >
+            <ArrowUp className="h-4 w-4" />
+          </button>
+        )}
+      </div>
     </div>
   );
 }
+

package/template/src/components/MapView.tsx

@@ -16,6 +16,21 @@ import { useUIStore } from "../lib/store";
 const NODE_WIDTH = 220;
 const NODE_HEIGHT = 80;
 
+/** Strip markdown syntax for a short plain-text preview (e.g. "## Hi there" → "Hi there"). */
+function stripMarkdownForPreview(text: string): string {
+  return text
+    .replace(/^#+\s*/m, "") // headings: ## Title -> Title
+    .replace(/\*\*([^*]+)\*\*/g, "$1") // **bold**
+    .replace(/\*([^*]+)\*/g, "$1") // *italic*
+    .replace(/_([^_]+)_/g, "$1") // _italic_
+    .replace(/`([^`]+)`/g, "$1") // `code`
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1") // [link](url) -> link
+    .replace(/^[-*]\s+/gm, "") // list bullets
+    .replace(/^>\s*/gm, "") // blockquote
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
 const graph = new dagre.graphlib.Graph();
 graph.setDefaultEdgeLabel(() => ({}));
 
@@ -120,7 +135,10 @@ export default function MapView({
 
   const { nodes, edges } = useMemo(() => {
     const nodes: Node[] = visibleMessages.map((message) => {
-      const preview = splitContentAndSources(message.content).content.trim().slice(0, 60) || "(empty)";
+      const raw = splitContentAndSources(message.content).content.trim();
+      const preview = raw
+        ? stripMarkdownForPreview(raw).slice(0, 60)
+        : "(empty)";
       const isActive = activePathIds.has(message.id);
       const roleClass =
         message.role === "user"
@@ -169,6 +187,7 @@ export default function MapView({
       padding: 0.2,
       duration,
       includeHiddenNodes: false,
+      minZoom: 0.85,
     });
   }, []);
 
@@ -198,7 +217,7 @@ export default function MapView({
         nodes={nodes}
         edges={edges}
         fitView
-        fitViewOptions={{ padding: 0.2, includeHiddenNodes: false }}
+        fitViewOptions={{ padding: 0.2, includeHiddenNodes: false, minZoom: 0.85 }}
         onInit={(instance) => {
           flowRef.current = instance;
           refitView(0);

package/template/src/components/MessageCard.tsx

@@ -1009,7 +1009,7 @@ function MessageCard({
         {canEditThreads ? (
           <button
             className={`flex items-center gap-2 rounded-full border px-4 py-2 text-xs transition ${threadEditMode
-              ? "border-[var(--accent)] text-[var(--text-primary)]"
+              ? "border-[var(--accent-ring)] text-[var(--text-primary)]"
               : "border-[var(--border)] text-[var(--text-muted)] hover:border-[var(--border-strong)] hover:text-[var(--text-secondary)]"
               }`}
             onClick={() => setThreadEditMode((prev) => !prev)}

package/template/src/components/SearchModal.tsx

@@ -33,7 +33,7 @@ export default function SearchModal({
         <div className="flex items-center gap-3 border-b border-[var(--border)] px-4 py-3">
           <Search className="h-4 w-4 text-[var(--text-muted)]" />
           <input
-            className="flex-1 bg-transparent text-sm text-[var(--text-primary)] outline-none"
+            className="search-modal-input flex-1 bg-transparent text-sm text-[var(--text-primary)] outline-none"
             placeholder="Search chats..."
             value={query}
             onChange={(event) => setQuery(event.target.value)}