@difizen/libro-prompt-cell 0.3.1 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@difizen/libro-prompt-cell",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "",
   "keywords": [
     "libro",
@@ -32,14 +32,18 @@
     "src"
   ],
   "dependencies": {
-    "@difizen/libro-code-editor": "^0.3.1",
-    "@difizen/libro-jupyter": "^0.3.1",
-    "@difizen/libro-rendermime": "^0.3.1",
-    "@difizen/libro-common": "^0.3.1",
-    "@difizen/libro-core": "^0.3.1",
+    "@difizen/libro-code-editor": "^0.3.2",
+    "@difizen/libro-jupyter": "^0.3.2",
+    "@difizen/libro-rendermime": "^0.3.2",
+    "@difizen/libro-common": "^0.3.2",
+    "@difizen/libro-core": "^0.3.2",
     "@ant-design/icons": "^5.1.0",
     "@difizen/mana-l10n": "latest",
     "@difizen/mana-app": "latest",
+    "@difizen/magent-chat": "^0.1.27",
+    "react-syntax-highlighter": "^15.5.0",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.0",
     "classnames": "^2.3.2",
     "highlight.js": "^11.8.0",
     "marked": "^5.1.1",
@@ -55,6 +59,7 @@
   },
   "devDependencies": {
     "@types/marked": "^5.0.1",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@types/react": "^18.2.25",
     "@types/uuid": "^9.0.2",
     "@types/react-dom": "^18.2.4"

package/src/code-block.tsx

@@ -0,0 +1,107 @@
+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';
+
+export const CodeBlock = (props: any) => {
+  const { className, children } = props;
+
+  if (!props.inline && className) {
+    const [, lang] = /language-(\w+)/.exec(className || '') || [];
+
+    return (
+      <pre className={`chat-msg-md-code-wrap`}>
+        {lang && <div className={`chat-msg-md-code-lang`}>{lang}</div>}
+        <CopyOutlined
+          onClick={() => {
+            copy2clipboard(children);
+          }}
+          className={`chat-msg-md-code-copy`}
+        />
+        <SyntaxHighlighter
+          className={`libro-llm-syntax-highlighter`}
+          language={lang}
+          style={{}}
+        >
+          {typeof children === 'string' ? children.trim() : children}
+        </SyntaxHighlighter>
+      </pre>
+    );
+  }
+
+  return <code className={`chat-msg-md-code-code`}>{children}</code>;
+};
+
+export const InterpreterCodeBlock = (props: any) => {
+  const { className, children } = props;
+  const instance = useInject<DisplayDataOutputModel>(ViewInstance);
+  const cell = instance.cell;
+  if (!(cell instanceof LibroPromptCellView)) {
+    return null;
+  }
+
+  const replace = (data: string) => {
+    if (cell.editor) {
+      const length = cell.editor.model.value.length;
+      const start = cell.editor.getPositionAt(0);
+      const end = cell.editor.getPositionAt(length);
+      if (start && end) {
+        cell.editor.replaceSelection(data, {
+          start,
+          end,
+        });
+      }
+    }
+  };
+
+  if (!props.inline && className) {
+    const [, lang] = /language-(\w+)/.exec(className || '') || [];
+
+    return (
+      <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>
+    );
+  }
+
+  return <code className={`chat-msg-md-code-code`}>{children}</code>;
+};

package/src/index.less

@@ -1,7 +1,29 @@
+@ant-prefix: ant;
+
 .libro-prompt-cell-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  border-bottom: 1px solid var(--mana-libro-code-border-color);
+}
+
+.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 {
@@ -36,17 +58,13 @@
   }
 }
 
-.libro-llm-output-render {
-  p {
-    color: var(--mana-libro-llm-response-output-text-color);
-  }
-}
-
 .libro-prompt-output-render-container {
   padding: 10px 24px;
 }
 
 .libro-prompt-output-llm-render {
+  color: var(--mana-libro-llm-response-output-text-color);
+
   .libro-llm-output-render pre {
     background: #f4f6fb;
     padding: 16px;
@@ -70,3 +88,48 @@
     }
   }
 }
