Upload 28 files

README.md

@@ -1,9 +1,109 @@
+# Vector AI 🚀
+
+Vector AI is a premium, self-hosted AI workspace that combines the conversational power of ChatGPT with the research capabilities of Perplexity. Built on top of **Flowise**, it provides a stunning, high-performance interface for both casual chat and professional document development.
+
+![Vector AI Preview](https://img.shields.io/badge/Status-Active-brightgreen)
+![Framework](https://img.shields.io/badge/Framework-React-blue)
+![Backend](https://img.shields.io/badge/Backend-Node.js-66cc33)
+![AI-Powered](https://img.shields.io/badge/Powered%20By-Flowise-orange)
+
 ---
-title: Vector
-sdk: docker
-emoji: 💻
-colorFrom: indigo
-colorTo: purple
+
+## ✨ Key Features
+
+### 💬 Advanced Chat Interface
+- **SSE Streaming**: Ultra-fast, real-time response streaming for a seamless experience.
+- **Live Activity Indicators**: See exactly what the AI is doing—whether it's "Thinking", "Searching", or using specific tools.
+- **LaTeX & KaTeX**: Full support for mathematical equations, fractions, and scientific notation with beautiful rendering.
+- **File Uploads**: Support for processing PDF and text files directly within the chat.
+- **Speech-to-Text**: Built-in voice input for hands-free interaction.
+
+### 🧪 Vector Labs (Workspaces)
+- **Project-Based Editing**: Create and manage long-form documents in dedicated workspaces.
+- **Surgical AI Edits**: Highlight specific sections of your text and have the AI refine just that selection.
+- **Persistent State**: Projects are saved locally and persist through page refreshes and sessions.
+- **Global Context**: The AI understands the full document while you edit, ensuring consistency.
+
+### 📄 Export & Integration
+- **Modern Word Export**: Export your documents to `.docx` with clean, modern typography (Arial/Inter style).
+- **PDF Generation**: Quick PDF exports for sharing your work.
+- **Model Selector**: Easily switch between different Flowise Chatflows for specialized tasks.
+
+---
+
+## 🚀 Quick Start
+
+### 1. Prerequisites
+- **Node.js** (v18 or higher)
+- A running **Flowise** instance (local, HF Spaces, or Railway)
+
+### 2. Installation
+```bash
+# Clone the repository
+git clone https://github.com/your-repo/vector-ai.git
+cd vector-ai
+
+# Install dependencies
+npm install
+```
+
+### 3. Configuration
+Create a `.env` file in the root directory:
+
+```env
+PORT=3000
+
+# Primary Chat Models
+MODEL_1_NAME="Vector GPT"
+MODEL_1_ID="YOUR_CHATFLOW_ID_1"
+MODEL_1_HOST="https://your-flowise.hf.space"
+
+MODEL_2_NAME="Vector Research"
+MODEL_2_ID="YOUR_CHATFLOW_ID_2"
+MODEL_2_HOST="https://your-flowise.hf.space"
+
+# Dedicated Labs Model (Optional - falls back to Model 1)
+LABS_MODEL_NAME="Vector Editor"
+LABS_MODEL_ID="YOUR_LABS_CHATFLOW_ID"
+LABS_MODEL_HOST="https://your-flowise.hf.space"
+
+# Optional: Flowise Authentication
+# FLOWISE_API_KEY=your_api_key
+```
+
+### 4. Development & Build
+```bash
+# Run in development mode
+npm run dev
+
+# Build the frontend and run the production server
+npm run build
+npm start
+```
+
+---
+
+## 🛠 Tech Stack
+
+- **Frontend**: [React](https://reactjs.org/) + [Vite](https://vitejs.dev/)
+- **Styling**: [Tailwind CSS](https://tailwindcss.com/) + [Framer Motion](https://www.framer.com/motion/)
+- **Backend**: [Node.js](https://nodejs.org/) + [Express](https://expressjs.com/)
+- **Streaming**: Server-Sent Events (SSE)
+- **AI Orchestration**: [Flowise](https://flowiseai.com/)
+- **Rich Text**: [React Markdown](https://github.com/remarkjs/react-markdown) + [KaTeX](https://katex.org/)
+
+---
+
+## ☁️ Deployment
+
+### Render / Railway / HF Spaces
+This project is designed to be easily deployable as a single service:
+
+1. **Build Command**: `npm install && npm run build`
+2. **Start Command**: `npm start`
+3. **Environment Variables**: Add your `MODEL_*` variables in the platform's dashboard.
+
 ---
-# Vector AI 🚀
 
+## 📝 License
+This project is licensed under the MIT License.

client/src/components/ChatArea.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState, useCallback } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
@@ -20,7 +20,15 @@ import {
   Mic,
   X,
   Check,
-  ChevronDown
+  ChevronDown,
+  Search,
+  BookOpen,
+  Wrench,
+  Brain,
+  PenLine,
+  ClipboardList,
+  Zap,
+  CheckCircle2
 } from "lucide-react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -100,11 +108,168 @@ const markdownSchema = {
 function MarkdownContent({ content }) {
   const [copiedCode, setCopiedCode] = React.useState(null);
 
-  const handleCopyCode = (code, index) => {
+  const handleCopyCode = useCallback((code, index) => {
     navigator.clipboard?.writeText(code);
     setCopiedCode(index);
     setTimeout(() => setCopiedCode(null), 2000);
-  };
+  }, []);
+
+  const components = useMemo(() => ({
+    a: (props) => (
+      <a
+        {...props}
+        target="_blank"
+        rel="noopener noreferrer"
+        href={sanitizeLinkUrl(props.href)}
+        className="text-white underline decoration-border hover:text-white/90 hover:decoration-muted-foreground/40 transition-colors"
+      />
+    ),
+    pre: ({ children, ...props }) => {
+      const codeContent = React.Children.toArray(children)
+        .map(child => {
+          if (React.isValidElement(child) && child.props?.children) {
+            return typeof child.props.children === 'string'
+              ? child.props.children
+              : '';
+          }
+          return '';
+        })
+        .join('');
+      const index = Math.random().toString(36).substr(2, 9);
+
+      return (
+        <div className="relative group my-4 overflow-hidden">
+          <pre
+            {...props}
+            className="bg-popover border border-border rounded-lg p-4 overflow-x-auto text-sm max-w-full"
+          >
+            {children}
+          </pre>
+          <button
+            onClick={() => handleCopyCode(codeContent, index)}
+            className="absolute top-2 right-2 p-1.5 rounded-md bg-foreground/10 hover:bg-foreground/20 text-muted-foreground hover:text-white opacity-0 group-hover:opacity-100 transition-all"
+            aria-label="Copy code"
+          >
+            {copiedCode === index ? (
+              <Check size={14} className="text-green-400" />
+            ) : (
+              <Copy size={14} />
+            )}
+          </button>
+        </div>
+      );
+    },
+    code: ({ inline, className, children, ...props }) => {
+      if (inline) {
+        return (
+          <code
+            className="px-1.5 py-0.5 rounded-md bg-foreground/10 text-white text-sm font-mono"
+            {...props}
+          >
+            {children}
+          </code>
+        );
+      }
+      return (
+        <code className={cn("text-white/90 font-mono text-sm", className)} {...props}>
+          {children}
+        </code>
+      );
+    },
+    table: ({ children, ...props }) => (
+      <div className="my-4 overflow-x-auto rounded-lg border border-border max-w-full">
+        <table className="min-w-full divide-y divide-border" {...props}>
+          {children}
+        </table>
+      </div>
+    ),
+    thead: ({ children, ...props }) => (
+      <thead className="bg-foreground/5" {...props}>
+        {children}
+      </thead>
+    ),
+    th: ({ children, ...props }) => (
+      <th
+        className="px-3 py-2 md:px-4 md:py-3 text-left text-xs font-semibold text-white uppercase tracking-wider border-r border-border last:border-r-0"
+        {...props}
+      >
+        {children}
+      </th>
+    ),
+    td: ({ children, ...props }) => (
+      <td
+        className="px-3 py-2 md:px-4 md:py-3 text-sm text-white/80 border-r border-border last:border-r-0"
+        {...props}
+      >
+        {children}
+      </td>
+    ),
+    tr: ({ children, ...props }) => (
+      <tr
+        className="border-b border-border last:border-b-0 hover:bg-foreground/5 transition-colors"
+        {...props}
+      >
+        {children}
+      </tr>
+    ),
+    ul: ({ children, ...props }) => (
+      <ul className="my-3 ml-1 space-y-2 list-none" {...props}>
+        {children}
+      </ul>
+    ),
+    ol: ({ children, ...props }) => (
+      <ol className="my-3 ml-1 space-y-2 list-none counter-reset-item" {...props}>
+        {children}
+      </ol>
+    ),
+    li: ({ children, ordered, ...props }) => (
+      <li className="relative pl-6 text-white/90" {...props}>
+        <span className="absolute left-0 text-muted-foreground">•</span>
+        {children}
+      </li>
+    ),
+    h1: ({ children, ...props }) => (
+      <h1 className="text-xl md:text-2xl font-bold text-white mt-6 mb-4 pb-2 border-b border-border" {...props}>
+        {children}
+      </h1>
+    ),
+    h2: ({ children, ...props }) => (
+      <h2 className="text-lg md:text-xl font-semibold text-white mt-5 mb-3" {...props}>
+        {children}
+      </h2>
+    ),
+    h3: ({ children, ...props }) => (
+      <h3 className="text-base md:text-lg font-semibold text-white mt-4 mb-2" {...props}>
+        {children}
+      </h3>
+    ),
+    p: ({ children, ...props }) => (
+      <p className="my-[0.7em] text-white/90 leading-[1.65]" {...props}>
+        {children}
+      </p>
+    ),
+    strong: ({ children, ...props }) => (
+      <strong className="font-bold text-white" {...props}>
+        {children}
+      </strong>
+    ),
+    em: ({ children, ...props }) => (
+      <em className="italic text-white/90" {...props}>
+        {children}
+      </em>
+    ),
+    blockquote: ({ children, ...props }) => (
+      <blockquote
+        className="my-4 pl-4 border-l-4 border-border bg-foreground/5 py-2 pr-4 rounded-r-lg italic text-white/80"
+        {...props}
+      >
+        {children}
+      </blockquote>
+    ),
+    hr: (props) => (
+      <hr className="my-6 border-t border-border" {...props} />
+    )
+  }), [copiedCode, handleCopyCode]);
 
   return (
     <div className="markdown-content prose prose-invert max-w-none">
@@ -113,162 +278,7 @@ function MarkdownContent({ content }) {
         rehypePlugins={[rehypeKatex, [rehypeSanitize, markdownSchema]]}
         transformLinkUri={sanitizeLinkUrl}
         transformImageUri={sanitizeLinkUrl}
-        components={{
-          a: (props) => (
-            <a
-              {...props}
-              target="_blank"
-              rel="noopener noreferrer"
-              href={sanitizeLinkUrl(props.href)}
-              className="text-white underline decoration-border hover:text-white/90 hover:decoration-muted-foreground/40 transition-colors"
-            />
-          ),
-          pre: ({ children, ...props }) => {
-            const codeContent = React.Children.toArray(children)
-              .map(child => {
-                if (React.isValidElement(child) && child.props?.children) {
-                  return typeof child.props.children === 'string'
-                    ? child.props.children
-                    : '';
-                }
-                return '';
-              })
-              .join('');
-            const index = Math.random().toString(36).substr(2, 9);
-
-            return (
-              <div className="relative group my-4 overflow-hidden">
-                <pre
-                  {...props}
-                  className="bg-popover border border-border rounded-lg p-4 overflow-x-auto text-sm max-w-full"
-                >
-                  {children}
-                </pre>
-                <button
-                  onClick={() => handleCopyCode(codeContent, index)}
-                  className="absolute top-2 right-2 p-1.5 rounded-md bg-foreground/10 hover:bg-foreground/20 text-muted-foreground hover:text-white opacity-0 group-hover:opacity-100 transition-all"
-                  aria-label="Copy code"
-                >
-                  {copiedCode === index ? (
-                    <Check size={14} className="text-green-400" />
-                  ) : (
-                    <Copy size={14} />
-                  )}
-                </button>
-              </div>
-            );
-          },
-          code: ({ inline, className, children, ...props }) => {
-            if (inline) {
-              return (
-                <code
-                  className="px-1.5 py-0.5 rounded-md bg-foreground/10 text-white text-sm font-mono"
-                  {...props}
-                >
-                  {children}
-                </code>
-              );
-            }
-            return (
-              <code className={cn("text-white/90 font-mono text-sm", className)} {...props}>
-                {children}
-              </code>
-            );
-          },
-          table: ({ children, ...props }) => (
-            <div className="my-4 overflow-x-auto rounded-lg border border-border max-w-full">
-              <table className="min-w-full divide-y divide-border" {...props}>
-                {children}
-              </table>
-            </div>
-          ),
-          thead: ({ children, ...props }) => (
-            <thead className="bg-foreground/5" {...props}>
-              {children}
-            </thead>
-          ),
-          th: ({ children, ...props }) => (
-            <th
-              className="px-3 py-2 md:px-4 md:py-3 text-left text-xs font-semibold text-white uppercase tracking-wider border-r border-border last:border-r-0"
-              {...props}
-            >
-              {children}
-            </th>
-          ),
-          td: ({ children, ...props }) => (
-            <td
-              className="px-3 py-2 md:px-4 md:py-3 text-sm text-white/80 border-r border-border last:border-r-0"
-              {...props}
-            >
-              {children}
-            </td>
-          ),
-          tr: ({ children, ...props }) => (
-            <tr
-              className="border-b border-border last:border-b-0 hover:bg-foreground/5 transition-colors"
-              {...props}
-            >
-              {children}
-            </tr>
-          ),
-          ul: ({ children, ...props }) => (
-            <ul className="my-3 ml-1 space-y-2 list-none" {...props}>
-              {children}
-            </ul>
-          ),
-          ol: ({ children, ...props }) => (
-            <ol className="my-3 ml-1 space-y-2 list-none counter-reset-item" {...props}>
-              {children}
-            </ol>
-          ),
-          li: ({ children, ordered, ...props }) => (
-            <li className="relative pl-6 text-white/90" {...props}>
-              <span className="absolute left-0 text-muted-foreground">•</span>
-              {children}
-            </li>
-          ),
-          h1: ({ children, ...props }) => (
-            <h1 className="text-xl md:text-2xl font-bold text-white mt-6 mb-4 pb-2 border-b border-border" {...props}>
-              {children}
-            </h1>
-          ),
-          h2: ({ children, ...props }) => (
-            <h2 className="text-lg md:text-xl font-semibold text-white mt-5 mb-3" {...props}>
-              {children}
-            </h2>
-          ),
-          h3: ({ children, ...props }) => (
-            <h3 className="text-base md:text-lg font-semibold text-white mt-4 mb-2" {...props}>
-              {children}
-            </h3>
-          ),
-          p: ({ children, ...props }) => (
-            <p className="my-[0.7em] text-white/90 leading-[1.65]" {...props}>
-              {children}
-            </p>
-          ),
-          strong: ({ children, ...props }) => (
-            <strong className="font-bold text-white" {...props}>
-              {children}
-            </strong>
-          ),
-          em: ({ children, ...props }) => (
-            <em className="italic text-white/90" {...props}>
-              {children}
-            </em>
-          ),
-          blockquote: ({ children, ...props }) => (
-            <blockquote
-              className="my-4 pl-4 border-l-4 border-border bg-foreground/5 py-2 pr-4 rounded-r-lg italic text-white/80"
-              {...props}
-            >
-              {children}
-            </blockquote>
-          ),
-          hr: (props) => (
-            <hr className="my-6 border-t border-border" {...props} />
-          )
-        }}
+        components={components}
       >
         {content || ""}
       </ReactMarkdown>
@@ -346,7 +356,7 @@ const MessageRow = React.memo(({
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.18, ease: [0.22, 1, 0.36, 1] }}
       className={cn(
-        "flex w-full group",
+        "flex w-full group message-row",
         msg.role === "user" ? "justify-end" : "justify-start"
       )}
     >
@@ -381,7 +391,7 @@ const MessageRow = React.memo(({
             </div>
           )}
           {isStreaming && isLastAssistant && msg.role === "assistant" && (
-            <span className="inline-block w-1.5 h-5 bg-white/70 animate-pulse ml-0.5 align-middle rounded-sm" />
+            <span className="inline-block w-1.5 h-5 bg-white/70 stream-caret ml-0.5 align-middle rounded-sm" />
           )}
         </div>
 
@@ -577,14 +587,15 @@ export default function ChatArea({
                   "How does AI work?",
                   "Write a Python script",
                   "Latest tech news"
-                ].map((suggestion) => (
+                ].map((suggestion, i) => (
                   <button
                     key={suggestion}
                     onClick={() => {
                       onMessageChange(suggestion);
                       setTimeout(() => onSend(), 100);
                     }}
-                    className="px-3 py-2 md:px-4 rounded-full border border-border bg-foreground/5 text-xs md:text-sm text-muted-foreground hover:bg-foreground/8 hover:text-white transition-colors font-medium focus-visible:outline-none"
+                    className="px-3 py-2 md:px-4 rounded-full border border-border bg-foreground/5 text-xs md:text-sm text-muted-foreground hover:bg-foreground/8 hover:text-white transition-colors font-medium focus-visible:outline-none stagger-item"
+                    style={{ animationDelay: `${i * 80}ms` }}
                   >
                     {suggestion}
                   </button>
@@ -654,6 +665,8 @@ function SearchInput({ value, onChange, onSend, disabled, isHero = false, featur
   const [audioStream, setAudioStream] = React.useState(null);
   const [interimTranscript, setInterimTranscript] = React.useState("");
   const recognitionRef = React.useRef(null);
+  const isRecordingRef = React.useRef(false); // Ref to avoid stale closure in onend
+  const finalTranscriptRef = React.useRef(""); // Ref to track accumulated transcript
   const maxTextareaHeight = isHero ? 100 : 120;
   const minTextareaHeight = 44;
 
@@ -714,6 +727,7 @@ function SearchInput({ value, onChange, onSend, disabled, isHero = false, featur
   const handleMicClick = async () => {
     if (isRecording) {
       // Stop recording
+      isRecordingRef.current = false;
       if (recognitionRef.current) {
         recognitionRef.current.stop();
       }
@@ -744,15 +758,16 @@ function SearchInput({ value, onChange, onSend, disabled, isHero = false, featur
         recognition.interimResults = true;
         recognition.lang = 'en-US';
 
-        let finalTranscript = value;
+        // Use ref to track accumulated text (avoids stale closure issues)
+        finalTranscriptRef.current = value;
 
         recognition.onresult = (event) => {
           let interim = '';
           for (let i = event.resultIndex; i < event.results.length; i++) {
             const transcript = event.results[i][0].transcript;
             if (event.results[i].isFinal) {
-              finalTranscript = (finalTranscript ? finalTranscript + ' ' : '') + transcript;
-              onChange(finalTranscript);
+              finalTranscriptRef.current = (finalTranscriptRef.current ? finalTranscriptRef.current + ' ' : '') + transcript;
+              onChange(finalTranscriptRef.current);
             } else {
               interim += transcript;
             }
@@ -762,6 +777,7 @@ function SearchInput({ value, onChange, onSend, disabled, isHero = false, featur
 
         recognition.onerror = (event) => {
           console.error('Speech recognition error:', event.error);
+          isRecordingRef.current = false;
           if (audioStream) {
             audioStream.getTracks().forEach(track => track.stop());
             setAudioStream(null);
@@ -771,17 +787,18 @@ function SearchInput({ value, onChange, onSend, disabled, isHero = false, featur
         };
 
         recognition.onend = () => {
-          // Restart if still in recording mode
-          if (recognitionRef.current && isRecording) {
+          // Restart if still in recording mode — use ref to get current value
+          if (recognitionRef.current && isRecordingRef.current) {
             try {
               recognitionRef.current.start();
             } catch (e) {
-              // Ignore
+              // Ignore — may fail if already started
             }
           }
         };
 
         recognition.start();
+        isRecordingRef.current = true;
         setIsRecording(true);
       } catch (err) {
         console.error('Microphone access denied:', err);
@@ -862,8 +879,8 @@ function SearchInput({ value, onChange, onSend, disabled, isHero = false, featur
               </div>
             )}
             {!interimTranscript && value && (
-              <div className="text-xs text-green-400/70 mt-1 truncate max-w-full">
-                ✓ "{value.slice(-50)}{value.length > 50 ? '...' : ''}"
+              <div className="text-xs text-green-400/70 mt-1 truncate max-w-full flex items-center gap-1">
+                <Check size={10} className="shrink-0" /> "{value.slice(-50)}{value.length > 50 ? '...' : ''}"
               </div>
             )}
             {!interimTranscript && !value && (
@@ -876,6 +893,7 @@ function SearchInput({ value, onChange, onSend, disabled, isHero = false, featur
               <button
                 onClick={() => {
                   // Cancel: stop recording and clear text
+                  isRecordingRef.current = false;
                   if (recognitionRef.current) {
                     recognitionRef.current.stop();
                     recognitionRef.current = null;
@@ -886,6 +904,7 @@ function SearchInput({ value, onChange, onSend, disabled, isHero = false, featur
                   }
                   setIsRecording(false);
                   setInterimTranscript("");
+                  finalTranscriptRef.current = "";
                   onChange(""); // Clear transcribed text
                 }}
                 className="flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-medium text-red-400 bg-red-500/10 hover:bg-red-500/20 transition-colors"
@@ -897,6 +916,13 @@ function SearchInput({ value, onChange, onSend, disabled, isHero = false, featur
               <button
                 onClick={() => {
                   // Done: stop recording but keep the text
+                  isRecordingRef.current = false;
+                  // Save any pending interim transcript before stopping
+                  if (interimTranscript) {
+                    const updated = (finalTranscriptRef.current ? finalTranscriptRef.current + ' ' : '') + interimTranscript;
+                    finalTranscriptRef.current = updated;
+                    onChange(updated);
+                  }
                   if (recognitionRef.current) {
                     recognitionRef.current.stop();
                     recognitionRef.current = null;
@@ -1031,7 +1057,7 @@ function ActivityPanel({ steps, phase, toolName, isStreaming }) {
               <span className="thinking-dot w-1 h-1 rounded-full bg-muted-foreground/80" style={{ animationDelay: "280ms" }} />
             </span>
           ) : (
-            <span className="text-[12px]">✅</span>
+            <CheckCircle2 size={12} className="text-green-400 shrink-0" />
           )}
           <span className="truncate">{isStreaming && phase ? summaryText : summaryText}</span>
         </span>
@@ -1061,7 +1087,7 @@ function ActivityPanel({ steps, phase, toolName, isStreaming }) {
               {isStreaming && phase && (
                 <div className="activity-step-row">
                   <span className="activity-step-icon">
-                    {phase === "searching" ? "🔍" : phase === "reading" ? "📖" : phase === "tool" ? "🔧" : "💭"}
+                    {phase === "searching" ? <Search size={12} /> : phase === "reading" ? <BookOpen size={12} /> : phase === "tool" ? <Wrench size={12} /> : <Brain size={12} />}
                   </span>
                   <span className="text-muted-foreground/70 italic">
                     {phase === "searching" ? "Searching…" : phase === "reading" ? `Reading…` : phase === "tool" ? `Using ${toolName || "tool"}…` : "Thinking…"}
@@ -1080,7 +1106,7 @@ function ActivityStepRow({ step }) {
   if (step.type === "search") {
     return (
       <div className="activity-step-row">
-        <span className="activity-step-icon">🔍</span>
+        <span className="activity-step-icon"><Search size={12} /></span>
         <span>Searched: <span className="text-foreground/80 font-medium">"{step.query}"</span></span>
       </div>
     );
@@ -1090,7 +1116,7 @@ function ActivityStepRow({ step }) {
     try { displayUrl = new URL(step.url).hostname; } catch { }
     return (
       <div className="activity-step-row">
-        <span className="activity-step-icon">🌐</span>
+        <span className="activity-step-icon"><Globe size={12} /></span>
         <span>Reading: <a href={step.url} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">{displayUrl}</a></span>
       </div>
     );
@@ -1126,7 +1152,7 @@ function ActivityStepRow({ step }) {
   if (step.type === "tool") {
     return (
       <div className="activity-step-row">
-        <span className="activity-step-icon">🔧</span>
+        <span className="activity-step-icon"><Wrench size={12} /></span>
         <span>Used tool: <span className="font-medium">{step.tool}</span></span>
       </div>
     );
@@ -1136,14 +1162,14 @@ function ActivityStepRow({ step }) {
 
 function StreamingStatus({ phase, toolName }) {
   const config = {
-    thinking: { icon: "💭", label: "Thinking" },
-    searching: { icon: "🔍", label: "Searching" },
-    reasoning: { icon: "🧠", label: "Analyzing" },
-    tool: { icon: "🔧", label: toolName ? `Using ${toolName}` : "Using tool" },
-    reading: { icon: "📖", label: "Reading sources" },
-    writing: { icon: "✍️", label: "Writing" },
-    planning: { icon: "📋", label: "Planning" },
-    executing: { icon: "⚡", label: "Executing" },
+    thinking: { icon: <Brain size={11} />, label: "Thinking" },
+    searching: { icon: <Search size={11} />, label: "Searching" },
+    reasoning: { icon: <Brain size={11} />, label: "Analyzing" },
+    tool: { icon: <Wrench size={11} />, label: toolName ? `Using ${toolName}` : "Using tool" },
+    reading: { icon: <BookOpen size={11} />, label: "Reading sources" },
+    writing: { icon: <PenLine size={11} />, label: "Writing" },
+    planning: { icon: <ClipboardList size={11} />, label: "Planning" },
+    executing: { icon: <Zap size={11} />, label: "Executing" },
   };
   const { icon, label } = config[phase] || config.thinking;
 
@@ -1163,7 +1189,7 @@ function StreamingStatus({ phase, toolName }) {
           transition={{ duration: 0.2, ease: [0.22, 1, 0.36, 1] }}
           className="inline-flex items-center gap-1.5"
         >
-          <span className="text-[11px]">{icon}</span>
+          <span className="flex items-center">{icon}</span>
           {label}…
         </motion.span>
       </AnimatePresence>

client/src/components/ChatSidebar.jsx

@@ -256,16 +256,17 @@ export default function ChatSidebar({
                       <span className="text-xs">No history yet</span>
                     </div>
                   ) : (
-                    historyList.map((session) => (
+                    historyList.map((session, i) => (
                       <button
                         key={session.id}
                         onClick={() => onSelectSession(session.id)}
                         className={cn(
-                          "w-full text-left px-3 py-2.5 rounded-lg text-sm transition-colors group flex items-center gap-3 relative overflow-hidden focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
+                          "w-full text-left px-3 py-2.5 rounded-lg text-sm transition-colors group flex items-center gap-3 relative overflow-hidden focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 stagger-item",
                           activeSessionId === session.id
                             ? "bg-[#202338] text-foreground"
                             : "text-muted-foreground hover:bg-[#1A1D29] hover:text-foreground"
                         )}
+                        style={{ animationDelay: `${Math.min(i * 30, 300)}ms` }}
                       >
                         {activeSessionId === session.id && (
                           <span className="absolute left-0 top-2 bottom-2 w-[2px] bg-[#22D3EE] rounded-full" />

client/src/components/LabsArea.jsx

@@ -14,7 +14,8 @@ import {
     Menu,
     ChevronLeft,
     Save,
-    Upload
+    Upload,
+    FileDown
 } from "lucide-react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -507,13 +508,13 @@ export default function LabsArea({
                                                         onClick={handleExportWord}
                                                         className="w-full flex items-center gap-2 px-3 py-2 text-sm text-white hover:bg-foreground/10 transition-colors"
                                                     >
-                                                        📄 Word (.docx)
+                                                        <FileText size={14} className="shrink-0" /> Word (.docx)
                                                     </button>
                                                     <button
                                                         onClick={handleExportPdf}
                                                         className="w-full flex items-center gap-2 px-3 py-2 text-sm text-white hover:bg-foreground/10 transition-colors"
                                                     >
-                                                        📕 PDF (.pdf)
+                                                        <FileDown size={14} className="shrink-0" /> PDF (.pdf)
                                                     </button>
                                                 </motion.div>
                                             )}

client/src/components/LabsEditor.jsx

@@ -900,7 +900,7 @@ You can use Markdown formatting:
 > Blockquotes
 `inline code`
 
-💡 Tip: Use the toolbar above or select text for AI editing!"
+Tip: Use the toolbar above or select text for AI editing!"
                         disabled={isProcessing || isEditing}
                         className={cn(
                             "w-full min-h-full p-6 bg-transparent outline-none resize-none text-white font-mono text-sm leading-relaxed",

client/src/hooks/useChatSession.js

@@ -115,6 +115,8 @@ export function useChatSession() {
   const abortRef = useRef(null);
   const timeoutRef = useRef(null);
   const initialLoadDone = useRef(false);
+  const tokenBufferRef = useRef("");
+  const flushScheduledRef = useRef(false);
 
   const activeSession = sessions.find((item) => item.id === activeSessionId);
 
@@ -413,14 +415,26 @@ export function useChatSession() {
               controller.abort();
             }, REQUEST_TIMEOUT_MS);
           }
-          updateSession(activeSession.id, (session) => ({
-            ...session,
-            messages: session.messages.map((msg) =>
-              msg.id === assistantMessage.id
-                ? { ...msg, content: msg.content + (parsed.text || "") }
-                : msg
-            )
-          }));
+          // Buffer tokens and flush via rAF for smooth streaming
+          tokenBufferRef.current += (parsed.text || "");
+          if (!flushScheduledRef.current) {
+            flushScheduledRef.current = true;
+            requestAnimationFrame(() => {
+              const buffered = tokenBufferRef.current;
+              tokenBufferRef.current = "";
+              flushScheduledRef.current = false;
+              if (buffered) {
+                updateSession(activeSession.id, (session) => ({
+                  ...session,
+                  messages: session.messages.map((msg) =>
+                    msg.id === assistantMessage.id
+                      ? { ...msg, content: msg.content + buffered }
+                      : msg
+                  )
+                }));
+              }
+            });
+          }
         }
 
         if (eventName === "activity") {
@@ -472,27 +486,30 @@ export function useChatSession() {
         }
       });
 
-      // Force React to update on each chunk by using a render trigger
-      let renderCounter = 0;
-
       while (true) {
         const { value, done } = await reader.read();
         if (done) break;
 
         const chunk = decoder.decode(value, { stream: true });
         parser.feed(chunk);
+      }
 
-        // Batch updates more efficiently - reduce render frequency for better performance
-        renderCounter++;
-        if (renderCounter % 6 === 0) {
-          // Use requestAnimationFrame for smoother streaming updates
-          requestAnimationFrame(() => {
-            setSessions(prev => [...prev]);
-          });
-        }
+      // Final flush of any remaining buffered tokens
+      if (tokenBufferRef.current) {
+        const remaining = tokenBufferRef.current;
+        tokenBufferRef.current = "";
+        flushScheduledRef.current = false;
+        updateSession(activeSession.id, (session) => ({
+          ...session,
+          messages: session.messages.map((msg) =>
+            msg.id === assistantMessage.id
+              ? { ...msg, content: msg.content + remaining }
+              : msg
+          )
+        }));
       }
 
-      // Final update to ensure everything is saved
+      // Final save
       setSessions(prev => [...prev]);
     } catch (error) {
       // Clear timeout on error

client/src/index.css

@@ -103,6 +103,66 @@
   }
 }
 
+/* ── Professional Micro-Interactions ── */
+
+/* Subtle button press-down on click */
+button:not(:disabled),
+[role="button"]:not(:disabled) {
+  transition: transform 100ms ease, opacity 100ms ease,
+    background-color 150ms ease, color 150ms ease,
+    border-color 150ms ease, box-shadow 150ms ease;
+}
+
+button:active:not(:disabled),
+[role="button"]:active:not(:disabled) {
+  transform: scale(0.97);
+}
+
+/* Smooth streaming caret (replaces harsh animate-pulse) */
+@keyframes streamCaret {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.2;
+  }
+}
+
+.stream-caret {
+  animation: streamCaret 0.8s ease-in-out infinite;
+}
+
+/* Performance: content-visibility for off-screen messages */
+.message-row {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 120px;
+}
+
+/* GPU-accelerated sidebar transition */
+aside {
+  will-change: transform;
+}
+
+/* Stagger animation utility */
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.stagger-item {
+  animation: slideUp 0.3s ease-out both;
+}
+
 /* Refined Input Container - Floating, Calm, Precise */
 .refined-input-container {
   position: relative;