vzcode 2.3.0 → 2.4.0

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

@@ -0,0 +1,176 @@
+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

@@ -0,0 +1,79 @@
+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;
+  chatId?: string;
+}
+
+const MessageComponent = ({
+  id,
+  role,
+  content,
+  timestamp,
+  isStreaming,
+  diffData,
+  chatId,
+}: MessageProps) => {
+  const { 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]);
+
+  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 &&
+          chatId &&
+          React.createElement(additionalWidgets, {
+            messageId: id,
+            chatId: chatId,
+            handleSendMessage,
+          })}
+      </div>
+      <div className="ai-chat-message-time">
+        {formattedTime}
+      </div>
+    </div>
+  );
+};
+
+export const Message = memo(MessageComponent);

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

@@ -0,0 +1,190 @@
+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) => {
+        return (
+          <Message
+            key={msg.id}
+            id={msg.id}
+            role={msg.role}
+            content={msg.content}
+            timestamp={msg.timestamp}
+            diffData={(msg as any).diffData}
+            chatId={chatId}
+          />
+        );
+      })}
+
+      {showThinkingScratchpad && (
+        <ThinkingScratchpad
+          content={aiScratchpad || ''}
+          isVisible={showThinkingScratchpad}
+        />
+      )}
+
+      {showTypingIndicator && <TypingIndicator />}
+      <div ref={messagesEndRef} />
+    </div>
+  );
+};
+
+export const MessageList = memo(MessageListComponent);

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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,156 @@
+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,
+);

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

@@ -0,0 +1,19 @@
+import { memo } from 'react';
+
+const TypingIndicatorComponent = () => {
+  return (
+    <div className="ai-chat-message assistant">
+      <div className="ai-chat-message-content">
+        <div className="ai-chat-typing">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const TypingIndicator = memo(
+  TypingIndicatorComponent,
+);