+
+.libro-prompt-cell-model-tip,
+.libro-prompt-cell-model-prompt {
+  padding: 10px 24px;
+}
+
+.libro-prompt-cell-model-prompt {
+  border-bottom: 1px solid var(--mana-color-border);
+}
+
+.libro-prompt-cell-model-tip {
+  color: var(--mana-libro-llm-response-output-text-color);
+}
+
+.libro-interpreter-edit-tip {
+  margin-right: 4px;
+}
+
+.libro-interpreter-edit-container {
+  display: flex;
+  position: absolute;
+  margin-top: 4px;
+  z-index: 100;
+  right: 0;
+  align-items: center;
+  padding: 0 8px;
+  color: #bdc0c4;
+  cursor: pointer;
+
+  &:hover {
+    color: #1590ff;
+  }
+}
+
+.libro-prompt-cell-right-header {
+  display: flex;
+}
+
+.libro-prompt-cell-interpreter-switch {
+  margin: 0 6px;
+}
+
+.libro-prompt-cell-interpreter-header-container {
+  display: inline-block;
+}

package/src/input-handler/variable-name-input.tsx

@@ -11,9 +11,9 @@ import { useCallback, useState } from 'react';
 import './index.less';
 
 interface VariableNameInputPopoverContentProps {
-  value: string;
-  handleVariableNameChange: (variableName: string) => void;
-  checkVariableNameAvailable: (variableName: string) => boolean;
+  value?: string;
+  handleVariableNameChange: (variableName?: string) => void;
+  checkVariableNameAvailable: (variableName?: string) => boolean;
   cancel: () => void;
 }
 
@@ -69,9 +69,9 @@ export const VariableNameInputPopoverContent: FC<
 };
 
 interface VariableNameInputProps {
-  value: string;
-  handleVariableNameChange: (variableName: string) => void;
-  checkVariableNameAvailable: (variableName: string) => boolean;
+  value?: string;
+  handleVariableNameChange: (variableName?: string) => void;
+  checkVariableNameAvailable: (variableName?: string) => boolean;
   classname?: string;
 }
 const variableNameInputCls = 'libro-variable-name-input';

package/src/interpreter-code-output-render.tsx

@@ -0,0 +1,28 @@
+import type { BaseOutputView } from '@difizen/libro-jupyter';
+import React from 'react';
+
+import { InterpreterCodeBlock } from './code-block.js';
+import { LibroPromptCellView } from './prompt-cell-view.js';
+
+export const InterpreterCodeOutputRender: React.FC<{
+  model: BaseOutputView;
+}> = (props: { model: BaseOutputView }) => {
+  const { model } = props;
+  if (!model.data['application/vnd.libro.interpreter.code+text']) {
+    return null;
+  }
+  if (!(model.cell instanceof LibroPromptCellView)) {
+    return null;
+  }
+
+  const data = model.data['application/vnd.libro.interpreter.code+text'] as string;
+  model.cell.model.interpreterCode = data;
+
+  return (
+    <div className="libro-interpreter-code-output-render-container">
+      <div className="libro-interpreter-code-output-render">
+        <InterpreterCodeBlock className="language-python">{data}</InterpreterCodeBlock>
+      </div>
+    </div>
+  );
+};

package/src/interpreter-code-output-rendermime-contribution.ts

@@ -0,0 +1,18 @@
+import type { BaseOutputView } from '@difizen/libro-jupyter';
+import { RenderMimeContribution } from '@difizen/libro-jupyter';
+import { singleton } from '@difizen/mana-app';
+
+import { InterpreterCodeOutputRender } from './interpreter-code-output-render.js';
+
+@singleton({ contrib: RenderMimeContribution })
+export class LibroInterpreterCodeOutputMimeTypeContribution
+  implements RenderMimeContribution
+{
+  canHandle = (model: BaseOutputView) => {
+    return 200;
+  };
+  renderType = 'interpreterCodeOutputRender';
+  safe = true;
+  mimeTypes = ['application/vnd.libro.interpreter.code+text'];
+  render = InterpreterCodeOutputRender;
+}

