vzcode 2.21.0 → 2.25.0

package/src/llm-streaming-server/index.ts

@@ -0,0 +1,51 @@
+/**
+ * @vizhub/llm-streaming-server
+ *
+ * Server-side library for streaming LLM responses with ShareDB integration.
+ * This module provides functionality for:
+ * - Creating and managing LLM streaming functions
+ * - Performing AI-assisted code editing
+ * - Managing chat operations with ShareDB
+ * - Validating requests and handling errors
+ */
+
+// Core LLM streaming functionality
+export { createLLMFunction } from './llmStreaming.js';
+
+// AI editing operations
+export {
+  performAIChat,
+  performAIEditing,
+} from './aiEditing.js';
+
+// ShareDB chat operations
+export {
+  ensureChatsExist,
+  ensureChatExists,
+  addUserMessage,
+  updateAIStatus,
+  updateAIScratchpad,
+  clearAIScratchpadAndStatus,
+  createAIMessage,
+  updateAIMessageContent,
+  setAIStatus,
+  finalizeAIMessage,
+  addDiffToAIMessage,
+  addAIMessage,
+  updateFiles,
+  resolveFileId,
+  createNewFile,
+  createStreamingAIMessage,
+  addStreamingEvent,
+  updateStreamingStatus,
+  finalizeStreamingMessage,
+} from './chatOperations.js';
+
+// Request validation
+export { validateRequest } from './validation.js';
+
+// Error handling
+export {
+  handleError,
+  handleBackgroundError,
+} from './errorHandling.js';

package/src/{server/aiChatHandler → llm-streaming-server}/llmStreaming.ts

@@ -16,12 +16,13 @@ import {
   addStreamingEvent,
   updateStreamingStatus,
   finalizeStreamingMessage,
+  setChatModel,
 } from './chatOperations.js';
 import {
   ShareDBDoc,
   ExtendedVizContent,
-} from '../../types.js';
-import { formatFiles } from '../prettier.js';
+} from '../types.js';
+import { formatFiles } from '../server/prettier.js';
 
 // Verbose logs
 const DEBUG = false;
