vzcode 2.0.0 → 2.3.0

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

@@ -1,176 +0,0 @@
-import React, {
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react';
-import {
-  UnifiedFilesDiff,
-  parseUnifiedDiffStats,
-  combineUnifiedDiffs,
-} from '../../../utils/fileDiff';
-import * as Diff2Html from 'diff2html';
-import 'diff2html/bundles/css/diff2html.min.css';
-import './DiffView.scss';
-import { VZCodeContext } from '../../VZCodeContext';
-import { VizFileId, VizFiles } from '@vizhub/viz-types';
-
-interface DiffViewProps {
-  diffData: UnifiedFilesDiff;
-}
-
-export const DiffView: React.FC<DiffViewProps> = ({
-  diffData,
-}) => {
-  const { content, openTab, setIsAIChatOpen } =
-    useContext(VZCodeContext);
-  const diffContainerRef = useRef<HTMLDivElement>(null);
-
-  const unifiedDiffs = Object.values(diffData).filter(
-    (diff) => diff.length > 0,
-  );
-
-  if (unifiedDiffs.length === 0) {
-    return null;
-  }
-
-  // Calculate statistics from all unified diffs
-  let totalAdditions = 0;
-  let totalDeletions = 0;
-
-  for (const unifiedDiff of unifiedDiffs) {
-    const stats = parseUnifiedDiffStats(unifiedDiff);
-    totalAdditions += stats.additions;
-    totalDeletions += stats.deletions;
-  }
-
-  // Combine all unified diffs and convert to HTML using diff2html
-  const combinedUnifiedDiff = combineUnifiedDiffs(diffData);
-  const diffHtml = Diff2Html.html(combinedUnifiedDiff, {
-    drawFileList: false,
-    matching: 'words',
-    diffStyle: 'word',
-    outputFormat: 'line-by-line',
-  });
-
-  // Create a mapping from file name to file ID for click handling
-  const fileNameToIdMap = useMemo(() => {
-    const map = new Map<string, VizFileId>();
-    Object.entries(diffData).forEach(([fileId, diff]) => {
-      // Extract file name from the unified diff
-      // The diff contains lines like "--- a/filename" and "+++ b/filename"
-      const lines = diff.split('\n');
-      for (const line of lines) {
-        if (
-          line.startsWith('--- a/') ||
-          line.startsWith('+++ b/')
-        ) {
-          const fileName = line.substring(6); // Remove "--- a/" or "+++ b/"
-          map.set(fileName, fileId as VizFileId);
-          break;
-        }
-      }
-    });
-    return map;
-  }, [diffData]);
-
-  // Add click handlers to file names after HTML is rendered
-  useEffect(() => {
-    if (!diffContainerRef.current) return;
-
-    const handleFileNameClick = (event: MouseEvent) => {
-      const target = event.target as HTMLElement;
-      if (target.classList.contains('d2h-file-name')) {
-        event.preventDefault();
-        event.stopPropagation();
-
-        console.log('File name clicked');
-
-        const fileName = target.textContent?.trim();
-
-        console.log('Clicked file name:', fileName);
-        if (fileName) {
-          const files: VizFiles = content?.files;
-          if (files) {
-            //             export type VizFiles = {
-            //     [fileId: VizFileId]: VizFile;
-            // };
-            // export type VizFileId = string;
-            // export type VizFile = {
-            //     name: string;
-            //     text: string;
-            // };
-
-            // TODO get fileId from content.files
-            const fileId = Object.entries(files).find(
-              ([id, file]) => file.name === fileName,
-            )?.[0];
-            console.log('Mapped file ID:', fileId);
-
-            if (fileId) {
-              // Open the file tab and switch to files view
-              openTab({ fileId, isTransient: false });
-              setIsAIChatOpen(false);
-            }
-          }
-        }
-      }
-    };
-
-    const container = diffContainerRef.current;
-    const fileNameElements = container.querySelectorAll(
-      '.d2h-file-name',
-    );
-
-    // Add click event listeners and cursor pointer style
-    fileNameElements.forEach((element) => {
-      element.addEventListener(
-        'click',
-        handleFileNameClick,
-      );
-      (element as HTMLElement).style.cursor = 'pointer';
-      (element as HTMLElement).style.textDecoration =
-        'underline';
-      (element as HTMLElement).style.color = '#58a6ff'; // GitHub blue link color
-    });
-
-    return () => {
-      // Cleanup event listeners
-      fileNameElements.forEach((element) => {
-        element.removeEventListener(
-          'click',
-          handleFileNameClick,
-        );
-      });
-    };
-  }, [diffHtml, content, openTab, setIsAIChatOpen]);
-
-  return (
-    <div className="diff-view">
-      <div className="diff-summary">
-        <div className="diff-stats">
-          <span className="files-changed">
-            {unifiedDiffs.length} file
-            {unifiedDiffs.length !== 1 ? 's' : ''} changed
-          </span>
-          {totalAdditions > 0 && (
-            <span className="additions">
-              +{totalAdditions}
-            </span>
-          )}
-          {totalDeletions > 0 && (
-            <span className="deletions">
-              -{totalDeletions}
-            </span>
-          )}
-        </div>
-      </div>
-
-      <div
-        className="diff-files"
-        ref={diffContainerRef}
-        dangerouslySetInnerHTML={{ __html: diffHtml }}
-      />
-    </div>
-  );
-};

package/src/client/VZSidebar/AIChat/Message.tsx

@@ -1,143 +0,0 @@
-import { timestampToDate } from '@vizhub/viz-utils';
-import Markdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import React, {
-  useMemo,
-  memo,
-  useState,
-  useContext,
-} from 'react';
-import { DiffView } from './DiffView';
-import { UnifiedFilesDiff } from '../../../utils/fileDiff';
-import { enableDiffView } from '../../featureFlags';
-import { VZCodeContext } from '../../VZCodeContext';
-
-interface MessageProps {
-  id: string;
-  role: 'user' | 'assistant';
-  content: string;
-  timestamp: number;
-  isStreaming?: boolean;
-  diffData?: UnifiedFilesDiff;
-  beforeFiles?: any;
-  chatId?: string;
-  canUndo?: boolean;
-}
-
-const MessageComponent = ({
-  id,
-  role,
-  content,
-  timestamp,
-  isStreaming,
-  diffData,
-  beforeFiles,
-  chatId,
-  canUndo,
-}: MessageProps) => {
-  const [isUndoing, setIsUndoing] = useState(false);
-  const {
-    aiChatUndoEndpoint,
-    aiChatOptions = {},
-    additionalWidgets,
-    handleSendMessage,
-  } = useContext(VZCodeContext);
-
-  // Memoize date formatting to avoid repeated computation
-  const formattedTime = useMemo(() => {
-    return timestampToDate(timestamp).toLocaleTimeString(
-      [],
-      {
-        hour: '2-digit',
-        minute: '2-digit',
-      },
-    );
-  }, [timestamp]);
-
-  // Memoize the className string to avoid recreation
-  const messageClassName = useMemo(() => {
-    return `ai-chat-message ${role}${isStreaming ? ' streaming' : ''}`;
-  }, [role, isStreaming]);
-
-  const handleUndo = async () => {
-    if (
-      !id ||
-      !chatId ||
-      !beforeFiles ||
-      isUndoing ||
-      !aiChatUndoEndpoint
-    ) {
-      return;
-    }
-
-    setIsUndoing(true);
-    try {
-      const response = await fetch(aiChatUndoEndpoint, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          vizId: aiChatOptions.vizId,
-          chatId,
-          messageId: id,
-        }),
-      });
-
-      if (!response.ok) {
-        throw new Error(
-          `HTTP error! status: ${response.status}`,
-        );
-      }
-
-      // The server will handle the ShareDB operations to undo the changes
-      // The UI will update automatically via ShareDB
-    } catch (error) {
-      console.error('Error undoing AI edit:', error);
-      // TODO: Show user-friendly error message
-    } finally {
-      setIsUndoing(false);
-    }
-  };
-
-  return (
-    <div className={messageClassName}>
-      <div className="ai-chat-message-content">
-        <Markdown remarkPlugins={[remarkGfm]}>
-          {content}
-        </Markdown>
-        {enableDiffView &&
-          diffData &&
-          Object.keys(diffData).length > 0 && (
-            <DiffView diffData={diffData} />
-          )}
-        {additionalWidgets &&
-          canUndo &&
-          chatId &&
-          React.createElement(additionalWidgets, {
-            messageId: id,
-            chatId: chatId,
-            canUndo: canUndo,
-            handleSendMessage,
-          })}
-        {!additionalWidgets && canUndo && beforeFiles && (
-          <div className="undo-button-container">
-            <button
-              className="undo-button"
-              onClick={handleUndo}
-              disabled={isUndoing}
-              title="Undo this AI edit"
-            >
-              {isUndoing ? 'Undoing...' : 'Undo'}
-            </button>
-          </div>
-        )}
-      </div>
-      <div className="ai-chat-message-time">
-        {formattedTime}
-      </div>
-    </div>
-  );
-};
-
-export const Message = memo(MessageComponent);

