vzcode 2.22.0 → 2.25.0

package/dist/server/aiChatHandler/llmStreaming.js

@@ -1,265 +0,0 @@
-import OpenAI from 'openai';
-import { parseMarkdownFiles, StreamingMarkdownParser, } from 'llm-code-format';
-import { mergeFileChanges } from 'editcodewithai';
-import { updateFiles, updateAIScratchpad, createStreamingAIMessage, addStreamingEvent, updateStreamingStatus, finalizeStreamingMessage, } from './chatOperations.js';
-import { formatFiles } from '../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, }) => {
-    return async (fullPrompt) => {
-        // 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) => {
-            const files = shareDBDoc.data.files;
-            for (const file of Object.values(files)) {
-                if (file.name === fileName) {
-                    return file.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) => {
-            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, format) => {
-                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) => {
-                DEBUG && console.log(`Code line: ${line}`);
-                // Accumulate code content for the current file
-                currentFileContent += line + '\n';
-            },
-            onNonCodeLine: async (line) => {
-                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) => {
-                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 = {
-            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(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; // 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 = 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;
-        if (EMIT_FIXTURES) {
-            vizFilesBefore = JSON.parse(JSON.stringify(shareDBDoc.data.files));
-        }
-        // Apply all the edits at once
-        const vizFilesAfter = 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/dist/server/aiChatHandler/validation.js

@@ -1,19 +0,0 @@
-/**
- * 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/client/VZSidebar/AIChat/ChatInput.tsx

@@ -1,237 +0,0 @@
-import {
-  useRef,
-  useEffect,
-  useCallback,
-  memo,
-} from 'react';
-import {
-  Form,
-  Button,
-  ButtonGroup,
-  ToggleButton,
-} from '../../bootstrap';
-import { enableAskMode } from '../../featureFlags';
-import { useSpeechRecognition } from './useSpeechRecognition';
-import { MicSVG, MicOffSVG } from '../../Icons';
-
-interface ChatInputProps {
-  aiChatMessage: string;
-  setAIChatMessage: (message: string) => void;
-  onSendMessage: () => void;
-  focused: boolean;
-  aiChatMode: 'ask' | 'edit';
-  setAIChatMode: (mode: 'ask' | 'edit') => void;
-  navigateMessageHistoryUp: () => void;
-  navigateMessageHistoryDown: () => void;
-  resetMessageHistoryNavigation: () => void;
-}
-
-const ChatInputComponent = ({
-  aiChatMessage,
-  setAIChatMessage,
-  onSendMessage,
-  focused,
-  aiChatMode,
-  setAIChatMode,
-  navigateMessageHistoryUp,
-  navigateMessageHistoryDown,
-  resetMessageHistoryNavigation,
-}: ChatInputProps) => {
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-
-  // Use the speech recognition hook
-  const {
-    isSpeaking,
-    toggleSpeechRecognition,
-    stopSpeaking,
-  } = useSpeechRecognition(setAIChatMessage);
-
-  useEffect(() => {
-    // Focus the input when the AI chat is focused
-    if (focused && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [focused]);
-
-  const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent) => {
-      if (event.key === 'Enter' && !event.shiftKey) {
-        event.preventDefault();
-        onSendMessage();
-      } else if (event.key === 'Enter' && event.shiftKey) {
-        // Shift+Enter should add a newline, not trigger run code
-        // We prevent the event from bubbling up to the global keyboard handler
-        event.stopPropagation();
-      } else if (event.key === 'ArrowUp') {
-        // Only navigate history if cursor is at the beginning of the first line
-        const textarea =
-          event.target as HTMLTextAreaElement;
-        const { selectionStart, value } = textarea;
-        const lines = value
-          .substring(0, selectionStart)
-          .split('\n');
-
-        // Check if we're at the beginning of the first line
-        if (lines.length === 1 && selectionStart === 0) {
-          event.preventDefault();
-          navigateMessageHistoryUp();
-        }
-      } else if (event.key === 'ArrowDown') {
-        // Only navigate history if cursor is at the end of the last line
-        const textarea =
-          event.target as HTMLTextAreaElement;
-        const { selectionStart, value } = textarea;
-        const remainingText =
-          value.substring(selectionStart);
-        const remainingLines = remainingText.split('\n');
-
-        // Check if we're at the end of the last line
-        if (
-          remainingLines.length === 1 &&
-          remainingLines[0] === ''
-        ) {
-          event.preventDefault();
-          navigateMessageHistoryDown();
-        }
-      }
-    },
-    [
-      onSendMessage,
-      navigateMessageHistoryUp,
-      navigateMessageHistoryDown,
-    ],
-  );
-
-  const handleSendClick = useCallback(() => {
-    // If speech recognition is active, stop it
-    if (isSpeaking) {
-      stopSpeaking();
-    }
-    onSendMessage();
-  }, [onSendMessage, isSpeaking, stopSpeaking]);
-
-  const handleChange = useCallback(
-    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-      setAIChatMessage(event.target.value);
-      // Reset history navigation when user starts typing
-      resetMessageHistoryNavigation();
-    },
-    [setAIChatMessage, resetMessageHistoryNavigation],
-  );
-
-  return (
-    <div className="ai-chat-input-container">
-      {enableAskMode && (
-        <div
-          className="ai-chat-mode-toggle"
-          style={{ marginBottom: '8px' }}
-        >
-          <ButtonGroup size="sm">
-            <ToggleButton
-              id="ai-chat-mode-ask"
-              type="radio"
-              variant={
-                aiChatMode === 'ask'
-                  ? 'primary'
-                  : 'outline-primary'
-              }
-              name="ai-chat-mode"
-              value="ask"
-              checked={aiChatMode === 'ask'}
-              onChange={() => setAIChatMode('ask')}
-            >
-              💬 Ask
-            </ToggleButton>
-            <ToggleButton
-              id="ai-chat-mode-edit"
-              type="radio"
-              variant={
-                aiChatMode === 'edit'
-                  ? 'primary'
-                  : 'outline-primary'
-              }
-              name="ai-chat-mode"
-              value="edit"
-              checked={aiChatMode === 'edit'}
-              onChange={() => setAIChatMode('edit')}
-            >
-              ✏️ Edit
-            </ToggleButton>
-          </ButtonGroup>
-          <div className="ai-chat-mode-description">
-            {aiChatMode === 'ask'
-              ? 'Ask questions without editing files'
-              : 'Get answers and code edits'}
-          </div>
-        </div>
-      )}
-      <Form.Group className="ai-chat-input-group">
-        <Form.Control
-          as="textarea"
-          rows={10}
-          value={aiChatMessage}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          ref={inputRef}
-          placeholder={
-            aiChatMode === 'edit'
-              ? 'Ask me to make code changes...'
-              : 'Ask me anything about your code...'
-          }
-          spellCheck="false"
-          aria-label="Chat message input"
-        />
-        <div className="ai-chat-input-footer">
-          <span className="ai-chat-hint">
-            {aiChatMessage ? 'Press Enter to send' : ''}
-          </span>
-          <div style={{ display: 'flex', gap: '8px' }}>
-            <Button
-              variant={
-                isSpeaking ? 'danger' : 'outline-secondary'
-              }
-              size="sm"
-              onClick={toggleSpeechRecognition}
-              aria-label={
-                isSpeaking
-                  ? 'Stop voice typing'
-                  : 'Start voice typing'
-              }
-              title={
-                isSpeaking
-                  ? 'Stop voice typing'
-                  : 'Start voice typing'
-              }
-              style={{
-                borderColor: isSpeaking
-                  ? undefined
-                  : '#dee2e6',
-                borderRadius: '0.375rem',
-                borderWidth: '1px',
-                borderStyle: 'solid',
-              }}
-            >
-              {isSpeaking ? <MicOffSVG /> : <MicSVG />}
-            </Button>
-            <Button
-              variant={
-                aiChatMessage.trim()
-                  ? 'primary'
-                  : 'outline-secondary'
-              }
-              onClick={handleSendClick}
-              disabled={!aiChatMessage.trim()}
-              className="ai-chat-send-button"
-              aria-label="Send message"
-              title="Send message (Enter)"
-            >
-              Send
-            </Button>
-          </div>
-        </div>
-      </Form.Group>
-    </div>
-  );
-};
-
-export const ChatInput = memo(ChatInputComponent);

package/src/client/VZSidebar/AIChat/DiffView.scss

@@ -1,173 +0,0 @@
-.diff-view {
-  margin: 12px 0;
-
-  .diff-summary {
-    margin-bottom: 8px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .diff-stats {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 14px;
-      color: var(--bs-secondary-color);
-
-      .files-changed {
-        color: white;
-        font-weight: 600;
-      }
-
-      .additions {
-        color: #28a745;
-        font-weight: 600;
-      }
-
-      .deletions {
-        color: #dc3545;
-        font-weight: 600;
-      }
-    }
-  }
-
-  .diff-files {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-
-    // Fix diff2html styling issues for dark theme and layout
-    .d2h-wrapper {
-      // Override diff2html variables for dark theme
-      --d2h-bg-color: rgb(41, 44, 52);
-      --d2h-color: #e6edf3;
-      --d2h-border-color: #30363d;
-      --d2h-dim-color: #6e7681;
-      --d2h-info-bg-color: #161b22;
-      --d2h-file-header-bg-color: #161b22;
-      --d2h-file-header-border-color: #30363d;
-      --d2h-line-border-color: #21262d;
-      --d2h-ins-bg-color: rgba(46, 160, 67, 0.15);
-      --d2h-ins-border-color: rgba(46, 160, 67, 0.4);
-      --d2h-ins-highlight-bg-color: rgba(46, 160, 67, 0.4);
-      --d2h-ins-label-color: #3fb950;
-      --d2h-del-bg-color: rgba(248, 81, 73, 0.1);
-      --d2h-del-border-color: rgba(248, 81, 73, 0.4);
-      --d2h-del-highlight-bg-color: rgba(248, 81, 73, 0.4);
-      --d2h-del-label-color: #f85149;
-
-      background-color: var(--d2h-bg-color);
-      color: var(--d2h-color);
-      border-radius: 6px;
-      overflow: hidden;
-    }
-
-    // Fix layout issues with line numbers
-    .d2h-diff-table {
-      position: relative;
-      background-color: var(--d2h-bg-color);
-    }
-
-    .d2h-code-linenumber {
-      position: relative !important;
-      float: none !important;
-      display: table-cell !important;
-      width: auto !important;
-      background-color: var(--d2h-bg-color) !important;
-      border-color: var(--d2h-line-border-color) !important;
-      color: var(--d2h-dim-color) !important;
-    }
-
-    .d2h-code-side-linenumber {
-      position: relative !important;
-      float: none !important;
-      display: table-cell !important;
-      width: auto !important;
-      background-color: var(--d2h-bg-color) !important;
-      border-color: var(--d2h-line-border-color) !important;
-      color: var(--d2h-dim-color) !important;
-    }
-
-    // Ensure proper table layout
-    .d2h-diff-tbody tr {
-      display: table-row;
-    }
-
-    .d2h-diff-tbody td {
-      display: table-cell;
-      vertical-align: top;
-    }
-
-    // Fix file header styling
-    .d2h-file-header {
-      display: none !important;
-      background-color: var(
-        --d2h-file-header-bg-color
-      ) !important;
-      border-bottom: 1px solid
-        var(--d2h-file-header-border-color) !important;
-      color: var(--d2h-color);
-    }
-
-    // Ensure proper line styling
-    .d2h-del {
-      background-color: var(--d2h-del-bg-color) !important;
-      border-color: var(--d2h-del-border-color) !important;
-    }
-
-    .d2h-ins {
-      background-color: var(--d2h-ins-bg-color) !important;
-      border-color: var(--d2h-ins-border-color) !important;
-    }
-
-    // Style clickable file names
-    .d2h-file-name {
-      &:hover {
-        text-decoration: underline !important;
-        opacity: 0.8;
-      }
-    }
-
-    // Fix wrapper border
-    .d2h-file-wrapper {
-      border: 1px solid var(--d2h-border-color) !important;
-      background-color: var(--d2h-bg-color);
-    }
-  }
-
-  .deleted-file {
-    margin-bottom: 8px;
-    border: 1px solid #30363d;
-    border-radius: 6px;
-    background-color: rgb(41, 44, 52);
-    overflow: hidden;
-
-    .deleted-file-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 12px 16px;
-      background-color: #161b22;
-      border-bottom: 1px solid #30363d;
-
-      .deleted-file-name {
-        color: #e6edf3;
-        font-weight: 600;
-        font-family:
-          'SFMono-Regular', Consolas, 'Liberation Mono',
-          Menlo, monospace;
-        font-size: 14px;
-      }
-
-      .deleted-file-status {
-        color: #f85149;
-        font-weight: 600;
-        font-size: 14px;
-        background-color: rgba(248, 81, 73, 0.1);
-        padding: 4px 8px;
-        border-radius: 4px;
-        border: 1px solid rgba(248, 81, 73, 0.4);
-      }
-    }
-  }
-}