feat(prompt): add enable and disable interpreter for chatmodel

packages/libro-prompt-cell/src/code-block.tsx

@@ -2,6 +2,7 @@ import { CopyOutlined, EditOutlined } from '@ant-design/icons';
 import type { DisplayDataOutputModel } from '@difizen/libro-jupyter';
 import { copy2clipboard } from '@difizen/libro-jupyter';
 import { useInject, ViewInstance } from '@difizen/mana-app';
+import { Collapse } from 'antd';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 
 import { LibroPromptCellView } from './prompt-cell-view.js';
@@ -61,29 +62,44 @@ export const InterpreterCodeBlock = (props: any) => {
     const [, lang] = /language-(\w+)/.exec(className || '') || [];
 
     return (
-      <pre className={`chat-msg-md-code-wrap`}>
-        {cell.model.interpreterEnabled && (
-          <div
-            className="libro-interpreter-edit-container"
-            onClick={() => {
-              cell.interpreterEditMode = true;
-              if (cell.model.interpreterCode) {
-                replace(cell.model.interpreterCode);
-              }
-            }}
-          >
-            <div className="libro-interpreter-edit-tip">代码编辑</div>
-            <EditOutlined className="libro-interpreter-edit-icon" />
-          </div>
-        )}
-        <SyntaxHighlighter
-          className={`libro-llm-syntax-highlighter`}
-          language={lang}
-          style={{}}
-        >
-          {typeof children === 'string' ? children.trim() : children}
-        </SyntaxHighlighter>
-      </pre>
+      <Collapse
+        ghost
+        items={[
+          {
+            key: '1',
+            label: 'Code',
+            children: (
+              <p>
+                <div className="libro-code-interpreter-code">
+                  <pre className={`chat-msg-md-code-wrap`}>
+                    {
+                      <div
+                        className="libro-interpreter-edit-container"
+                        onClick={() => {
+                          cell.interpreterEditMode = true;
+                          if (cell.model.interpreterCode) {
+                            replace(cell.model.interpreterCode);
+                          }
+                        }}
+                      >
+                        <div className="libro-interpreter-edit-tip">代码编辑</div>
+                        <EditOutlined className="libro-interpreter-edit-icon" />
+                      </div>
+                    }
+                    <SyntaxHighlighter
+                      className={`libro-llm-syntax-highlighter`}
+                      language={lang}
+                      style={{}}
+                    >
+                      {typeof children === 'string' ? children.trim() : children}
+                    </SyntaxHighlighter>
+                  </pre>
+                </div>
+              </p>
+            ),
+          },
+        ]}
+      ></Collapse>
     );
   }
 

packages/libro-prompt-cell/src/index.less

@@ -1,3 +1,5 @@
+@ant-prefix: ant;
+
 .libro-prompt-cell-header {
   display: flex;
   align-items: center;
@@ -7,6 +9,21 @@
 
 .libro-interpreter-code-output-render {
   padding: 10px 24px;
+
+  .@{ant-prefix}-collapse-content > .@{ant-prefix}-collapse-content-box {
+    padding: unset;
+  }
+  .@{ant-prefix}-collapse-ghost
+    > .@{ant-prefix}-collapse-item
+    > .@{ant-prefix}-collapse-content
+    > .@{ant-prefix}-collapse-content-box {
+    padding: unset;
+  }
+  .@{ant-prefix}-collapse
+    > .@{ant-prefix}-collapse-item
+    > .@{ant-prefix}-collapse-header {
+    padding: unset;
+  }
 }
 
 .libro-llm-hljs {
@@ -108,3 +125,11 @@
 .libro-prompt-cell-right-header {
   display: flex;
 }
+
+.libro-prompt-cell-interpreter-switch {
+  margin: 0 6px;
+}
+
+.libro-prompt-cell-interpreter-header-container {
+  display: inline-block;
+}

packages/libro-prompt-cell/src/libro-formatter-prompt-magic-contribution.ts

@@ -15,6 +15,7 @@ export interface PromptDecodedFormatter extends DefaultDecodedFormatter {
   cellId?: string;
   record?: string;
   interpreterCode?: string;
+  supportInterpreter?: 'dynamic' | 'immutable' | 'disable';
   interpreterEnabled?: boolean;
 }
 
@@ -48,6 +49,7 @@ export class FormatterPromptMagicContribution
         libroFormatter: this.formatter,
         interpreter: {
           interpreter_code: source.interpreterCode,
+          support_interpreter: source.supportInterpreter,
           interpreter_enabled: source.interpreterEnabled,
         },
       },
@@ -61,9 +63,12 @@ export class FormatterPromptMagicContribution
       const runValue = JSON.parse(run);
       const codeValue = runValue.prompt;
       let interpreterCode;
+      let supportInterpreter;
       let interpreterEnabled;
       if (formatterValue.metadata['interpreter']) {
         interpreterCode = formatterValue.metadata['interpreter']['interpreter_code'];
+        supportInterpreter =
+          formatterValue.metadata['interpreter']['support_interpreter'];
         interpreterEnabled =
           formatterValue.metadata['interpreter']['interpreter_enabled'];
       }
@@ -78,6 +83,7 @@ export class FormatterPromptMagicContribution
         cellId,
         record,
         interpreterCode,
+        supportInterpreter,
         interpreterEnabled,
       };
     }

