Merge pull request #888 from senithkay/expression-editor-expanded-view

Expression editor expanded view

Author: kanushka

workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/ExpandedEditor.tsx

@@ -19,19 +19,39 @@
 import React, { useState, useEffect } from "react";
 import { createPortal } from "react-dom";
 import styled from "@emotion/styled";
-import { ThemeColors, Divider, Typography } from "@wso2/ui-toolkit";
-import { FormField } from "../../Form/types";
+import { ThemeColors, Divider, Typography, CompletionItem, FnSignatureDocumentation, HelperPaneHeight } from "@wso2/ui-toolkit";
+import { FormField, HelperpaneOnChangeOptions } from "../../Form/types";
 import { EditorMode } from "./modes/types";
 import { TextMode } from "./modes/TextMode";
 import { PromptMode } from "./modes/PromptMode";
+import { ExpressionMode } from "./modes/ExpressionMode";
 import { CompressButton } from "../MultiModeExpressionEditor/ChipExpressionEditor/components/FloatingButtonIcons";
+import { LineRange } from "@wso2/ballerina-core/lib/interfaces/common";
 
 interface ExpandedPromptEditorProps {
     isOpen: boolean;
     field: FormField;
     value: string;
     onClose: () => void;
     onSave: (value: string) => void;
+    onChange: (updatedValue: string, updatedCursorPosition: number) => void;
+    // Optional mode override (if not provided, will be auto-detected)
+    mode?: EditorMode;
+    // Expression mode specific props
+    completions?: CompletionItem[];
+    fileName?: string;
+    targetLineRange?: LineRange;
+    extractArgsFromFunction?: (value: string, cursorPosition: number) => Promise<{
+        label: string;
+        args: string[];
+        currentArgIndex: number;
+        documentation?: FnSignatureDocumentation;
+    }>;
+    getHelperPane?: (
+        value: string,
+        onChange: (value: string, options?: HelperpaneOnChangeOptions) => void,
+        helperPaneHeight: HelperPaneHeight
+    ) => React.ReactNode;
 }
 
 const ModalContainer = styled.div`
@@ -89,35 +109,42 @@ const ModalContent = styled.div`
  */
 const MODE_COMPONENTS: Record<EditorMode, React.ComponentType<any>> = {
     text: TextMode,
-    prompt: PromptMode
+    prompt: PromptMode,
+    expression: ExpressionMode
 };
 
 export const ExpandedEditor: React.FC<ExpandedPromptEditorProps> = ({
     isOpen,
     field,
     value,
     onClose,
+    onChange,
     onSave,
+    mode: propMode,
+    completions,
+    fileName,
+    targetLineRange,
+    extractArgsFromFunction,
+    getHelperPane
 }) => {
-    const [editedValue, setEditedValue] = useState(value);
     const promptFields = ["query", "instructions", "role"];
-    const defaultMode: EditorMode = promptFields.includes(field.key) ? "prompt" : "text";
+
+    // Determine mode - use prop if provided, otherwise auto-detect
+    const defaultMode: EditorMode = propMode ?? (
+        promptFields.includes(field.key) ? "prompt" : "text"
+    );
+
     const [mode] = useState<EditorMode>(defaultMode);
     const [showPreview, setShowPreview] = useState(false);
     const [mouseDownTarget, setMouseDownTarget] = useState<EventTarget | null>(null);
 
-    useEffect(() => {
-        setEditedValue(value);
-    }, [value, isOpen]);
-
     useEffect(() => {
         if (mode === "text") {
             setShowPreview(false);
         }
     }, [mode]);
 
     const handleMinimize = () => {
-        onSave(editedValue);
         onClose();
     };
 
@@ -140,13 +167,21 @@ export const ExpandedEditor: React.FC<ExpandedPromptEditorProps> = ({
 
     // Prepare props for the mode component
     const modeProps = {
-        value: editedValue,
-        onChange: setEditedValue,
+        value: value,
+        onChange: onChange,
         field,
         // Props for modes with preview support
         ...(mode === "prompt" && {
             isPreviewMode: showPreview,
             onTogglePreview: () => setShowPreview(!showPreview)
+        }),
+        // Props for expression mode
+        ...(mode === "expression" && {
+            completions,
+            fileName,
+            targetLineRange,
+            extractArgsFromFunction,
+            getHelperPane
         })
     };
 

workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/index.ts

@@ -17,4 +17,4 @@
  */
 
 export { ExpandedEditor } from "./ExpandedEditor";
-export type { EditorMode, EditorModeProps, EditorModeWithPreviewProps } from "./modes/types";
+export type { EditorMode, EditorModeProps, EditorModeWithPreviewProps, EditorModeExpressionProps } from "./modes/types";

workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/modes/ExpressionMode.tsx

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from "react";
+import styled from "@emotion/styled";
+import { EditorModeExpressionProps } from "./types";
+import { ChipExpressionBaseComponent } from "../../MultiModeExpressionEditor/ChipExpressionEditor/ChipExpressionBaseComponent";
+
+const ExpressionContainer = styled.div`
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+`;
+
+/**
+ * Expression mode editor - uses ChipExpressionBaseComponent in expanded mode
+ */
+export const ExpressionMode: React.FC<EditorModeExpressionProps> = ({
+    value,
+    onChange,
+    completions = [],
+    fileName,
+    targetLineRange,
+    extractArgsFromFunction,
+    getHelperPane
+}) => {
+    // Convert onChange signature from (value: string) => void to (value: string, cursorPosition: number) => void
+    const handleChange = (updatedValue: string, updatedCursorPosition: number) => {
+        onChange(updatedValue, updatedCursorPosition);
+    };
+
+    return (
+        <ExpressionContainer>
+            <ChipExpressionBaseComponent
+                value={value}
+                onChange={handleChange}
+                completions={completions}
+                fileName={fileName}
+                targetLineRange={targetLineRange}
+                extractArgsFromFunction={extractArgsFromFunction}
+                getHelperPane={getHelperPane}
+                isInExpandedMode={true}
+            />
+        </ExpressionContainer>
+    );
+};

workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/modes/PromptMode.tsx

@@ -77,7 +77,7 @@ export const PromptMode: React.FC<EditorModeWithPreviewProps> = ({
             if (!content.trim()) {
                 e.preventDefault();
                 const newValue = textBeforeCursor.substring(0, lastNewlineIndex + 1) + '\n' + textAfterCursor;
-                onChange(newValue);
+                onChange(newValue, cursorPosition);
                 // Set cursor position after both newlines
                 queueMicrotask(() => {
                     textarea.selectionStart = textarea.selectionEnd = lastNewlineIndex + 2;
@@ -88,7 +88,7 @@ export const PromptMode: React.FC<EditorModeWithPreviewProps> = ({
             // Continue the list
             e.preventDefault();
             const newValue = textBeforeCursor + '\n' + indent + marker + ' ' + textAfterCursor;
-            onChange(newValue);
+            onChange(newValue, cursorPosition);
             // Set cursor position after the list marker
             queueMicrotask(() => {
                 const newCursorPos = cursorPosition + indent.length + marker.length + 2;
@@ -106,7 +106,7 @@ export const PromptMode: React.FC<EditorModeWithPreviewProps> = ({
             if (!content.trim()) {
                 e.preventDefault();
                 const newValue = textBeforeCursor.substring(0, lastNewlineIndex + 1) + '\n' + textAfterCursor;
-                onChange(newValue);
+                onChange(newValue, cursorPosition);
                 // Set cursor position after both newlines
                 queueMicrotask(() => {
                     textarea.selectionStart = textarea.selectionEnd = lastNewlineIndex + 2;
@@ -118,7 +118,7 @@ export const PromptMode: React.FC<EditorModeWithPreviewProps> = ({
             e.preventDefault();
             const nextNumber = parseInt(number, 10) + 1;
             const newValue = textBeforeCursor + '\n' + indent + nextNumber + '. ' + textAfterCursor;
-            onChange(newValue);
+            onChange(newValue, cursorPosition);
             // Set cursor position after the list marker
             queueMicrotask(() => {
                 const newCursorPos = cursorPosition + indent.length + nextNumber.toString().length + 3;
@@ -136,7 +136,7 @@ export const PromptMode: React.FC<EditorModeWithPreviewProps> = ({
             if (!content.trim()) {
                 e.preventDefault();
                 const newValue = textBeforeCursor.substring(0, lastNewlineIndex + 1) + '\n' + textAfterCursor;
-                onChange(newValue);
+                onChange(newValue, cursorPosition);
                 // Set cursor position after both newlines
                 queueMicrotask(() => {
                     textarea.selectionStart = textarea.selectionEnd = lastNewlineIndex + 2;
@@ -147,7 +147,7 @@ export const PromptMode: React.FC<EditorModeWithPreviewProps> = ({
             // Continue the task list with unchecked box
             e.preventDefault();
             const newValue = textBeforeCursor + '\n' + indent + marker + ' [ ] ' + textAfterCursor;
-            onChange(newValue);
+            onChange(newValue, cursorPosition);
             // Set cursor position after the task marker
             queueMicrotask(() => {
                 const newCursorPos = cursorPosition + indent.length + marker.length + 6;
@@ -174,7 +174,7 @@ export const PromptMode: React.FC<EditorModeWithPreviewProps> = ({
                 <TextArea
                     id={TEXTAREA_ID}
                     value={value}
-                    onChange={(e) => onChange(e.target.value)}
+                    onChange={(e) => onChange(e.target.value, e.target.selectionStart)}
                     onKeyDown={handleKeyDown}
                     placeholder={placeholder}
                     autoFocus

workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/modes/TextMode.tsx

@@ -48,7 +48,7 @@ export const TextMode: React.FC<EditorModeProps> = ({ value, onChange, field })
     return (
         <TextArea
             value={value}
-            onChange={(e) => onChange(e.target.value)}
+            onChange={(e) => onChange(e.target.value, e.target.selectionStart)}
             placeholder={field.placeholder || "Enter your text here..."}
             autoFocus
         />

workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/modes/types.ts

@@ -16,7 +16,9 @@
  * under the License.
  */
 
-import { FormField } from "../../../Form/types";
+import { FormField, HelperpaneOnChangeOptions } from "../../../Form/types";
+import { CompletionItem, FnSignatureDocumentation, HelperPaneHeight } from "@wso2/ui-toolkit";
+import { LineRange } from "@wso2/ballerina-core/lib/interfaces/common";
 
 /**
  * Base props that all editor mode components must implement
@@ -25,7 +27,7 @@ export interface EditorModeProps {
     /** Current value of the editor */
     value: string;
     /** Callback when value changes */
-    onChange: (value: string) => void;
+    onChange: (value: string, updatedCursorPosition: number) => void;
     /** Field metadata (for accessing field properties if needed) */
     field: FormField;
 }
@@ -40,15 +42,41 @@ export interface EditorModeWithPreviewProps extends EditorModeProps {
     onTogglePreview: (enabled: boolean) => void;
 }
 
+/**
+ * Extended props for expression mode with completions and helper pane support
+ */
+export interface EditorModeExpressionProps extends EditorModeProps {
+    /** Completion items for autocomplete */
+    completions?: CompletionItem[];
+    /** File name for context */
+    fileName?: string;
+    /** Target line range for context */
+    targetLineRange?: LineRange;
+    /** Function to extract arguments from function calls */
+    extractArgsFromFunction?: (value: string, cursorPosition: number) => Promise<{
+        label: string;
+        args: string[];
+        currentArgIndex: number;
+        documentation?: FnSignatureDocumentation;
+    }>;
+    /** Helper pane renderer function */
+    getHelperPane?: (
+        value: string,
+        onChange: (value: string, options?: HelperpaneOnChangeOptions) => void,
+        helperPaneHeight: HelperPaneHeight
+    ) => React.ReactNode;
+}
+
 /**
  * Mode type identifier
  */
-export type EditorMode = "text" | "prompt";
+export type EditorMode = "text" | "prompt" | "expression";
 
 /**
  * Map of mode identifiers to their display labels
  */
 export const MODE_LABELS: Record<EditorMode, string> = {
     text: "Text",
-    prompt: "Prompt"
+    prompt: "Prompt",
+    expression: "Expression"
 };