package/src/libro-formatter-prompt-magic-contribution.ts

@@ -14,6 +14,9 @@ export interface PromptDecodedFormatter extends DefaultDecodedFormatter {
   variableName?: string;
   cellId?: string;
   record?: string;
+  interpreterCode?: string;
+  supportInterpreter?: 'dynamic' | 'immutable' | 'disable';
+  interpreterEnabled?: boolean;
 }
 
 @singleton({ contrib: FormatterContribution })
@@ -44,6 +47,11 @@ export class FormatterPromptMagicContribution
       source: encodeValue,
       metadata: {
         libroFormatter: this.formatter,
+        interpreter: {
+          interpreter_code: source.interpreterCode,
+          support_interpreter: source.supportInterpreter,
+          interpreter_enabled: source.interpreterEnabled,
+        },
       },
     };
   };
@@ -54,6 +62,16 @@ export class FormatterPromptMagicContribution
       const run = value.split('%%prompt \n')[1];
       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'];
+      }
       const chatKey = runValue.chat_key || runValue.model_name;
       const variableName = runValue.variable_name;
       const cellId = runValue.cell_id;
@@ -64,6 +82,9 @@ export class FormatterPromptMagicContribution
         chatKey,
         cellId,
         record,
+        interpreterCode,
+        supportInterpreter,
+        interpreterEnabled,
       };
     }
     return {

package/src/module.ts

@@ -2,6 +2,7 @@ import { CellOptions, LibroModule, OutputModule } from '@difizen/libro-core';
 import { LibroRenderMimeModule } from '@difizen/libro-rendermime';
 import { ManaModule } from '@difizen/mana-app';
 
+import { LibroInterpreterCodeOutputMimeTypeContribution } from './interpreter-code-output-rendermime-contribution.js';
 import { FormatterPromptMagicContribution } from './libro-formatter-prompt-magic-contribution.js';
 import { LibroPromptCellCommandContribution } from './prompt-cell-command-contribution.js';
 import { PromptCellContribution } from './prompt-cell-contribution.js';
@@ -22,6 +23,7 @@ export const LibroPromptCellModule = ManaModule.create()
     LibroPromptCellView,
     LibroPromptCellModel,
     LibroPromptOutputMimeTypeContribution,
+    LibroInterpreterCodeOutputMimeTypeContribution,
     LibroPromptCellCommandContribution,
     FormatterPromptMagicContribution,
     {

package/src/prompt-cell-model.ts

@@ -1,9 +1,8 @@
 import type {
-  ICellMetadata,
+  ICodeCell,
   ExecutionCount,
   ICodeCellMetadata,
 } from '@difizen/libro-common';
-import type { ICodeCell } from '@difizen/libro-common';
 import type { ExecutableCellModel } from '@difizen/libro-core';
 import { LibroCellModel } from '@difizen/libro-core';
 import { CellOptions } from '@difizen/libro-core';
@@ -15,8 +14,12 @@ import { ViewManager } from '@difizen/mana-app';
 import { inject } from '@difizen/mana-app';
 import type { Event as ManaEvent } from '@difizen/mana-app';
 
+import type { PromptDecodedFormatter } from './libro-formatter-prompt-magic-contribution.js';
+import type { InterpreterMeta } from './prompt-cell-protocol.js';
+
 export interface PromptCellMetadata extends ICodeCellMetadata {
   execution: ExecutionMeta;
+  interpreter: InterpreterMeta;
 }
 
 @transient()
@@ -32,7 +35,7 @@ export class LibroPromptCellModel
   @prop()
   hasExecutedError = false;
   @prop()
-  override metadata: Partial<PromptCellMetadata | ICellMetadata>;
+  override metadata: Partial<PromptCellMetadata>;
   @prop()
   kernelExecuting = false;
 
@@ -42,11 +45,25 @@ export class LibroPromptCellModel
   @prop()
   modelType?: string;
 
+  @prop()
+  prompt = '';
+
+  promptOutput?: string;
+
   @prop()
   chatKey?: string;
 
   @prop()
-  variableName: string;
+  supportInterpreter?: 'dynamic' | 'immutable' | 'disable';
+
+  @prop()
+  interpreterEnabled?: boolean;
+
+  @prop()
+  interpreterCode?: string;
+
+  @prop()
+  variableName?: string;
 
   @prop()
   executing: boolean;
@@ -54,6 +71,7 @@ export class LibroPromptCellModel
   hasOutputHidden: boolean;
   @prop()
   hasOutputsScrolled: boolean;
+  _interpreterEditMode = false;
 
   // Emitter Msg
   msgChangeEmitter: Emitter<any>;
@@ -68,16 +86,23 @@ export class LibroPromptCellModel
       variableName: this.variableName,
       chatKey: this.chatKey,
       record: this.record,
-      value: this.value,
+      value: this._interpreterEditMode ? this.prompt : this.value,
       cellId: this.id,
+      interpreterCode: this.interpreterCode,
+      supportInterpreter: this.supportInterpreter,
+      interpreterEnabled: this.interpreterEnabled,
     };
   }
 
