npm - vzcode - Versions diffs - 1.56.0 → 1.57.0 - Mend

vzcode 1.56.0 → 1.57.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/assets/{index-COSAnnol.css → index-CE_xP06t.css} +1 -1
package/dist/assets/{index-Cp6YlJo2.js → index-DqIc-0Gp.js} +21 -20
package/dist/index.html +2 -2
package/package.json +1 -1
package/src/client/VZSidebar/AIChat/ChatInput.tsx +20 -21
package/src/client/VZSidebar/AIChat/DiffView.scss +8 -0
package/src/client/VZSidebar/AIChat/DiffView.tsx +105 -1
package/src/client/VZSidebar/AIChat/StreamingMessage.tsx +1 -1
package/src/client/VZSidebar/AIChat/index.tsx +158 -153
package/src/client/VZSidebar/AIChat/styles.scss +52 -11
package/src/server/aiChatHandler/llmStreaming.ts +2 -2

package/dist/index.html CHANGED Viewed

@@ -20,8 +20,8 @@
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-Cp6YlJo2.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-COSAnnol.css">
+    <script type="module" crossorigin src="/assets/index-DqIc-0Gp.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CE_xP06t.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "1.56.0",
+  "version": "1.57.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",

package/src/client/VZSidebar/AIChat/ChatInput.tsx CHANGED Viewed