package/src/client/VZSidebar/AIChat/MessageList.tsx

@@ -1,205 +0,0 @@
-import {
-  useRef,
-  useEffect,
-  useCallback,
-  memo,
-  useState,
-} from 'react';
-import { Message } from './Message';
-import { TypingIndicator } from './TypingIndicator';
-import { ThinkingScratchpad } from './ThinkingScratchpad';
-import { VizChatMessage } from '@vizhub/viz-types';
-
-const MessageListComponent = ({
-  messages,
-  isLoading,
-  chatId, // Add chatId prop
-  aiScratchpad, // Add aiScratchpad prop
-  aiStatus, // Add aiStatus prop
-}: {
-  messages: VizChatMessage[];
-  isLoading: boolean;
-  chatId?: string; // Add chatId to the type
-  aiScratchpad?: string; // Add aiScratchpad to the type
-  aiStatus?: string; // Add aiStatus to the type
-}) => {
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const messagesContainerRef = useRef<HTMLDivElement>(null);
-  const [isUserScrolled, setIsUserScrolled] =
-    useState(false);
-  const [autoScrollEnabled, setAutoScrollEnabled] =
-    useState(true);
-  const scrollTimeoutRef =
-    useRef<ReturnType<typeof setTimeout>>();
-
-  // Check if the user is scrolled to the bottom
-  const isScrolledToBottom = useCallback(() => {
-    const container = messagesContainerRef.current;
-    if (!container) return true;
-
-    const threshold = 50; // Allow 50px tolerance for "at bottom"
-    const { scrollTop, scrollHeight, clientHeight } =
-      container;
-    return (
-      scrollHeight - scrollTop - clientHeight < threshold
-    );
-  }, []);
-
-  // Smooth scroll to bottom with linear transition
-  const scrollToBottom = useCallback(() => {
-    if (!autoScrollEnabled) return;
-
-    messagesEndRef.current?.scrollIntoView({
-      behavior: 'smooth',
-      block: 'end',
-    });
-  }, [autoScrollEnabled]);
-
-  // Handle scroll events to detect user manual scrolling
-  const handleScroll = useCallback(() => {
-    const container = messagesContainerRef.current;
-    if (!container) return;
-
-    const isAtBottom = isScrolledToBottom();
-
-    // Clear any existing timeout
-    if (scrollTimeoutRef.current) {
-      clearTimeout(scrollTimeoutRef.current);
-    }
-
-    // If user scrolled up from bottom, disable auto-scroll
-    if (!isAtBottom && !isUserScrolled) {
-      setIsUserScrolled(true);
-      setAutoScrollEnabled(false);
-    }
-
-    // If user scrolled back to bottom, re-enable auto-scroll after a brief delay
-    if (isAtBottom && isUserScrolled) {
-      scrollTimeoutRef.current = setTimeout(() => {
-        setIsUserScrolled(false);
-        setAutoScrollEnabled(true);
-      }, 500); // 500ms delay to prevent flickering
-    }
-  }, [isUserScrolled, isScrolledToBottom]);
-
-  // Auto-scroll when messages change, but only if auto-scroll is enabled
-  useEffect(() => {
-    if (autoScrollEnabled && !isUserScrolled) {
-      // Use a short debounce to prevent multiple scroll calls during rapid updates
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
-
-      scrollTimeoutRef.current = setTimeout(() => {
-        scrollToBottom();
-      }, 100); // 100ms debounce
-    }
-
-    return () => {
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
-    };
-  }, [
-    messages,
-    autoScrollEnabled,
-    isUserScrolled,
-    scrollToBottom,
-  ]);
-
-  // Track previous loading state to detect when AI generation completes
-  const [prevIsLoading, setPrevIsLoading] =
-    useState(isLoading);
-
-  // Scroll to bottom when AI generation completes (loading changes from true to false)
-  useEffect(() => {
-    // If AI was generating and now it's finished, scroll to bottom
-    if (prevIsLoading && !isLoading) {
-      // Force scroll to bottom regardless of user scroll state
-      // This ensures we always scroll to bottom when generation completes
-      messagesEndRef.current?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'end',
-      });
-
-      // Re-enable auto-scroll for future messages
-      setIsUserScrolled(false);
-      setAutoScrollEnabled(true);
-    }
-
-    setPrevIsLoading(isLoading);
-  }, [isLoading, prevIsLoading]);
-
-  // Clean up timeout on unmount
-  useEffect(() => {
-    return () => {
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  // Check if AI generation has started (last message is from assistant)
-  const lastMessage = messages[messages.length - 1];
-  const aiGenerationStarted =
-    lastMessage?.role === 'assistant' &&
-    lastMessage.content !== '';
-
-  // Show typing indicator only when loading and AI generation hasn't started yet
-  const showTypingIndicator =
-    isLoading && !aiGenerationStarted;
-
-  // Show thinking scratchpad when AI is thinking (has scratchpad content)
-  const showThinkingScratchpad = Boolean(
-    aiScratchpad && aiScratchpad.trim(),
-  );
-
-  return (
-    <div
-      className="ai-chat-messages"
-      ref={messagesContainerRef}
-      onScroll={handleScroll}
-    >
-      {messages.map((msg, index) => {
-        // Only the most recent assistant message with diffData can be undone
-        const isLastAssistantMessage =
-          msg.role === 'assistant' &&
-          index === messages.length - 1 &&
-          !isLoading; // Can't undo while AI is still generating
-
-        const canUndo =
-          isLastAssistantMessage &&
-          (msg as any).diffData &&
-          (msg as any).beforeFiles &&
-          Object.keys((msg as any).diffData || {}).length >
-            0;
-
-        return (
-          <Message
-            key={msg.id}
-            id={msg.id}
-            role={msg.role}
-            content={msg.content}
-            timestamp={msg.timestamp}
-            diffData={(msg as any).diffData}
-            beforeFiles={(msg as any).beforeFiles}
-            chatId={chatId}
-            canUndo={canUndo}
-          />
-        );
-      })}
-
-      {showThinkingScratchpad && (
-        <ThinkingScratchpad
-          content={aiScratchpad || ''}
-          isVisible={showThinkingScratchpad}
-        />
-      )}
-
-      {showTypingIndicator && <TypingIndicator />}
-      <div ref={messagesEndRef} />
-    </div>
-  );
-};
-
-export const MessageList = memo(MessageListComponent);

package/src/client/VZSidebar/AIChat/StreamingMessage.tsx

@@ -1,35 +0,0 @@
-import Markdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import { memo } from 'react';
-
-interface StreamingMessageProps {
-  content: string;
-  status?: string;
-}
-
-const StreamingMessageComponent = ({
-  content,
-  status,
-}: StreamingMessageProps) => {
-  // Don't render if there's no content and no status
-  if (!content.trim()) {
-    return null;
-  }
-
-  return (
-    <div className="ai-chat-message assistant streaming">
-      {status && (
-        <div className="ai-chat-status">{status}</div>
-      )}
-      <div className="ai-chat-message-content">
-        <Markdown remarkPlugins={[remarkGfm]}>
-          {content}
-        </Markdown>
-      </div>
-    </div>
-  );
-};
-
-export const StreamingMessage = memo(
-  StreamingMessageComponent,
-);

package/src/client/VZSidebar/AIChat/ThinkingScratchpad.tsx

@@ -1,156 +0,0 @@
-import {
-  memo,
-  useRef,
-  useEffect,
-  useCallback,
-  useState,
-} from 'react';
-import Markdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-
-interface ThinkingScratchpadProps {
-  content: string;
-  isVisible: boolean;
-}
-
-const ThinkingScratchpadComponent = ({
-  content,
-  isVisible,
-}: ThinkingScratchpadProps) => {
-  const contentRef = useRef<HTMLDivElement>(null);
-  const [isUserScrolled, setIsUserScrolled] =
-    useState(false);
-  const [autoScrollEnabled, setAutoScrollEnabled] =
-    useState(true);
-  const scrollTimeoutRef =
-    useRef<ReturnType<typeof setTimeout>>();
-
-  // Check if the user is scrolled to the bottom
-  const isScrolledToBottom = useCallback(() => {
-    const container = contentRef.current;
-    if (!container) return true;
-
-    const threshold = 10; // Allow 10px tolerance for "at bottom"
-    const { scrollTop, scrollHeight, clientHeight } =
-      container;
-    return (
-      scrollHeight - scrollTop - clientHeight < threshold
-    );
-  }, []);
-
-  // Smooth scroll to bottom
-  const scrollToBottom = useCallback(() => {
-    if (!autoScrollEnabled) return;
-
-    const container = contentRef.current;
-    if (container) {
-      container.scrollTo({
-        top: container.scrollHeight,
-        behavior: 'smooth',
-      });
-    }
-  }, [autoScrollEnabled]);
-
-  // Handle scroll events to detect user manual scrolling
-  const handleScroll = useCallback(() => {
-    const container = contentRef.current;
-    if (!container) return;
-
-    const isAtBottom = isScrolledToBottom();
-
-    // Clear any existing timeout
-    if (scrollTimeoutRef.current) {
-      clearTimeout(scrollTimeoutRef.current);
-    }
-
-    // If user scrolled up from bottom, disable auto-scroll
-    if (!isAtBottom && !isUserScrolled) {
-      setIsUserScrolled(true);
-      setAutoScrollEnabled(false);
-    }
-
-    // If user scrolled back to bottom, re-enable auto-scroll after a brief delay
-    if (isAtBottom && isUserScrolled) {
-      scrollTimeoutRef.current = setTimeout(() => {
-        setIsUserScrolled(false);
-        setAutoScrollEnabled(true);
-      }, 300); // 300ms delay to prevent flickering
-    }
-  }, [isUserScrolled, isScrolledToBottom]);
-
-  // Auto-scroll when content changes, but only if auto-scroll is enabled
-  useEffect(() => {
-    if (
-      autoScrollEnabled &&
-      !isUserScrolled &&
-      isVisible &&
-      content
-    ) {
-      // Use a short debounce to prevent multiple scroll calls during rapid updates
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
-
-      scrollTimeoutRef.current = setTimeout(() => {
-        scrollToBottom();
-      }, 50); // 50ms debounce
-    }
-
-    return () => {
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
-    };
-  }, [
-    content,
-    autoScrollEnabled,
-    isUserScrolled,
-    isVisible,
-    scrollToBottom,
-  ]);
-
-  // Clean up timeout on unmount
-  useEffect(() => {
-    return () => {
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  // Reset scroll state when component becomes visible
-  useEffect(() => {
-    if (isVisible) {
-      setIsUserScrolled(false);
-      setAutoScrollEnabled(true);
-    }
-  }, [isVisible]);
-
-  if (!isVisible || !content) {
-    return null;
-  }
-
-  return (
-    <div className="thinking-scratchpad">
-      <div className="thinking-scratchpad-header">
-        <span className="thinking-scratchpad-icon">🧠</span>
-        <span className="thinking-scratchpad-title">
-          AI is thinking...
-        </span>
-      </div>
-      <div
-        className="thinking-scratchpad-content"
-        ref={contentRef}
-        onScroll={handleScroll}
-      >
-        <Markdown remarkPlugins={[remarkGfm]}>
-          {content}
-        </Markdown>
-      </div>
-    </div>
-  );
-};
-
-export const ThinkingScratchpad = memo(
-  ThinkingScratchpadComponent,
-);