-  override set decodeObject(value) {
-    super.decodeObject = value;
-    this.variableName = value.variableName;
-    this.chatKey = value.chatKey;
-    this.record = value.record;
+  override set decodeObject(data: PromptDecodedFormatter) {
+    this.value = data.value;
+    this.prompt = data.value;
+    this.variableName = data.variableName;
+    this.chatKey = data.chatKey;
+    this.record = data.record;
+    this.interpreterCode = data.interpreterCode;
+    this.supportInterpreter = data.supportInterpreter;
+    this.interpreterEnabled = data.interpreterEnabled;
   }
 
   viewManager: ViewManager;
@@ -96,19 +121,25 @@ export class LibroPromptCellModel
     this.libroFormatType = 'formatter-prompt-magic';
     this.mimeType = 'application/vnd.libro.prompt+json';
     this.metadata = {
+      interpreter: {},
       ...options?.cell?.metadata,
       libroFormatter: this.libroFormatType,
     };
   }
 
   override toJSON(): Omit<ICodeCell, 'outputs'> {
+    this.metadata.interpreter = {
+      ...this.metadata.interpreter,
+      interpreter_code: this.interpreterCode,
+      support_interpreter: this.supportInterpreter,
+      interpreter_enabled: this.interpreterEnabled,
+    };
     return {
       id: this.id,
       cell_type: this.type,
       source: this.source,
       metadata: this.metadata,
       execution_count: this.executeCount,
-      // outputs: this.outputs,
     };
   }
 

package/src/prompt-cell-protocol.ts

@@ -1,3 +1,4 @@
+import type { PartialJSONObject } from '@difizen/libro-common';
 import type { CellOptions } from '@difizen/libro-core';
 
 import type { LibroPromptCellModel } from './prompt-cell-model.js';
@@ -6,3 +7,10 @@ export type LibroPromptCellModelFactory = (
   options: CellOptions,
 ) => LibroPromptCellModel;
 export const LibroPromptCellModelFactory = Symbol('LibroPromptCellModelFactory');
+
+export interface InterpreterMeta extends PartialJSONObject {
+  support_interpreter?: 'dynamic' | 'immutable' | 'disable';
+  interpreter_enabled?: boolean;
+  interpreter_code?: string;
+  interpreter_text?: string;
+}

package/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'})`;
+  };
 }