vzcode 1.60.0 → 1.62.0

package/src/client/VZSidebar/VisualEditor.tsx

@@ -0,0 +1,295 @@
+import {
+  useCallback,
+  useContext,
+  useState,
+  useRef,
+  useEffect,
+} from 'react';
+import { VZCodeContext } from '../VZCodeContext';
+import { VizContent, VizFileId } from '@vizhub/viz-types';
+import { VisualEditorConfigEntry } from '../../types';
+import { EmptyState } from './EmptyState';
+
+const CONFIG_FILE_NAME = 'config.json';
+
+export const VisualEditor = () => {
+  const {
+    files,
+    submitOperation,
+    runPrettierRef,
+    iframeRef,
+  } = useContext(VZCodeContext);
+
+  let configFileId: VizFileId | null = null;
+  for (const fileId in files) {
+    if (files[fileId].name === CONFIG_FILE_NAME) {
+      configFileId = fileId;
+      break;
+    }
+  }
+
+  if (configFileId === null) {
+    return (
+      <EmptyState>
+        To begin using the visual editor, create a
+        config.json.
+      </EmptyState>
+    );
+  }
+
+  let configData;
+
+  try {
+    configData = JSON.parse(files[configFileId].text);
+  } catch (error) {
+    return (
+      <EmptyState>
+        Your config.json file is not valid json.
+      </EmptyState>
+    );
+  }
+
+  if (!('visualEditorWidgets' in configData)) {
+    return (
+      <EmptyState>
+        To begin using the visual editor, make sure your
+        config.json has a key called "visualEditorWidgets",
+        whose value is the config for the visual editor.
+      </EmptyState>
+    );
+  }
+
+  if (!Array.isArray(configData.visualEditorWidgets)) {
+    return (
+      <EmptyState>
+        Your config.json file has "visualEditorWidgets" but
+        it is not an array. Please make sure
+        "visualEditorWidgets" is an array of widget
+        configurations.
+      </EmptyState>
+    );
+  }
+
+  const onInputUpdate = useCallback(
+    (
+      property: string,
+      previousValue: any,
+    ): React.FormEventHandler<HTMLInputElement> =>
+      (event) => {
+        //TODO: test race condition in which someone is editing the config file as another user uses the visual editor
+
+        const newValueOfConsistentType =
+          typeof previousValue === 'number'
+            ? parseFloat(event.currentTarget.value)
+            : event.currentTarget.value;
+
+        const newConfigData = {
+          ...configData,
+          [property]: newValueOfConsistentType,
+        };
+
+        submitOperation((document: VizContent) => ({
+          ...document,
+          files: {
+            ...files,
+            [configFileId]: {
+              name: 'config.json',
+              text: JSON.stringify(newConfigData, null, 2),
+            },
+          },
+        }));
+
+        iframeRef.current.contentWindow.postMessage({
+          [property]: newValueOfConsistentType,
+        });
+      },
+    [configData, files, configFileId],
+  );
+
+  const visualEditorWidgets: VisualEditorConfigEntry[] =
+    configData.visualEditorWidgets;
+
+  // State for advanced interactions
+  const [activeSlider, setActiveSlider] = useState<
+    string | null
+  >(null);
+  const [isDragging, setIsDragging] = useState<
+    string | null
+  >(null);
+  const [hoverValue, setHoverValue] = useState<
+    number | null
+  >(null);
+  const sliderRefs = useRef<{
+    [key: string]: HTMLInputElement | null;
+  }>({});
+
+  // Helper function to format values nicely
+  const formatValue = (
+    value: number,
+    min: number,
+    max: number,
+  ) => {
+    // Determine decimal places based on the range
+    const range = max - min;
+    const decimalPlaces =
+      range < 10 ? 2 : range < 100 ? 1 : 0;
+    return Number(value).toFixed(decimalPlaces);
+  };
+
+  // Helper function to calculate percentage for progress fill
+  const calculatePercentage = (
+    value: number,
+    min: number,
+    max: number,
+  ) => {
+    return ((value - min) / (max - min)) * 100;
+  };
+
+  // Enhanced input handler with animations
+  const onInputUpdateEnhanced = useCallback(
+    (
+      property: string,
+      previousValue: any,
+      widgetConfig: VisualEditorConfigEntry,
+    ): React.FormEventHandler<HTMLInputElement> =>
+      (event) => {
+        const newValueOfConsistentType =
+          typeof previousValue === 'number'
+            ? parseFloat(event.currentTarget.value)
+            : event.currentTarget.value;
+
+        const newConfigData = {
+          ...configData,
+          [property]: newValueOfConsistentType,
+        };
+
+        submitOperation((document: VizContent) => ({
+          ...document,
+          files: {
+            ...files,
+            [configFileId]: {
+              name: 'config.json',
+              text: JSON.stringify(newConfigData, null, 2),
+            },
+          },
+        }));
+
+        iframeRef.current.contentWindow.postMessage({
+          [property]: newValueOfConsistentType,
+        });
+
+        // Trigger value change animation
+        const sliderElement = sliderRefs.current[property];
+        if (sliderElement) {
+          sliderElement.classList.add('value-changed');
+          setTimeout(() => {
+            sliderElement.classList.remove('value-changed');
+          }, 300);
+        }
+      },
+    [configData, files, configFileId],
+  );
+
+  // Mouse event handlers for enhanced interactions
+  const handleMouseDown = (property: string) => {
+    setIsDragging(property);
+    setActiveSlider(property);
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(null);
+  };
+
+  const handleMouseEnter = (property: string) => {
+    setActiveSlider(property);
+  };
+
+  const handleMouseLeave = () => {
+    setActiveSlider(null);
+    setHoverValue(null);
+  };
+
+  // Add global mouse up listener
+  useEffect(() => {
+    const handleGlobalMouseUp = () => {
+      setIsDragging(null);
+    };
+
+    document.addEventListener(
+      'mouseup',
+      handleGlobalMouseUp,
+    );
+    return () => {
+      document.removeEventListener(
+        'mouseup',
+        handleGlobalMouseUp,
+      );
+    };
+  }, []);
+
+  return (
+    <div className="visual-editor">
+      {visualEditorWidgets.map((widgetConfig, index) => {
+        if (widgetConfig.type === 'number') {
+          const currentValue =
+            configData[widgetConfig.property];
+          const percentage = calculatePercentage(
+            currentValue,
+            widgetConfig.min,
+            widgetConfig.max,
+          );
+
+          return (
+            <div
+              key={widgetConfig.property}
+              className="visual-editor-slider"
+            >
+              <div className="slider-header">
+                <label
+                  htmlFor={widgetConfig.property}
+                  className="slider-label"
+                >
+                  {widgetConfig.label}
+                </label>
+                <span className="slider-value">
+                  {formatValue(
+                    currentValue,
+                    widgetConfig.min,
+                    widgetConfig.max,
+                  )}
+                </span>
+              </div>
+              <div className="slider-container">
+                <input
+                  type="range"
+                  id={widgetConfig.property}
+                  className="slider-input"
+                  min={widgetConfig.min}
+                  max={widgetConfig.max}
+                  step="any"
+                  onInput={onInputUpdate(
+                    widgetConfig.property,
+                    configData[widgetConfig.property],
+                  )}
+                  defaultValue={currentValue}
+                />
+                <div
+                  className="slider-track-fill"
+                  style={{ width: `${percentage}%` }}
+                />
+              </div>
+              <div className="slider-bounds">
+                <span className="min-value">
+                  {widgetConfig.min}
+                </span>
+                <span className="max-value">
+                  {widgetConfig.max}
+                </span>
+              </div>
+            </div>
+          );
+        }
+      })}
+    </div>
+  );
+};