@@ -56,8 +57,15 @@ export const createLLMFunction = ({
 }) => {
   return async (fullPrompt: string) => {
     // Create OpenRouter client for reasoning token support
+    const apiKey = process.env.VZCODE_EDIT_WITH_AI_API_KEY;
+    if (!apiKey) {
+      console.warn(
+        '[LLMStreaming] OpenRouter API Key (VZCODE_EDIT_WITH_AI_API_KEY) not found',
+      );
+    }
+
     const openRouterClient = new OpenAI({
-      apiKey: process.env.VZCODE_EDIT_WITH_AI_API_KEY,
+      apiKey: apiKey,
       baseURL:
         process.env.VZCODE_EDIT_WITH_AI_BASE_URL ||
         'https://openrouter.ai/api/v1',
@@ -73,9 +81,18 @@ export const createLLMFunction = ({
     let accumulatedTextChunk = '';
     let currentFileContent = '';
 
+    // Stream the response with reasoning tokens
+    const modelName =
+      model ||
+      process.env.VZCODE_EDIT_WITH_AI_MODEL_NAME ||
+      'anthropic/claude-haiku-4.5';
+
     // Create streaming AI message
     createStreamingAIMessage(shareDBDoc, chatId);
 
+    // Set the model being used for this chat
+    setChatModel(shareDBDoc, chatId, modelName);
+
     // Set initial content generation status
     updateStreamingStatus(
       shareDBDoc,
@@ -232,28 +249,21 @@ export const createLLMFunction = ({
     const chunks = [];
     let reasoningContent = '';
 
-    // Stream the response with reasoning tokens
-    const modelName =
-      model ||
-      process.env.VZCODE_EDIT_WITH_AI_MODEL_NAME ||
-      'anthropic/claude-3.5-sonnet';
-
     // Configure reasoning tokens based on enableReasoningTokens flag
     const requestConfig: any = {
       model: modelName,
       messages: [{ role: 'user', content: fullPrompt }],
-      usage: { include: true },
       stream: true,
       ...aiRequestOptions,
     };
 
     // Only include reasoning configuration if reasoning tokens are enabled
-    if (enableReasoningTokens) {
-      requestConfig.reasoning = {
-        effort: 'low',
-        exclude: false,
-      };
-    }
+    // if (enableReasoningTokens) {
+    //   requestConfig.reasoning = {
+    //     effort: 'low',
+    //     exclude: false,
+    //   };
+    // }
 
     const stream = await (
       openRouterClient.chat.completions.create as any

package/src/llm-streaming-ui/README.md

@@ -0,0 +1,103 @@
+# LLM Streaming UI
+
+Client-side React UI components for displaying streaming AI edits and chat.
+
+## Overview
+
+This module is being extracted from VZCode's AI chat interface to become a standalone, reusable React component library. It provides client-side UI functionality for:
+
+- **AI Chat Interface**: Main chat container component
+- **Message Display**: Rendering user and AI messages with streaming support
+- **Diff Visualization**: Showing code changes with syntax highlighting
+- **Status Indicators**: Displaying AI thinking/reasoning and file editing status
+- **Voice Input**: Speech recognition for voice-based chat input
+
+## Current Status
+
+⚠️ **Work in Progress**: This is Phase 1 of the extraction plan. The files have been copied to this directory and imports have been updated, but the components are not yet decoupled from VZCode.
+
+## Components
+
+### Main Components
+
+- `index.tsx` (AIChat) - Main chat container with message management
+- `MessageList.tsx` - Scrollable message list with auto-scroll
+- `Message.tsx` - Individual message rendering (user/assistant)
+- `ChatInput.tsx` - Chat input field with voice support
+
+### Diff/Code Display
+
+- `DiffView.tsx` - Unified diff viewer for code changes
+- `IndividualFileDiff.tsx` - Per-file diff display
+- `FileEditingIndicator.tsx` - Status indicator for file editing
+
+### Status/Loading
+
+- `TypingIndicator.tsx` - Animated typing/loading indicator
+- `ThinkingScratchpad.tsx` - AI reasoning/thinking display
+- `JumpToLatestButton.tsx` - Button to scroll to latest message
+
+### Hooks
+
+- `useSpeechRecognition.ts` - Voice input functionality
+
+### Styles
+
+- `styles.scss` - Main component styles
+- `DiffView.scss` - Diff viewer styles
+
+## Dependencies
+
+Currently depends on:
+
+- React and React hooks
+- VZCode context: `../../client/VZCodeContext`
+- VZCode types: `../../types.js`
+- VZCode utilities: `../../client/hooks/*`, `../../utils/*`
+- Bootstrap components
+- diff2html for diff rendering
+- react-markdown for message rendering
+
+## Future Plans
+
+This module will eventually be:
+
+1. Decoupled from VZCode-specific context and utilities
+2. Published as `@vizhub/llm-streaming-ui` on npm
+3. Made themeable and customizable
+4. Provided with Storybook documentation
+5. Fully typed with exported TypeScript interfaces
+
+See the [main issue](https://github.com/vizhub-core/vzcode/issues/XXX) for the full extraction plan.
+
+## Usage (Current)
+
+Currently, this module is imported by `src/client/VZSidebar/index.tsx`:
+
+```typescript
+import { AIChat } from '../../llm-streaming-ui/components/index.js';
+```
+
+The AIChat component expects VZCode context to be available and receives props like:
+
+- Chat state from VZCodeContext
+- Message sending handlers
+- Auto-scroll configuration
+
+## Contributing
+
+As this module is being extracted, please:
+
+- Keep changes minimal and focused
+- Maintain backward compatibility with VZCode
+- Update component tests when modifying functionality
+- Consider future consumers when adding new dependencies
+- Document component props and behavior
+
+## Theming
+
+The components currently use VZCode's theming system via SCSS variables. Future versions will provide:
+
+- CSS custom properties for theming
+- Light/dark theme presets
+- Customizable component styling

package/src/{client/VZSidebar/AIChat → llm-streaming-ui/components}/ChatInput.tsx

@@ -9,10 +9,10 @@ import {
   Button,
   ButtonGroup,
   ToggleButton,
-} from '../../bootstrap';
-import { enableAskMode } from '../../featureFlags';
+} from '../../client/bootstrap';
+import { enableAskMode } from '../../client/featureFlags';
 import { useSpeechRecognition } from './useSpeechRecognition';
-import { MicSVG, MicOffSVG } from '../../Icons';
+import { MicSVG, MicOffSVG } from '../../client/Icons';
 
 interface ChatInputProps {
   aiChatMessage: string;

package/src/{client/VZSidebar/AIChat → llm-streaming-ui/components}/DiffView.tsx

@@ -11,16 +11,16 @@ import {
   combineUnifiedDiffs,
   isFileDeletion,
   getDeletedFileName,
-} from '../../../utils/fileDiff';
+} from '../../utils/fileDiff';
 import * as Diff2Html from 'diff2html';
 import 'diff2html/bundles/css/diff2html.min.css';
 import './DiffView.scss';
-import { VZCodeContext } from '../../VZCodeContext';
+import { VZCodeContext } from '../../client/VZCodeContext';
 import {
   scrollToFirstDiff,
   getHeaderOffset,
   announceDiffSummary,
-} from '../../utils/scrollUtils';
+} from '../../client/utils/scrollUtils';
 import { getFileId } from '@vizhub/viz-utils';
 
 interface DiffViewProps {

package/src/{client/VZSidebar/AIChat → llm-streaming-ui/components}/FileEditingIndicator.tsx

@@ -1,4 +1,4 @@
-import { Spinner } from '../../AIAssist/Spinner';
+import { Spinner } from '../../client/AIAssist/Spinner';
 
 interface AIEditingStatusIndicatorProps {
   status: string;

package/src/{client/VZSidebar/AIChat → llm-streaming-ui/components}/IndividualFileDiff.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import * as Diff2Html from 'diff2html';
 import 'diff2html/bundles/css/diff2html.min.css';
 import './DiffView.scss';
-import { generateFileUnifiedDiff } from '../../../utils/fileDiff';
+import { generateFileUnifiedDiff } from '../../utils/fileDiff';
 
 interface IndividualFileDiffProps {
   fileName: string;

package/src/{client/VZSidebar/AIChat → llm-streaming-ui/components}/Message.tsx

@@ -6,14 +6,14 @@ import React, {
 import { timestampToDate } from '@vizhub/viz-utils';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { StreamingEvent } from '../../../types.js';
+import { StreamingEvent } from '../../types.js';
 import { IndividualFileDiff } from './IndividualFileDiff';
-import { VZCodeContext } from '../../VZCodeContext';
+import { VZCodeContext } from '../../client/VZCodeContext';
 import { DiffView, DiffViewRef } from './DiffView';
-import { UnifiedFilesDiff } from '../../../utils/fileDiff';
-import { enableDiffView } from '../../featureFlags';
+import { UnifiedFilesDiff } from '../../utils/fileDiff';
+import { enableDiffView } from '../../client/featureFlags';
 
-const DEBUG = false;
+const DEBUG = true;
 
 interface MessageProps {
   id: string;
@@ -26,6 +26,7 @@ interface MessageProps {
   showAdditionalWidgets?: boolean;
   isStreaming?: boolean;
   diffData?: UnifiedFilesDiff;
+  model?: string; // The LLM model used for this message (assistant only)
 }
 
 export const Message = forwardRef<
@@ -45,18 +46,13 @@ export const Message = forwardRef<
       showAdditionalWidgets = false,
       isStreaming = false,
       diffData,
+      model,
     },
     ref,
   ) => {
     const { additionalWidgets, handleSendMessage } =
       useContext(VZCodeContext);
 
-    DEBUG &&
-      console.log(
-        'StreamingMessage: Rendered with events:',
-        events,
-      );
-
     // Memoize date formatting to avoid repeated computation
     const formattedTime = useMemo(() => {
       return timestampToDate(timestamp).toLocaleTimeString(
@@ -76,6 +72,11 @@ export const Message = forwardRef<
     return (
       <div className={messageClassName}>
         <div className="ai-chat-message-content">
+          {/* Model indicator for assistant messages */}
+          {role === 'assistant' && model && (
+            <div className="model-indicator">{model}</div>
+          )}
+
           {/* Render regular content for non-streaming messages */}
           {content && (
             <Markdown remarkPlugins={[remarkGfm]}>

package/src/{client/VZSidebar/AIChat → llm-streaming-ui/components}/MessageList.tsx

@@ -10,9 +10,9 @@ import { TypingIndicator } from './TypingIndicator';
 import { ThinkingScratchpad } from './ThinkingScratchpad';
 import { AIEditingStatusIndicator } from './FileEditingIndicator';
 import { VizChatMessage } from '@vizhub/viz-types';
-import { ExtendedVizChatMessage } from '../../../types.js';
+import { ExtendedVizChatMessage } from '../../types.js';
 import { DiffViewRef } from './DiffView.js';
-import { VZCodeContext } from '../../VZCodeContext';
+import { VZCodeContext } from '../../client/VZCodeContext';
 
 const MessageListComponent = ({
   messages,
@@ -20,6 +20,7 @@ const MessageListComponent = ({
   chatId, // Add chatId prop
   aiScratchpad, // Add aiScratchpad prop
   currentStatus, // Add current status prop
+  model, // Add model prop
   onNewEvent,
   onJumpToLatest,
   beforeRender,
@@ -30,6 +31,7 @@ const MessageListComponent = ({
   chatId?: string; // Add chatId to the type
   aiScratchpad?: string; // Add aiScratchpad to the type
   currentStatus?: string; // Add current status to the type
+  model?: string; // Add model to the type
   onNewEvent: (targetElement?: HTMLElement) => void;
   onJumpToLatest: (targetElement?: HTMLElement) => void;
   beforeRender: () => number;
@@ -192,6 +194,9 @@ const MessageListComponent = ({
             showAdditionalWidgets={showAdditionalWidgets}
             isStreaming={isStreamingMessage}
             diffData={(msg as any).diffData}
+            model={
+              msg.role === 'assistant' ? model : undefined
+            }
             ref={
               isLastMessage && (msg as any).diffData
                 ? diffViewRef

package/src/{client/VZSidebar/AIChat → llm-streaming-ui/components}/index.tsx

@@ -4,11 +4,11 @@ import {
   useEffect,
   useCallback,
 } from 'react';
-import { VZCodeContext } from '../../VZCodeContext';
+import { VZCodeContext } from '../../client/VZCodeContext';
 import { MessageList } from './MessageList';
 import { ChatInput } from './ChatInput';
-import { ExtendedVizChat } from '../../../types.js';
-import { useAutoScroll } from '../../hooks/useAutoScroll';
+import { ExtendedVizChat } from '../../types.js';
+import { useAutoScroll } from '../../client/hooks/useAutoScroll';
 import { JumpToLatestButton } from './JumpToLatestButton';
 import './styles.scss';
 
@@ -92,9 +92,8 @@ export const AIChat = () => {
   const aiScratchpad = currentChat?.aiScratchpad;
   const currentStatus = (currentChat as ExtendedVizChat)
     ?.currentStatus;
+  const model = (currentChat as ExtendedVizChat)?.model;
 
-  // Debug logging for AI status
-  DEBUG && console.log('AIChat: currentChat:', currentChat);
   DEBUG && console.log('AIChat: aiStatus:', aiStatus);
   DEBUG &&
     console.log(
@@ -332,6 +331,7 @@ export const AIChat = () => {
               chatId={selectedChatId || currentChatId}
               aiScratchpad={aiScratchpad}
               currentStatus={currentStatus}
+              model={model}
               onNewEvent={onNewEvent}
               onJumpToLatest={onJumpToLatest}
               beforeRender={beforeRender}

package/src/{client/VZSidebar/AIChat → llm-streaming-ui/components}/styles.scss

@@ -314,6 +314,16 @@
     padding: 0 1em;
   }
 
+  .model-indicator {
+    opacity: 0.6;
+    font-size: 0.7rem;
+    color: var(--vscode-descriptionForeground);
+    padding: 0.25rem 0.5rem;
+    font-family: var(--vscode-editor-font-family);
+    letter-spacing: 0.3px;
+    margin-bottom: 0.5rem;
+  }
+
   padding: 10px 12px;
   font-size: 14px;
   line-height: 1.4;
@@ -362,6 +372,25 @@
     margin-top: 1rem;
     margin-bottom: 0.5rem;
     color: inherit;
+    font-weight: 600;
+  }
+
+  h1 {
+    font-size: 1.25rem; // 20px at 16px base
+  }
+
+  h2 {
+    font-size: 1.125rem; // 18px at 16px base
+  }
+
+  h3 {
+    font-size: 1rem; // 16px at 16px base
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 0.875rem; // 14px at 16px base
   }
 
   ul,
@@ -784,10 +813,29 @@
     h6 {
       margin: 8px 0 6px 0;
       color: var(--vh-color-neutral-04);
+      font-weight: 600;
 
       &:first-child {
         margin-top: 0;
       }
     }
+
+    h1 {
+      font-size: 1.125rem; // 18px at 16px base
+    }
+
+    h2 {
+      font-size: 1rem; // 16px at 16px base
+    }
+
+    h3 {
+      font-size: 0.9375rem; // 15px at 16px base
+    }
+
+    h4,
+    h5,
+    h6 {
+      font-size: 0.8125rem; // 13px at 16px base
+    }
   }
 }

package/src/llm-streaming-ui/index.ts

@@ -0,0 +1,34 @@
+/**
+ * @vizhub/llm-streaming-ui
+ *
+ * Client-side React UI components for displaying streaming AI edits and chat.
+ * This module provides functionality for:
+ * - Displaying AI chat messages with streaming support
+ * - Showing real-time diffs and code changes
+ * - Rendering thinking/reasoning scratchpads
+ * - Managing file editing indicators
+ * - Voice input support
+ */
+
+// Main AI Chat component
+export { AIChat } from './components/index.js';
+
+// Message display components
+export { MessageList } from './components/MessageList.js';
+export { Message } from './components/Message.js';
+
+// Diff visualization components
+export { DiffView } from './components/DiffView.js';
+export { IndividualFileDiff } from './components/IndividualFileDiff.js';
+
+// Status and indicator components
+export { TypingIndicator } from './components/TypingIndicator.js';
+export { ThinkingScratchpad } from './components/ThinkingScratchpad.js';
+export { AIEditingStatusIndicator as FileEditingIndicator } from './components/FileEditingIndicator';
+export { JumpToLatestButton } from './components/JumpToLatestButton.js';
+
+// Input components
+export { ChatInput } from './components/ChatInput.js';
+
+// Custom hooks
+export { useSpeechRecognition } from './components/useSpeechRecognition.js';

package/src/server/aiChatHandler/index.ts

@@ -1,16 +1,16 @@
-import { validateRequest } from './validation.js';
+import { validateRequest } from '../../llm-streaming-server/validation.js';
 import {
   ensureChatsExist,
   ensureChatExists,
   addUserMessage,
   setAIStatus,
-} from './chatOperations.js';
-import { createLLMFunction } from './llmStreaming.js';
-import { performAIEditing } from './aiEditing.js';
+} from '../../llm-streaming-server/chatOperations.js';
+import { createLLMFunction } from '../../llm-streaming-server/llmStreaming.js';
+import { performAIEditing } from '../../llm-streaming-server/aiEditing.js';
 import {
   handleError,
   handleBackgroundError,
-} from './errorHandling.js';
+} from '../../llm-streaming-server/errorHandling.js';
 import { createRunCodeFunction } from '../../runCode.js';
 import { ShareDBDoc } from '../../types.js';
 import { VizContent } from '@vizhub/viz-types';
@@ -25,11 +25,13 @@ export const handleAIChatMessage =
     onCreditDeduction,
     model,
     aiRequestOptions,
+    enableReasoningTokens,
   }: {
     shareDBDoc: ShareDBDoc<VizContent>;
     onCreditDeduction?: any;
     model?: string;
     aiRequestOptions?: any;
+    enableReasoningTokens?: boolean;
   }) =>
   async (req: any, res: any) => {
     const { content, chatId } = req.body;
@@ -68,6 +70,7 @@ export const handleAIChatMessage =
         content,
         model,
         aiRequestOptions,
+        enableReasoningTokens,
         onCreditDeduction,
       }).catch((error) => {
         console.error(
@@ -91,6 +94,7 @@ const processAIRequestAsync = async ({
   content,
   model,
   aiRequestOptions,
+  enableReasoningTokens,
   onCreditDeduction,
 }: {
   shareDBDoc: ShareDBDoc<VizContent>;
@@ -98,6 +102,7 @@ const processAIRequestAsync = async ({
   content: string;
   model?: string;
   aiRequestOptions?: any;
+  enableReasoningTokens?: boolean;
   onCreditDeduction?: any;
 }) => {
   try {
@@ -105,6 +110,7 @@ const processAIRequestAsync = async ({
     const llmFunction = createLLMFunction({
       shareDBDoc,
       chatId,
+      enableReasoningTokens: enableReasoningTokens ?? true,
       model,
       aiRequestOptions,
     });

package/src/types.ts

@@ -261,6 +261,7 @@ export interface ExtendedVizChat extends VizChat {
   streamingEvents?: StreamingEvent[];
   currentStatus?: string;
   isStreaming?: boolean;
+  model?: string; // The LLM model used for this chat
 }
 
 // Extended VizChatMessage with progressive rendering support