@@ -112,7 +112,7 @@ const ChatInputComponent = ({
       <Form.Group className="ai-chat-input-group">
         <Form.Control
           as="textarea"
-          rows={2}
+          rows={5}
           value={aiChatMessage}
           onChange={handleChange}
           onKeyDown={handleKeyDown}
@@ -126,26 +126,25 @@ const ChatInputComponent = ({
           disabled={isLoading}
           aria-label="Chat message input"
         />
-        {aiChatMessage && (
-          <div className="ai-chat-input-info">
-            <span className="ai-chat-hint">
-              Shift+Enter for new line
-            </span>
-            <span className="ai-chat-hint">
-              Press Enter to send
-            </span>
-          </div>
-        )}
-        <Button
-          variant="primary"
-          onClick={handleSendClick}
-          disabled={!aiChatMessage.trim() || isLoading}
-          className="ai-chat-send-button"
-          aria-label="Send message"
-          title="Send message (Enter)"
-        >
-          Send
-        </Button>
+        <div className="ai-chat-input-footer">
+          <span className="ai-chat-hint">
+            {aiChatMessage ? 'Press Enter to send' : ''}
+          </span>
+          <Button
+            variant={
+              aiChatMessage.trim()
+                ? 'primary'
+                : 'outline-secondary'
+            }
+            onClick={handleSendClick}
+            disabled={!aiChatMessage.trim() || isLoading}
+            className="ai-chat-send-button"
+            aria-label="Send message"
+            title="Send message (Enter)"
+          >
+            Send
+          </Button>
+        </div>
       </Form.Group>
     </div>
   );

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

@@ -119,6 +119,14 @@
       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;

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

@@ -1,4 +1,9 @@
-import React from 'react';
+import React, {
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
 import {
   UnifiedFilesDiff,
   parseUnifiedDiffStats,
@@ -7,6 +12,8 @@ import {
 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;
@@ -15,6 +22,10 @@ interface DiffViewProps {
 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,
   );
@@ -42,6 +53,98 @@ export const DiffView: React.FC<DiffViewProps> = ({
     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">
@@ -65,6 +168,7 @@ export const DiffView: React.FC<DiffViewProps> = ({
       <div
         className="diff-files"
+        ref={diffContainerRef}
         dangerouslySetInnerHTML={{ __html: diffHtml }}
       />
     </div>

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

@@ -12,7 +12,7 @@ const StreamingMessageComponent = ({
   status,
 }: StreamingMessageProps) => {
   // Don't render if there's no content and no status
-  if (!content.trim() && !status) {
+  if (!content.trim()) {
     return null;
   }

package/src/client/VZSidebar/AIChat/index.tsx CHANGED Viewed

@@ -146,9 +146,15 @@ export const AIChat = () => {
         // The backend handles all ShareDB operations for successful responses
       } catch (error) {
         console.error('Error getting AI response:', error);
-        setErrorMessage(
-          'Failed to send message. Please try again.',
-        );
+        // Fail silently in case of timeout,
+        // which happens frequently with the longer running LLM calls.
+        // TODO refactor this so that the network request to the server
+        // always returns immediately, and we track the `isLoading` state
+        // within the ShareDB document itself.
+        //
+        // setErrorMessage(
+        //   'Failed to send message. Please try again.',
+        // );
       } finally {
         setIsLoading(false);
       }
@@ -214,159 +220,158 @@ export const AIChat = () => {
   return (
     <div className="ai-chat-container">
-      <div
-        style={{
-          padding: '10px',
-          flex: 1,
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-      >
-        {isEmptyState ? (
-          <div className="ai-chat-empty">
-            <div className="ai-chat-empty-icon">✨</div>
-            <h3 className="ai-chat-empty-title">
-              Edit with AI
-            </h3>
-            <div className="ai-chat-empty-text">
-              How can I help you?
-            </div>
-            {showSuggestedRequests && (
-              <div className="ai-chat-empty-examples">
-                {aiChatMode === 'ask' ? (
-                  <>
-                    <h4>Try asking questions like:</h4>
-                    <div className="ai-chat-suggested-prompts">
-                      <button
-                        className="ai-chat-suggested-prompt"
-                        onClick={() =>
-                          handleSendMessage(
-                            'Explain how this works',
-                          )
-                        }
-                      >
-                        "Explain how this works"
-                      </button>
-                      <button
-                        className="ai-chat-suggested-prompt"
-                        onClick={() =>
-                          handleSendMessage(
-                            'How could I change it so that the circles are bigger?',
-                          )
-                        }
-                      >
-                        "How could I change it so that the
-                        circles are bigger?"
-                      </button>
-                      <button
-                        className="ai-chat-suggested-prompt"
-                        onClick={() =>
-                          handleSendMessage(
-                            'What does this function do?',
-                          )
-                        }
-                      >
-                        "What does this function do?"
-                      </button>
-                      <button
-                        className="ai-chat-suggested-prompt"
-                        onClick={() =>
-                          handleSendMessage(
-                            'How can I make this more accessible?',
-                          )
-                        }
-                      >
-                        "How can I make this more
-                        accessible?"
-                      </button>
-                    </div>
-                  </>
-                ) : (
-                  <>
-                    <h4>Try edit requests like these:</h4>
-                    <div className="ai-chat-suggested-prompts">
-                      <button
-                        className="ai-chat-suggested-prompt"
-                        onClick={() =>
-                          handleSendMessage(
-                            'Change the circles to squares',
-                          )
-                        }
-                      >
-                        "Change the circles to squares"
-                      </button>
-                      <button
-                        className="ai-chat-suggested-prompt"
-                        onClick={() =>
-                          handleSendMessage(
-                            'Add a button that toggles the animation',
-                          )
-                        }
-                      >
-                        "Add a button that toggles the
-                        animation"
-                      </button>
-                      <button
-                        className="ai-chat-suggested-prompt"
-                        onClick={() =>
-                          handleSendMessage(
-                            'Fix the CSS so the layout is responsive',
-                          )
-                        }
-                      >
-                        "Fix the CSS so the layout is
-                        responsive"
-                      </button>
-                      <button
-                        className="ai-chat-suggested-prompt"
-                        onClick={() =>
-                          handleSendMessage(
-                            'Refactor this function to use async/await',
-                          )
-                        }
-                      >
-                        "Refactor this function to use
-                        async/await"
-                      </button>
-                    </div>
-                  </>
-                )}
-              </div>
-            )}
-            {showSuggestedRequests && (
+      <div className="ai-chat-content">
+        <div className="ai-chat-messages-container">
+          {isEmptyState ? (
+            <div className="ai-chat-empty">
+              <div className="ai-chat-empty-icon">✨</div>
+              <h3 className="ai-chat-empty-title">
+                Edit with AI
+              </h3>
               <div className="ai-chat-empty-text">
-                {aiChatMode === 'ask'
-                  ? 'Type your question below to get started!'
-                  : 'Type your edit request below to get started!'}
+                How can I help you?
               </div>
-            )}
-          </div>
-        ) : (
-          <MessageList
-            messages={messages}
-            aiStatus={aiStatus}
-            isLoading={isLoading}
-            chatId={currentChatId}
-            aiScratchpad={aiScratchpad}
-          />
-        )}
-        {errorMessage && (
-          <div className="ai-chat-error">
-            <div className="ai-chat-error-content">
-              <span className="ai-chat-error-icon">⚠️</span>
-              <span className="ai-chat-error-message">
-                {errorMessage}
-              </span>
-              <button
-                className="ai-chat-error-dismiss"
-                onClick={() => setErrorMessage(null)}
-                aria-label="Dismiss error"
-              >
-                ×
-              </button>
+              {showSuggestedRequests && (
+                <div className="ai-chat-empty-examples">
+                  {aiChatMode === 'ask' ? (
+                    <>
+                      <h4>Try asking questions like:</h4>
+                      <div className="ai-chat-suggested-prompts">
+                        <button
+                          className="ai-chat-suggested-prompt"
+                          onClick={() =>
+                            handleSendMessage(
+                              'Explain how this works',
+                            )
+                          }
+                        >
+                          "Explain how this works"
+                        </button>
+                        <button
+                          className="ai-chat-suggested-prompt"
+                          onClick={() =>
+                            handleSendMessage(
+                              'How could I change it so that the circles are bigger?',
+                            )
+                          }
+                        >
+                          "How could I change it so that the
+                          circles are bigger?"
+                        </button>
+                        <button
+                          className="ai-chat-suggested-prompt"
+                          onClick={() =>
+                            handleSendMessage(
+                              'What does this function do?',
+                            )
+                          }
+                        >
+                          "What does this function do?"
+                        </button>
+                        <button
+                          className="ai-chat-suggested-prompt"
+                          onClick={() =>
+                            handleSendMessage(
+                              'How can I make this more accessible?',
+                            )
+                          }
+                        >
+                          "How can I make this more
+                          accessible?"
+                        </button>
+                      </div>
+                    </>
+                  ) : (
+                    <>
+                      <h4>Try edit requests like these:</h4>
+                      <div className="ai-chat-suggested-prompts">
+                        <button
+                          className="ai-chat-suggested-prompt"
+                          onClick={() =>
+                            handleSendMessage(
+                              'Change the circles to squares',
+                            )
+                          }
+                        >
+                          "Change the circles to squares"
+                        </button>
+                        <button
+                          className="ai-chat-suggested-prompt"
+                          onClick={() =>
+                            handleSendMessage(
+                              'Add a button that toggles the animation',
+                            )
+                          }
+                        >
+                          "Add a button that toggles the
+                          animation"
+                        </button>
+                        <button
+                          className="ai-chat-suggested-prompt"
+                          onClick={() =>
+                            handleSendMessage(
+                              'Fix the CSS so the layout is responsive',
+                            )
+                          }
+                        >
+                          "Fix the CSS so the layout is
+                          responsive"
+                        </button>
+                        <button
+                          className="ai-chat-suggested-prompt"
+                          onClick={() =>
+                            handleSendMessage(
+                              'Refactor this function to use async/await',
+                            )
+                          }
+                        >
+                          "Refactor this function to use
+                          async/await"
+                        </button>
+                      </div>
+                    </>
+                  )}
+                </div>
+              )}
+              {showSuggestedRequests && (
+                <div className="ai-chat-empty-text">
+                  {aiChatMode === 'ask'
+                    ? 'Type your question below to get started!'
+                    : 'Type your edit request below to get started!'}
+                </div>
+              )}
             </div>
-          </div>
-        )}
+          ) : (
+            <MessageList
+              messages={messages}
+              aiStatus={aiStatus}
+              isLoading={isLoading}
+              chatId={currentChatId}
+              aiScratchpad={aiScratchpad}
+            />
+          )}
+          {errorMessage && (
+            <div className="ai-chat-error">
+              <div className="ai-chat-error-content">
+                <span className="ai-chat-error-icon">
+                  ⚠️
+                </span>
+                <span className="ai-chat-error-message">
+                  {errorMessage}
+                </span>
+                <button
+                  className="ai-chat-error-dismiss"
+                  onClick={() => setErrorMessage(null)}
+                  aria-label="Dismiss error"
+                >
+                  ×
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="ai-chat-input-fixed">
         <ChatInput
           aiChatMessage={aiChatMessage}
           setAIChatMessage={setAIChatMessage}

package/src/client/VZSidebar/AIChat/styles.scss CHANGED Viewed

@@ -5,6 +5,26 @@
   padding: 0;
 }
+.ai-chat-content {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.ai-chat-messages-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+  padding-bottom: 0;
+}
+.ai-chat-input-fixed {
+  flex-shrink: 0;
+  padding: 10px;
+  padding-top: 0;
+}
 .ai-chat-empty {
   flex: 1;
   display: flex;
@@ -365,6 +385,7 @@
 .ai-chat-input-container {
   border-top: 1px solid var(--vh-color-neutral-02);
   padding-top: 10px;
+  background: var(--vh-color-neutral-01);
 }
 .ai-chat-mode-toggle {
@@ -427,11 +448,12 @@
     border: 1px solid var(--vh-color-neutral-03) !important;
     color: var(--vh-color-neutral-04) !important;
     border-radius: 8px;
-    padding: 8px 10px;
+    padding: 10px 12px;
     font-size: 14px;
     font-family: var(--vzcode-font-family);
     resize: none;
-    min-height: 36px;
+    min-height: 48px;
+    line-height: 1.4;
     &:focus {
       outline: none !important;
@@ -450,37 +472,56 @@
     }
   }
-  .ai-chat-input-info {
+  .ai-chat-input-footer {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     font-size: 12px;
     color: var(--vh-color-neutral-03);
-    margin-bottom: 6px;
+    min-height: 40px; // Prevent layout jumping
     .ai-chat-hint {
       font-style: italic;
+      flex: 1;
     }
   }
   .ai-chat-send-button {
-    background: var(--vh-color-primary-01);
-    border: none;
-    color: white;
     border-radius: 8px;
     padding: 8px 16px;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
-    transition: background-color 0.2s ease;
-    align-self: flex-end;
+    transition: all 0.2s ease;
     min-width: 80px;
+    flex-shrink: 0;
-    &:hover:not(:disabled) {
-      background: var(--vh-color-primary-02);
+    &.btn-primary {
+      background: var(--vh-color-primary-01);
+      border-color: var(--vh-color-primary-01);
+      color: white;
+      &:hover:not(:disabled) {
+        background: var(--vh-color-primary-02);
+        border-color: var(--vh-color-primary-02);
+      }
+    }
+    &.btn-outline-secondary {
+      background: transparent;
+      border-color: var(--vh-color-neutral-03);
+      color: var(--vh-color-neutral-03);
+      &:hover:not(:disabled) {
+        background: var(--vh-color-neutral-03);
+        color: var(--vh-color-neutral-01);
+      }
     }
     &:disabled {
       background: var(--vh-color-neutral-03);
+      border-color: var(--vh-color-neutral-03);
+      color: var(--vh-color-neutral-02);
       cursor: not-allowed;
     }
   }