package/src/client/VZSidebar/index.tsx

@@ -26,6 +26,7 @@ import {
   QuestionMarkSVG,
   SearchSVG,
   SparklesSVG,
+  AdjustmentSVG,
 } from '../Icons';
 import { MicSVG } from '../Icons/MicSVG';
 import { sortFileTree } from '../sortFileTree';
@@ -41,6 +42,7 @@ import {
   enableAIChat,
 } from '../featureFlags';
 import './styles.scss';
+import { VisualEditor } from './VisualEditor';
 
 const enableConnectionStatus = true;
 
@@ -113,6 +115,12 @@ export const VZSidebar = ({
       <strong>Edit with AI</strong>
     </div>
   ),
+
+  visualEditorToolTipText = (
+    <div>
+      <strong>Visual Editor</strong>
+    </div>
+  ),
 }: {
   createFileTooltipText?: React.ReactNode;
   createDirTooltipText?: React.ReactNode;
@@ -125,6 +133,7 @@ export const VZSidebar = ({
   disableAutoFollowTooltipText?: React.ReactNode;
   voiceChatToolTipText?: React.ReactNode;
   aiChatToolTipText?: React.ReactNode;
+  visualEditorToolTipText?: React.ReactNode;
 }) => {
   const {
     files,
@@ -133,6 +142,8 @@ export const VZSidebar = ({
     setIsDocOpen,
     isSearchOpen,
     setIsSearchOpen,
+    isVisualEditorOpen,
+    setIsVisualEditorOpen,
     isAIChatOpen,
     setIsAIChatOpen,
     handleOpenCreateFileModal,
@@ -335,6 +346,7 @@ export const VZSidebar = ({
               onClick={() => {
                 setIsSearchOpen(false);
                 setIsAIChatOpen(false);
+                setIsVisualEditorOpen(false);
                 setSidebarView(false); // Switch to files view
               }}
             >
@@ -356,6 +368,7 @@ export const VZSidebar = ({
               onClick={() => {
                 setIsSearchOpen(true);
                 setIsAIChatOpen(false);
+                setIsVisualEditorOpen(false);
                 setSidebarView(false); // Switch to files view (search uses same width as files)
               }}
             >
@@ -363,6 +376,50 @@ export const VZSidebar = ({
             </i>
           </OverlayTrigger>
 
+          {enableAIChat && (
+            <OverlayTrigger
+              placement="right"
+              overlay={
+                <Tooltip id="ai-chat-tooltip">
+                  {aiChatToolTipText}
+                </Tooltip>
+              }
+            >
+              <i
+                id="ai-chat-icon"
+                className="icon-button icon-button-dark"
+                onClick={() => {
+                  setIsAIChatOpen(true);
+                  setIsSearchOpen(false);
+                  setIsVisualEditorOpen(false);
+                }}
+              >
+                <SparklesSVG />
+              </i>
+            </OverlayTrigger>
+          )}
+
+          <OverlayTrigger
+            placement="right"
+            overlay={
+              <Tooltip id="visual-editor-tooltip">
+                {visualEditorToolTipText}
+              </Tooltip>
+            }
+          >
+            <i
+              id="visual-editor-icon"
+              className="icon-button icon-button-dark"
+              onClick={() => {
+                setIsVisualEditorOpen(true);
+                setIsAIChatOpen(false);
+                setIsSearchOpen(false);
+              }}
+            >
+              <AdjustmentSVG />
+            </i>
+          </OverlayTrigger>
+
           <OverlayTrigger
             placement="right"
             overlay={
@@ -516,6 +573,10 @@ export const VZSidebar = ({
             <div className="sidebar-search">
               <Search />
             </div>
+          ) : isVisualEditorOpen ? (
+            <div className="sidebar-visual-editor">
+              <VisualEditor />
+            </div>
           ) : (
             <div className="sidebar-files">
               {isDragOver ? (
@@ -569,6 +630,7 @@ export const VZSidebar = ({
               onClick={handleExportToZip}
               title="Export files to ZIP"
             >
+              <i className="bi bi-download"></i>
               {exportButtonText}
             </button>
           )}
@@ -578,6 +640,7 @@ export const VZSidebar = ({
               onClick={handleCopyForAI}
               title="Copy files formatted for AI"
             >
+              <i className="bi bi-clipboard"></i>
               {copyButtonText}
             </button>
           )}
@@ -587,6 +650,7 @@ export const VZSidebar = ({
             onClick={handlePasteForAI}
             title="Paste files from AI"
           >
+            <i className="bi bi-clipboard-plus"></i>
             {pasteButtonText}
           </button>
         </div>

package/src/client/VZSidebar/styles.scss

@@ -67,7 +67,8 @@
 
   .sidebar-files,
   .sidebar-search,
-  .sidebar-ai-chat {
+  .sidebar-ai-chat,
+  .sidebar-visual-editor {
     width: 100%;
   }
 
@@ -317,6 +318,10 @@
       cursor: pointer;
       transition: all 0.2s ease;
 
+      i {
+        margin-right: 8px;
+      }
+
       &:hover {
         background: var(--vh-color-hover-dark);
         border-color: var(--vh-color-neutral-04);
@@ -382,4 +387,211 @@
     color: #000000;
     z-index: 1;
   }
+
+  // Visual Editor Slider Styles
+  .visual-editor {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+
+  .visual-editor-slider {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px 10px;
+    background: var(--vh-color-neutral-01);
+    border: 1px solid var(--vh-color-neutral-02);
+    border-radius: 8px;
+    transition: all 0.2s ease;
+    width: 100%;
+    box-sizing: border-box;
+
+    &:hover {
+      border-color: var(--vh-color-neutral-03);
+      background: rgba(255, 255, 255, 0.02);
+    }
+  }
+
+  .slider-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 4px;
+  }
+
+  .slider-label {
+    font-family: var(--vzcode-font-family);
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--vh-color-neutral-04);
+    margin: 0;
+  }
+
+  .slider-value {
+    font-family: var(--vzcode-font-family);
+    font-size: 13px;
+    font-weight: 600;
+    color: #66ecff; // SKY color from theme
+    background: rgba(102, 236, 255, 0.1);
+    padding: 2px 6px;
+    border-radius: 4px;
+    min-width: 40px;
+    text-align: center;
+  }
+
+  .slider-container {
+    position: relative;
+    height: 20px;
+    display: flex;
+    align-items: center;
+  }
+
+  .slider-input {
+    width: 100%;
+    height: 6px;
+    background: transparent;
+    outline: none;
+    border: none;
+    cursor: pointer;
+    position: relative;
+    z-index: 2;
+
+    // Remove default styling
+    -webkit-appearance: none;
+    appearance: none;
+
+    // Custom track
+    &::-webkit-slider-track {
+      width: 100%;
+      height: 6px;
+      background: var(--vh-color-neutral-02);
+      border-radius: 3px;
+      border: none;
+    }
+
+    &::-moz-range-track {
+      width: 100%;
+      height: 6px;
+      background: var(--vh-color-neutral-02);
+      border-radius: 3px;
+      border: none;
+    }
+
+    // Custom thumb
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 18px;
+      height: 18px;
+      background: linear-gradient(135deg, #66ecff, #00ffff);
+      border-radius: 50%;
+      cursor: pointer;
+      border: 2px solid var(--vh-color-neutral-01);
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+      transition: all 0.2s ease;
+      position: relative;
+      z-index: 3;
+
+      &:hover {
+        transform: scale(1.1);
+        box-shadow: 0 3px 8px rgba(102, 236, 255, 0.4);
+      }
+
+      &:active {
+        transform: scale(1.05);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+      }
+    }
+
+    &::-moz-range-thumb {
+      width: 18px;
+      height: 18px;
+      background: linear-gradient(135deg, #66ecff, #00ffff);
+      border-radius: 50%;
+      cursor: pointer;
+      border: 2px solid var(--vh-color-neutral-01);
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+      transition: all 0.2s ease;
+
+      &:hover {
+        transform: scale(1.1);
+        box-shadow: 0 3px 8px rgba(102, 236, 255, 0.4);
+      }
+
+      &:active {
+        transform: scale(1.05);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+      }
+    }
+
+    // Focus styles
+    &:focus {
+      outline: none;
+
+      &::-webkit-slider-thumb {
+        box-shadow: 0 0 0 3px rgba(102, 236, 255, 0.3);
+      }
+
+      &::-moz-range-thumb {
+        box-shadow: 0 0 0 3px rgba(102, 236, 255, 0.3);
+      }
+    }
+  }
+
+  .slider-track-fill {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    height: 6px;
+    background: linear-gradient(90deg, #77fd8c, #66ecff);
+    border-radius: 3px;
+    transform: translateY(-50%);
+    transition: width 0.1s ease;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .slider-bounds {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 2px;
+  }
+
+  .min-value,
+  .max-value {
+    font-family: var(--vzcode-font-family);
+    font-size: 11px;
+    color: var(--vh-color-neutral-03);
+    font-weight: 400;
+  }
+
+  // Empty State Component Styles
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 24px 16px;
+    margin: 16px;
+    background: var(--vh-color-neutral-01);
+    border: 1px solid var(--vh-color-neutral-02);
+    border-radius: 8px;
+    text-align: center;
+    font-family: var(--vzcode-font-family);
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--vh-color-neutral-04);
+    line-height: 1.5;
+    min-height: 80px;
+
+    &:hover {
+      border-color: var(--vh-color-neutral-03);
+      background: rgba(255, 255, 255, 0.02);
+    }
+  }
 }

package/src/client/bootstrap.ts

@@ -12,6 +12,9 @@ import Tooltip from 'react-bootstrap/cjs/Tooltip.js';
 // Pull in custom CSS from vizhub-ui.
 import 'vizhub-ui/dist/vizhub-ui.css';
 
+// Pull in Bootstrap Icons CSS.
+import 'bootstrap-icons/font/bootstrap-icons.css';
+
 export {
   Form,
   Button,

package/src/client/useActions.ts

@@ -64,6 +64,17 @@ export const useActions = (
     [dispatch],
   );
 
+  // True to show the visual editor
+  const setIsVisualEditorOpen = useCallback(
+    (value: boolean) => {
+      dispatch({
+        type: 'set_is_visual_editor_open',
+        value: value,
+      });
+    },
+    [dispatch],
+  );
+
   // True to show the settings modal.
   const setIsSearchOpen = useCallback(
     (value: boolean) => {
@@ -253,6 +264,7 @@ export const useActions = (
     openTab,
     closeTabs,
     setTheme,
+    setIsVisualEditorOpen,
     setIsSearchOpen,
     setSearch,
     setSearchResults,