vzcode 2.21.0 → 2.22.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/llm-streaming-server/llmStreaming.ts

@@ -0,0 +1,403 @@
+import OpenAI from 'openai';
+import {
+  parseMarkdownFiles,
+  StreamingMarkdownParser,
+} from 'llm-code-format';
+import { mergeFileChanges } from 'editcodewithai';
+import {
+  FileCollection,
+  VizChatId,
+  VizFiles,
+} from '@vizhub/viz-types';
+import {
+  updateFiles,
+  updateAIScratchpad,
+  createStreamingAIMessage,
+  addStreamingEvent,
+  updateStreamingStatus,
+  finalizeStreamingMessage,
+} from './chatOperations.js';
+import {
+  ShareDBDoc,
+  ExtendedVizContent,
+} from '../types.js';
+import { formatFiles } from '../server/prettier.js';
+
+// Verbose logs
+const DEBUG = false;
+
+// Useful for testing/debugging the streaming behavior
+const slowMode = false;
+
+// If the `EMIT_FIXTURES` variable is true,
+// then an output file in the `test/fixtures` folder
+// with the before and after file states for testing purposes.
+// This feeds into tests in codemirror-ot.
+const EMIT_FIXTURES = false;
+
+/**
+ * Creates and configures the LLM function for streaming with reasoning tokens
+ */
+export const createLLMFunction = ({
+  shareDBDoc,
+  chatId,
+  // Feature flag to enable/disable reasoning tokens.
+  // When false, reasoning tokens are not requested from the API
+  // and reasoning content is not processed in the streaming response.
+  enableReasoningTokens = false,
+  model,
+  aiRequestOptions,
+}: {
+  shareDBDoc: ShareDBDoc<ExtendedVizContent>;
+  chatId: VizChatId;
+  enableReasoningTokens?: boolean;
+  model?: string;
+  aiRequestOptions?: any;
+}) => {
+  return async (fullPrompt: string) => {
+    // Create OpenRouter client for reasoning token support
+    const openRouterClient = new OpenAI({
+      apiKey: process.env.VZCODE_EDIT_WITH_AI_API_KEY,
+      baseURL:
+        process.env.VZCODE_EDIT_WITH_AI_BASE_URL ||
+        'https://openrouter.ai/api/v1',
+      defaultHeaders: {
+        'HTTP-Referer': 'https://vizhub.com',
+        'X-Title': 'VizHub',
+      },
+    });
+
+    let fullContent = '';
+    let generationId = '';
+    let currentEditingFileName = null;
+    let accumulatedTextChunk = '';
+    let currentFileContent = '';
+
+    // Create streaming AI message
+    createStreamingAIMessage(shareDBDoc, chatId);
+
+    // Set initial content generation status
+    updateStreamingStatus(
+      shareDBDoc,
+      chatId,
+      'Formulating a plan...',
+    );
+
+    // Helper to get original file content
+    const getOriginalFileContent = (
+      fileName: string,
+    ): string => {
+      const files = shareDBDoc.data.files;
+      for (const file of Object.values(files)) {
+        if ((file as any).name === fileName) {
+          return (file as any).text || '';
+        }
+      }
+      return '';
+    };
+
+    // Helper to emit text chunk when accumulated
+    const emitTextChunk = async () => {
+      if (accumulatedTextChunk.trim()) {
+        DEBUG &&
+          console.log(
+            'LLMStreaming: Emitting text chunk:',
+            accumulatedTextChunk.substring(0, 100) + '...',
+          );
+        await addStreamingEvent(shareDBDoc, chatId, {
+          type: 'text_chunk',
+          content: accumulatedTextChunk,
+          timestamp: Date.now(),
+        });
+        accumulatedTextChunk = '';
+      }
+    };
+
+    // Helper to complete file editing
+    const completeFileEditing = async (
+      fileName: string,
+    ) => {
+      if (fileName) {
+        DEBUG &&
+          console.log(
+            `LLMStreaming: Completing file editing for ${fileName}`,
+          );
+        await addStreamingEvent(shareDBDoc, chatId, {
+          type: 'file_complete',
+          fileName,
+          beforeContent: getOriginalFileContent(fileName),
+          afterContent: currentFileContent,
+          timestamp: Date.now(),
+        });
+        currentFileContent = '';
+      }
+    };
+
+    // Define callbacks for streaming parser
+    const callbacks = {
+      onFileNameChange: async (
+        fileName: string,
+        format: string,
+      ) => {
+        DEBUG &&
+          console.log(
+            `LLMStreaming: File changed to: ${fileName} (${format})`,
+          );
+
+        // Emit any accumulated text chunk first
+        await emitTextChunk();
+
+        // Complete previous file if any
+        if (currentEditingFileName) {
+          await completeFileEditing(currentEditingFileName);
+        }
+
+        // Start new file
+        currentEditingFileName = fileName;
+        currentFileContent = '';
+
+        // Emit file start event
+        await addStreamingEvent(shareDBDoc, chatId, {
+          type: 'file_start',
+          fileName,
+          timestamp: Date.now(),
+        });
+
+        // Update status
+        updateStreamingStatus(
+          shareDBDoc,
+          chatId,
+          `Editing ${fileName}...`,
+        );
+      },
+      onCodeLine: async (line: string) => {
+        DEBUG && console.log(`Code line: ${line}`);
+        // Accumulate code content for the current file
+        currentFileContent += line + '\n';
+      },
+      onNonCodeLine: async (line: string) => {
+        DEBUG && console.log(`Non-code line: ${line}`);
+        // Accumulate non-code content as text chunk
+        if (line.trim() !== '') {
+          accumulatedTextChunk += line + '\n';
+
+          // Update status for subsequent non-code chunks
+          if (firstNonCodeChunkProcessed) {
+            updateStreamingStatus(
+              shareDBDoc,
+              chatId,
+              'Describing changes...',
+            );
+          } else {
+            firstNonCodeChunkProcessed = true;
+          }
+        }
+      },
+      onFileDelete: async (fileName: string) => {
+        DEBUG &&
+          console.log(
+            `LLMStreaming: File marked for deletion: ${fileName}`,
+          );
+
+        // Emit any accumulated text chunk first
+        await emitTextChunk();
+
+        // Complete previous file if any
+        if (currentEditingFileName) {
+          await completeFileEditing(currentEditingFileName);
+        }
+
+        // Reset current editing state
+        currentEditingFileName = null;
+        currentFileContent = '';
+
+        // Emit file delete event
+        await addStreamingEvent(shareDBDoc, chatId, {
+          type: 'file_delete',
+          fileName,
+          timestamp: Date.now(),
+        });
+
+        // Update status
+        updateStreamingStatus(
+          shareDBDoc,
+          chatId,
+          `Deleting ${fileName}...`,
+        );
+      },
+    };
+
+    const parser = new StreamingMarkdownParser(callbacks);
+
+    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,
+      };
+    }
+
+    const stream = await (
+      openRouterClient.chat.completions.create as any
+    )(requestConfig);
+
+    let reasoningStarted = false;
+    let contentStarted = false;
+    let firstNonCodeChunkProcessed = false;
+
+    for await (const chunk of stream) {
+      if (slowMode) {
+        await new Promise((resolve) =>
+          setTimeout(resolve, 500),
+        );
+      }
+      const delta = chunk.choices[0]?.delta as any; // Type assertion for OpenRouter-specific reasoning fields
+
+      if (delta?.reasoning && enableReasoningTokens) {
+        // Handle reasoning tokens (thinking) - only if enabled
+        if (!reasoningStarted) {
+          reasoningStarted = true;
+          updateStreamingStatus(
+            shareDBDoc,
+            chatId,
+            'Thinking...',
+          );
+        }
+        reasoningContent += delta.reasoning;
+        updateAIScratchpad(
+          shareDBDoc,
+          chatId,
+          reasoningContent,
+        );
+      } else if (delta?.content) {
+        // Handle regular content tokens
+        if (!contentStarted) {
+          contentStarted = true;
+          if (reasoningStarted) {
+            // Clear reasoning when content starts
+            updateAIScratchpad(shareDBDoc, chatId, '');
+          }
+          // // Set initial content generation status
+          // updateStreamingStatus(
+          //   shareDBDoc,
+          //   chatId,
+          //   'Formulating a plan...',
+          // );
+        }
+
+        const chunkContent = delta.content;
+        chunks.push(chunkContent);
+
+        await parser.processChunk(chunkContent);
+        fullContent += chunkContent;
+      } else if (chunk.usage) {
+        // Handle usage information
+        DEBUG && console.log('Usage:', chunk.usage);
+      }
+
+      if (!generationId && chunk.id) {
+        generationId = chunk.id;
+      }
+    }
+    await parser.flushRemaining();
+
+    // Emit any remaining text chunk
+    await emitTextChunk();
+
+    // Complete final file if any
+    if (currentEditingFileName) {
+      await completeFileEditing(currentEditingFileName);
+    }
+
+    // // Capture the current state of files before applying changes
+    // const beforeFiles = createFilesSnapshot(
+    //   shareDBDoc.data.files,
+    // );
+
+    // Parse the full content to extract file changes
+    // export type FileCollection = Record<string, string>;
+    const newFilesUnformatted: FileCollection =
+      parseMarkdownFiles(fullContent, 'bold').files;
+
+    // Run Prettier on `newFiles` before applying them,
+    // preserving empty files as empty
+    // since that is the cue to delete a file.
+    const newFilesFormatted = await formatFiles(
+      newFilesUnformatted,
+    );
+
+    // Capture the current state of files before applying changes
+    let vizFilesBefore: VizFiles;
+    if (EMIT_FIXTURES) {
+      vizFilesBefore = JSON.parse(
+        JSON.stringify(shareDBDoc.data.files),
+      );
+    }
+
+    // Apply all the edits at once
+    const vizFilesAfter: VizFiles = mergeFileChanges(
+      shareDBDoc.data.files,
+      newFilesFormatted,
+    );
+
+    const filesOp = updateFiles(shareDBDoc, vizFilesAfter);
+
+    if (EMIT_FIXTURES) {
+      const fs = await import('fs');
+      const path = await import('path');
+      const testCasesDir = path.resolve(
+        process.cwd(),
+        '../',
+        'fixtures',
+      );
+      if (!fs.existsSync(testCasesDir)) {
+        fs.mkdirSync(testCasesDir, { recursive: true });
+      }
+      const timestamp = new Date()
+        .toISOString()
+        .replace(/[:.]/g, '-');
+      const testCasePath = path.join(
+        testCasesDir,
+        `ai-chat-${timestamp}.json`,
+      );
+      const testCaseData = {
+        vizFilesBefore,
+        vizFilesAfter,
+        filesOp,
+      };
+      fs.writeFileSync(
+        testCasePath,
+        JSON.stringify(testCaseData, null, 2),
+      );
+      console.log(
+        `AI chat test case written to ${testCasePath}`,
+      );
+    }
+
+    // Finalize streaming message
+    finalizeStreamingMessage(shareDBDoc, chatId);
+
+    return {
+      content: fullContent,
+      generationId: generationId,
+    };
+  };
+};

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

@@ -0,0 +1,24 @@
+/**
+ * Validates incoming request data for AI chat messages
+ */
+export const validateRequest = (req, res) => {
+  const { content, chatId } = req.body;
+
+  if (!content || typeof content !== 'string') {
+    res.status(400).json({
+      error:
+        'Invalid request: content is required and must be a string',
+    });
+    return false;
+  }
+
+  if (!chatId || typeof chatId !== 'string') {
+    res.status(400).json({
+      error:
+        'Invalid request: chatId is required and must be a string',
+    });
+    return false;
+  }
+
+  return true;
+};

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