Add support for inserting multi-modal documents via the helper pane

workspaces/ballerina/ballerina-side-panel/package.json

@@ -28,6 +28,8 @@
         "lodash": "~4.17.21",
         "react-hook-form": "7.56.4",
         "react-markdown": "~10.1.0",
+        "rehype-raw": "^7.0.0",
+        "remark-gfm": "^4.0.1",
         "@github/markdown-toolbar-element": "^2.2.3",
         "@codemirror/commands": "~6.10.0",
         "@codemirror/state": "~6.5.2",

workspaces/ballerina/ballerina-side-panel/src/components/Form/types.ts

@@ -20,6 +20,7 @@ import { RefObject } from "react";
 import { DiagnosticMessage, FormDiagnostics, TextEdit, PropertyModel, LinePosition, LineRange, ExpressionProperty, Metadata, RecordTypeField, Imports, ConfigProperties } from "@wso2/ballerina-core";
 import { ParamConfig } from "../ParamManager/ParamManager";
 import { CompletionItem, FormExpressionEditorRef, HelperPaneHeight, HelperPaneOrigin, OptionProps } from "@wso2/ui-toolkit";
+import { InputMode } from "../editors/MultiModeExpressionEditor/ChipExpressionEditor/types";
 
 export type FormValues = {
     [key: string]: any;
@@ -184,7 +185,8 @@ type FormHelperPaneConditionalProps = {
         helperPaneHeight: HelperPaneHeight,
         recordTypeField?: RecordTypeField,
         isAssignIdentifier?: boolean,
-        valueTypeConstraint?: string | string[]
+        valueTypeConstraint?: string | string[],
+        inputMode?: InputMode
     ) => JSX.Element;
     helperPaneOrigin?: HelperPaneOrigin;
     helperPaneHeight: HelperPaneHeight;

workspaces/ballerina/ballerina-side-panel/src/components/ModeSwitcher/styles.tsx

@@ -94,7 +94,8 @@ export const SwitchWrapper = styled.div`
   position: relative;
   display: inline-flex;
   align-items: center;
-  width: 112px;
+  min-width: 112px;
+  width: max-content;
   height: 24px;
   margin-top: 2px;
 `;

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

@@ -155,10 +155,9 @@ export const EditorFactory = (props: FormFieldEditorProps) => {
 
             />
         );
-    } else if (!field.items && (field.type === "EXPRESSION" || field.type === "LV_EXPRESSION" || field.type == "ACTION_OR_EXPRESSION") && field.editable) {
-        // Expression field is a inline expression editor
+    } else if (!field.items && (field.type === "RAW_TEMPLATE" || field.valueTypeConstraint === "ai:Prompt") && field.editable) {
         return (
-            <ContextAwareExpressionEditor
+            <ContextAwareRawExpressionEditor
                 field={field}
                 openSubPanel={openSubPanel}
                 subPanelView={subPanelView}
@@ -168,11 +167,17 @@ export const EditorFactory = (props: FormFieldEditorProps) => {
                 recordTypeField={recordTypeFields?.find(recordField => recordField.key === field.key)}
             />
         );
-    } else if (!field.items && field.type === "RAW_TEMPLATE" && field.editable) {
+    } else if (!field.items && (field.type === "EXPRESSION" || field.type === "LV_EXPRESSION" || field.type == "ACTION_OR_EXPRESSION") && field.editable) {
+        // Expression field is a inline expression editor
         return (
-            <ContextAwareRawExpressionEditor
+            <ContextAwareExpressionEditor
                 field={field}
+                openSubPanel={openSubPanel}
+                subPanelView={subPanelView}
+                handleOnFieldFocus={handleOnFieldFocus}
+                onBlur={onBlur}
                 autoFocus={autoFocus}
+                recordTypeField={recordTypeFields?.find(recordField => recordField.key === field.key)}
             />
         );
     } else if (field.type === "VIEW") {

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

@@ -25,8 +25,12 @@ import { EditorMode } from "./modes/types";
 import { TextMode } from "./modes/TextMode";
 import { PromptMode } from "./modes/PromptMode";
 import { ExpressionMode } from "./modes/ExpressionMode";
+import { TemplateMode } from "./modes/TemplateMode";
 import { MinimizeIcon } from "../MultiModeExpressionEditor/ChipExpressionEditor/components/FloatingButtonIcons";
 import { LineRange } from "@wso2/ballerina-core/lib/interfaces/common";
+import { DiagnosticMessage } from "@wso2/ballerina-core";
+import { InputMode } from "../MultiModeExpressionEditor/ChipExpressionEditor/types";
+import { FieldError } from "react-hook-form";
 
 interface ExpandedPromptEditorProps {
     isOpen: boolean;
@@ -41,6 +45,8 @@ interface ExpandedPromptEditorProps {
     completions?: CompletionItem[];
     fileName?: string;
     targetLineRange?: LineRange;
+    sanitizedExpression?: (value: string) => string;
+    rawExpression?: (value: string) => string;
     extractArgsFromFunction?: (value: string, cursorPosition: number) => Promise<{
         label: string;
         args: string[];
@@ -52,6 +58,9 @@ interface ExpandedPromptEditorProps {
         onChange: (value: string, options?: HelperpaneOnChangeOptions) => void,
         helperPaneHeight: HelperPaneHeight
     ) => React.ReactNode;
+    // Error diagnostics props
+    error?: FieldError;
+    formDiagnostics?: DiagnosticMessage[];
 }
 
 const ModalContainer = styled.div`
@@ -97,7 +106,7 @@ const ModalHeaderSection = styled.header`
 
 const ModalContent = styled.div`
     flex: 1;
-    overflow-y: auto;
+    overflow-y: hidden;
     padding: 8px 18px 16px;
     display: flex;
     flex-direction: column;
@@ -139,7 +148,8 @@ const TitleWrapper = styled.div`
 const MODE_COMPONENTS: Record<EditorMode, React.ComponentType<any>> = {
     text: TextMode,
     prompt: PromptMode,
-    expression: ExpressionMode
+    expression: ExpressionMode,
+    template: TemplateMode
 };
 
 export const ExpandedEditor: React.FC<ExpandedPromptEditorProps> = ({
@@ -153,8 +163,12 @@ export const ExpandedEditor: React.FC<ExpandedPromptEditorProps> = ({
     completions,
     fileName,
     targetLineRange,
+    sanitizedExpression,
+    rawExpression,
     extractArgsFromFunction,
-    getHelperPane
+    getHelperPane,
+    error,
+    formDiagnostics
 }) => {
     const promptFields = ["query", "instructions", "role"];
 
@@ -163,10 +177,14 @@ export const ExpandedEditor: React.FC<ExpandedPromptEditorProps> = ({
         promptFields.includes(field.key) ? "prompt" : "text"
     );
 
-    const [mode] = useState<EditorMode>(defaultMode);
+    const [mode, setMode] = useState<EditorMode>(defaultMode);
     const [showPreview, setShowPreview] = useState(false);
     const [mouseDownTarget, setMouseDownTarget] = useState<EventTarget | null>(null);
 
+    useEffect(() => {
+        setMode(defaultMode);
+    }, [defaultMode]);
+
     useEffect(() => {
         if (mode === "text") {
             setShowPreview(false);
@@ -202,15 +220,33 @@ export const ExpandedEditor: React.FC<ExpandedPromptEditorProps> = ({
         // Props for modes with preview support
         ...(mode === "prompt" && {
             isPreviewMode: showPreview,
-            onTogglePreview: () => setShowPreview(!showPreview)
+            onTogglePreview: (enabled: boolean) => setShowPreview(enabled)
         }),
         // Props for expression mode
         ...(mode === "expression" && {
             completions,
             fileName,
             targetLineRange,
+            sanitizedExpression,
+            rawExpression,
+            extractArgsFromFunction,
+            getHelperPane,
+            error,
+            formDiagnostics
+        }),
+        // Props for template mode
+        ...(mode === "template" && {
+            completions,
+            fileName,
+            targetLineRange,
+            sanitizedExpression,
+            rawExpression,
             extractArgsFromFunction,
-            getHelperPane
+            getHelperPane,
+            isPreviewMode: showPreview,
+            onTogglePreview: (enabled: boolean) => setShowPreview(enabled),
+            error,
+            formDiagnostics
         })
     };
     // HACK: Must find a proper central way to manager popups

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

@@ -0,0 +1,44 @@
+/**
+ * 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 { DocumentType, TokenType } from "../../MultiModeExpressionEditor/ChipExpressionEditor/types";
+import {
+    getChipDisplayContent,
+    StandardChip,
+    ChipText,
+    getTokenIconClass,
+    StandardIcon
+} from "../../MultiModeExpressionEditor/ChipExpressionEditor/chipStyles";
+
+export interface ChipComponentProps {
+    type: TokenType;
+    content: string;
+    documentType?: DocumentType;
+}
+
+export const ChipComponent: React.FC<ChipComponentProps> = ({ type, content, documentType }) => {
+    let iconClass = getTokenIconClass(type, documentType);
+    return (
+        <StandardChip chipType={type}>
+            <StandardIcon chipType={type} className={iconClass} />
+            <ChipText>{getChipDisplayContent(type, content)}</ChipText>
+        </StandardChip>
+    );
+};

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

@@ -20,40 +20,28 @@ import React from "react";
 import styled from "@emotion/styled";
 import { ThemeColors } from "@wso2/ui-toolkit";
 import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
+import { ChipComponent } from "./ChipComponent";
+import { DocumentType, TokenType } from "../../MultiModeExpressionEditor/ChipExpressionEditor/types";
+import "../styles/markdown-preview.css";
 
 const PreviewContainer = styled.div`
     width: 100%;
     height: 100%;
-    padding: 12px;
-    fontSize: 14px;
-    font-family: var(--vscode-editor-font-family);
+    padding: 16px;
     background: var(--input-background);
-    color: ${ThemeColors.ON_SURFACE};
     border: 1px solid ${ThemeColors.OUTLINE_VARIANT};
     border-top: none;
     border-radius: 0 0 4px 4px;
     overflow-y: auto;
     overflow-x: auto;
     box-sizing: border-box;
 
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    word-break: break-word;
-
-    p, li, td, th, blockquote {
-        word-wrap: break-word;
-        overflow-wrap: break-word;
-    }
-
-    pre {
-        overflow-x: auto;
-        white-space: pre-wrap;
-        word-wrap: break-word;
-    }
-
-    code {
-        white-space: pre-wrap;
-        word-wrap: break-word;
+    .markdown-body {
+        background: transparent;
+        font-size: 14px;
+        color: ${ThemeColors.ON_SURFACE};
     }
 `;
 
@@ -68,17 +56,31 @@ interface MarkdownPreviewProps {
 export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({ content }) => {
     return (
         <PreviewContainer>
-            <ReactMarkdown
-                components={{
-                    // Prevent rendering of potentially dangerous elements
-                    script: () => null,
-                    iframe: () => null,
-                }}
-                disallowedElements={['script', 'iframe', 'object', 'embed']}
-                unwrapDisallowed={true}
-            >
-                {content}
-            </ReactMarkdown>
+            <div className="markdown-body">
+                <ReactMarkdown
+                    rehypePlugins={[rehypeRaw, remarkGfm]}
+                    components={{
+                        // Prevent rendering of potentially dangerous elements
+                        script: () => null,
+                        iframe: () => null,
+                        // Custom chip component for rendering tokens
+                        chip: ({ node }: any) => {
+                            const props = node?.properties || {};
+                            return (
+                                <ChipComponent
+                                    type={props.type || TokenType.VARIABLE}
+                                    content={props.dataContent || ''}
+                                    documentType={props.dataDocType as DocumentType}
+                                />
+                            );
+                        }
+                    }}
+                    disallowedElements={['script', 'iframe', 'object', 'embed']}
+                    unwrapDisallowed={true}
+                >
+                    {content}
+                </ReactMarkdown>
+            </div>
         </PreviewContainer>
     );
 };