packages/libro-prompt-cell/src/prompt-cell-model.ts

@@ -53,6 +53,9 @@ export class LibroPromptCellModel
   @prop()
   chatKey?: string;
 
+  @prop()
+  supportInterpreter?: 'dynamic' | 'immutable' | 'disable';
+
   @prop()
   interpreterEnabled?: boolean;
 
@@ -86,6 +89,7 @@ export class LibroPromptCellModel
       value: this._interpreterEditMode ? this.prompt : this.value,
       cellId: this.id,
       interpreterCode: this.interpreterCode,
+      supportInterpreter: this.supportInterpreter,
       interpreterEnabled: this.interpreterEnabled,
     };
   }
@@ -97,6 +101,7 @@ export class LibroPromptCellModel
     this.chatKey = data.chatKey;
     this.record = data.record;
     this.interpreterCode = data.interpreterCode;
+    this.supportInterpreter = data.supportInterpreter;
     this.interpreterEnabled = data.interpreterEnabled;
   }
 
@@ -126,6 +131,7 @@ export class LibroPromptCellModel
     this.metadata.interpreter = {
       ...this.metadata.interpreter,
       interpreter_code: this.interpreterCode,
+      support_interpreter: this.supportInterpreter,
       interpreter_enabled: this.interpreterEnabled,
     };
     return {

packages/libro-prompt-cell/src/prompt-cell-protocol.ts

@@ -9,6 +9,7 @@ export type LibroPromptCellModelFactory = (
 export const LibroPromptCellModelFactory = Symbol('LibroPromptCellModelFactory');
 
 export interface InterpreterMeta extends PartialJSONObject {
+  support_interpreter?: 'dynamic' | 'immutable' | 'disable';
   interpreter_enabled?: boolean;
   interpreter_code?: string;
   interpreter_text?: string;

packages/libro-prompt-cell/src/prompt-cell-script.ts

@@ -6,4 +6,7 @@ export class PromptScript {
 chat_object_manager.dump_kernel_list_json()`;
   public readonly getChatRecoreds: string = `from libro_ai import chat_record_provider
 chat_record_provider.get_records()`;
+  switchInterpreterMode = (key: string, mode: boolean) => {
+    return `from libro_ai import chat_object_manager\nexecutor = chat_object_manager.get_executor('${key}')\nexecutor.set_interpreter_support(${mode ? 'True' : 'False'})`;
+  };
 }

packages/libro-prompt-cell/src/prompt-cell-view.tsx

@@ -33,13 +33,14 @@ import {
   Deferred,
 } from '@difizen/mana-app';
 import { l10n } from '@difizen/mana-l10n';
-import { Select, Tag } from 'antd';
+import { Select, Switch, Tag } from 'antd';
 import type { DefaultOptionType } from 'antd/es/select/index.js';
 import classNames from 'classnames';
 import React, { useEffect, useState } from 'react';
 import breaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
 
+import { CodeBlock } from './code-block.js';
 import { ChatRecordInput, VariableNameInput } from './input-handler/index.js';
 import { LibroPromptCellModel } from './prompt-cell-model.js';
 import { PromptScript } from './prompt-cell-script.js';
@@ -51,7 +52,9 @@ export interface ChatObject {
   order: number;
   key: string;
   disabled?: boolean;
-  interpreterEnabled?: boolean;
+  support_interpreter?: 'dynamic' | 'immutable' | 'disable';
+  interpreter_enabled?: boolean;
+  [key: string]: any;
 }
 
 function ChatObjectFromKey(key: string): ChatObject {
@@ -104,6 +107,40 @@ const ChatObjectOptions = (type: string): ChatObjectOptions => {
   }
 };
 
+const InterpreterMode = () => {
+  const instance = useInject<LibroPromptCellView>(ViewInstance);
+  const handleInterpreterSwitch = (checked: boolean) => {
+    instance.model.interpreterEnabled = checked;
+    if (instance.model.chatKey) {
+      instance.switchInterpreterMode(instance.model.chatKey, checked);
+    }
+  };
+
+  if (instance.model.supportInterpreter === 'immutable') {
+    return (
+      <Tag bordered={false} color="geekblue">
+        Interpreter
+      </Tag>
+    );
+  }
+
+  if (instance.model.supportInterpreter === 'dynamic') {
+    return (
+      <div>
+        <span className="libro-prompt-cell-interpreter-switch-tip">
+          {instance.model.interpreterEnabled ? '关闭 Interpreter' : '开启 Interpreter'}
+        </span>
+        <Switch
+          size="small"
+          className="libro-prompt-cell-interpreter-switch"
+          onChange={handleInterpreterSwitch}
+        />
+      </div>
+    );
+  }
+  return null;
+};
+
 const SelectionItemLabel: React.FC<{ item: ChatObject }> = (props: {
   item: ChatObject;
 }) => {
@@ -207,6 +244,9 @@ const PropmtEditorViewComponent = React.forwardRef<HTMLDivElement>(
                 }}
               />
             </span>
+            <div className="libro-prompt-cell-interpreter-header-container">
+              <InterpreterMode />
+            </div>
             <VariableNameInput
               value={instance.model.variableName}
               checkVariableNameAvailable={instance.checkVariableNameAvailable}
@@ -228,14 +268,18 @@ const PropmtEditorViewComponent = React.forwardRef<HTMLDivElement>(
               {instance.model.prompt}
             </div>
             <div className="libro-prompt-cell-model-tip">
-              <LLMRender type="message" remarkPlugins={[remarkGfm, breaks]}>
+              <LLMRender
+                type="message"
+                remarkPlugins={[remarkGfm, breaks]}
+                components={{ code: CodeBlock }}
+              >
                 {instance.model.promptOutput}
               </LLMRender>
             </div>
           </>
         )}
         <div className="libro-edit-container">
-          {instance.model.interpreterEnabled && instance.interpreterEditMode && (
+          {instance.interpreterEditMode && (
             <div
               className="libro-interpreter-edit-container"
               onClick={() => {
@@ -648,6 +692,18 @@ export class LibroPromptCellView extends LibroEditableExecutableCellView {
     );
   };
 
+  switchInterpreterMode = async (chatKey: string, mode: boolean) => {
+    return this.fetch(
+      {
+        code: this.promptScript.switchInterpreterMode(chatKey, mode),
+        store_history: false,
+      },
+      (msg) => {
+        //
+      },
+    );
+  };
+
   updateChatRecords = async () => {
     return this.fetch(
       {
@@ -670,7 +726,7 @@ export class LibroPromptCellView extends LibroEditableExecutableCellView {
       value: item.key,
       label: <SelectionItemLabel item={item} />,
       disabled: !!item.disabled,
-      interpreterEnabled: item.interpreterEnabled,
+      support_interpreter: item.support_interpreter,
     };
   };
 
@@ -718,7 +774,7 @@ export class LibroPromptCellView extends LibroEditableExecutableCellView {
   };
   handleModelNameChange = (value: string, option: DefaultOptionType) => {
     this.model.chatKey = value;
-    this.model.interpreterEnabled = option['interpreterEnabled'];
+    this.model.supportInterpreter = option['support_interpreter'];
   };
   handleVariableNameChange = (value?: string) => {
     this.model.variableName = value;