@difizen/libro-prompt-cell 0.3.0 → 0.3.2

package/src/prompt-cell-view.tsx

@@ -1,15 +1,23 @@
+import { EditOutlined } from '@ant-design/icons';
 import type { IRange } from '@difizen/libro-code-editor';
 import type { ICodeCell, IOutput } from '@difizen/libro-common';
+import { MIME } from '@difizen/libro-common';
 import { isOutput } from '@difizen/libro-common';
 import type {
+  ExecutionMeta,
+  KernelMessage,
   IOutputAreaOption,
   LibroCell,
   CellViewOptions,
-} from '@difizen/libro-core';
-import { LibroOutputArea } from '@difizen/libro-core';
-import { CellService, LibroEditableExecutableCellView } from '@difizen/libro-core';
-import type { ExecutionMeta, KernelMessage } from '@difizen/libro-jupyter';
-import { KernelError, LibroJupyterModel } from '@difizen/libro-jupyter';
+} from '@difizen/libro-jupyter';
+import {
+  KernelError,
+  LibroJupyterModel,
+  CellService,
+  LibroEditableExecutableCellView,
+  LibroOutputArea,
+} from '@difizen/libro-jupyter';
+import { ChatComponents } from '@difizen/magent-chat';
 import {
   getOrigin,
   inject,
@@ -22,13 +30,17 @@ import {
   ViewOption,
   ViewRender,
   watch,
+  Deferred,
 } from '@difizen/mana-app';
-import { Deferred } from '@difizen/mana-app';
 import { l10n } from '@difizen/mana-l10n';
 import { Select, 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';
@@ -40,6 +52,9 @@ export interface ChatObject {
   order: number;
   key: string;
   disabled?: boolean;
+  support_interpreter?: 'dynamic' | 'immutable' | 'disable';
+  interpreter_enabled?: boolean;
+  [key: string]: any;
 }
 
 function ChatObjectFromKey(key: string): ChatObject {
@@ -92,6 +107,42 @@ 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);
+  //     instance.model.promptOutput = undefined;
+  //     instance.model.interpreterCode = undefined;
+  //   }
+  // };
+
+  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;
 }) => {
@@ -126,8 +177,9 @@ const CellEditorRaw: React.FC = () => {
 export const CellEditor = React.memo(CellEditorRaw);
 
 const PropmtEditorViewComponent = React.forwardRef<HTMLDivElement>(
-  function MaxPropmtEditorViewComponent(props, ref) {
+  function PropmtEditorViewComponent(props, ref) {
     const instance = useInject<LibroPromptCellView>(ViewInstance);
+    const LLMRender = ChatComponents.Markdown;
     const [selectedModel, setSelectedModel] = useState<string>(l10n.t('暂无内置模型'));
     useEffect(() => {
       // TODO: Data initialization should not depend on view initialization, which causes limitations in usage scenarios and multiple renderings.
@@ -154,11 +206,25 @@ const PropmtEditorViewComponent = React.forwardRef<HTMLDivElement>(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    const handleChange = (value: string) => {
-      instance.handleModelNameChange(value);
+    const handleChange = (value: string, options?: DefaultOptionType) => {
+      instance.handleModelNameChange(value, options);
       setSelectedModel(value);
     };
 
+    const replace = (data: string) => {
+      if (instance instanceof LibroPromptCellView && instance.editor) {
+        const length = instance.editor.model.value.length;
+        const start = instance.editor.getPositionAt(0);
+        const end = instance.editor.getPositionAt(length);
+        if (start && end) {
+          instance.editor.replaceSelection(data, {
+            start,
+            end,
+          });
+        }
+      }
+    };
+
     return (
       <div
         className={instance.className}
@@ -180,13 +246,16 @@ const PropmtEditorViewComponent = React.forwardRef<HTMLDivElement>(
                 }}
               />
             </span>
+            <div className="libro-prompt-cell-interpreter-header-container">
+              <InterpreterMode />
+            </div>
             <VariableNameInput
               value={instance.model.variableName}
               checkVariableNameAvailable={instance.checkVariableNameAvailable}
               handleVariableNameChange={instance.handleVariableNameChange}
             />
           </div>
-          <div>
+          <div className="libro-prompt-cell-right-header">
             <ChatRecordInput
               value={instance.model.record}
               handleChange={instance.handleRecordChange}
@@ -195,7 +264,39 @@ const PropmtEditorViewComponent = React.forwardRef<HTMLDivElement>(
             />
           </div>
         </div>
-        <CellEditor />
+        {instance.interpreterEditMode && (
+          <>
+            <div className="libro-prompt-cell-model-prompt">
+              {instance.model.prompt}
+            </div>
+            <div className="libro-prompt-cell-model-tip">
+              <LLMRender
+                type="message"
+                remarkPlugins={[remarkGfm, breaks]}
+                components={{ code: CodeBlock }}
+              >
+                {instance.model.promptOutput}
+              </LLMRender>
+            </div>
+          </>
+        )}
+        <div className="libro-edit-container">
+          {instance.interpreterEditMode && (
+            <div
+              className="libro-interpreter-edit-container"
+              onClick={() => {
+                instance.interpreterEditMode = false;
+                if (instance.model.prompt) {
+                  replace(instance.model.prompt);
+                }
+              }}
+            >
+              <div className="libro-interpreter-edit-tip">退出编辑</div>
+              <EditOutlined className="libro-interpreter-edit-icon" />
+            </div>
+          )}
+          <CellEditor />
+        </div>
       </div>
     );
   },
@@ -215,6 +316,50 @@ export class LibroPromptCellView extends LibroEditableExecutableCellView {
   @prop()
   contextChatRecords: string[] = [];
 
+  get interpreterEditMode() {
+    return this.model._interpreterEditMode;
+  }
+
+  set interpreterEditMode(data) {
+    this.model._interpreterEditMode = data;
+    if (data) {
+      this.model.prompt = this.model.value;
+      this.model.mimeType = MIME.python;
+      this.outputArea.clear();
+      this.parent.enterEditMode();
+      this.parent.model.savable = false;
+      this.parent.model.runnable = false;
+    } else {
+      this.parent.model.savable = true;
+      this.model.interpreterCode = this.model.value;
+      this.model.mimeType = 'application/vnd.libro.prompt+json';
+      this.parent.model.runnable = true;
+      this.handleInterpreterOutput();
+    }
+  }
+
+  handleInterpreterOutput = async () => {
+    if (this.model.promptOutput) {
+      await this.outputArea.add({
+        data: {
+          'application/vnd.libro.prompt+json': this.model.promptOutput,
+        },
+        metadata: {},
+        output_type: 'display_data',
+      });
+    }
+    if (this.model.interpreterCode) {
+      await this.outputArea.add({
+        data: {
+          'application/vnd.libro.interpreter.code+text': this.model.interpreterCode,
+        },
+        metadata: {},
+        output_type: 'display_data',
+      });
+      this.runInterpreterCode();
+    }
+  };
+
   get sortedChatObjects(): ChatObject[] {
     const map = new Map<string, ChatObject>();
     this.parent.model.cells.forEach((cell) => {
@@ -441,6 +586,81 @@ export class LibroPromptCellView extends LibroEditableExecutableCellView {
     }
   }
 
+  async runInterpreterCode() {
+    const libroModel = this.parent.model;
+
+    if (
+      !libroModel ||
+      !(libroModel instanceof LibroJupyterModel) ||
+      !libroModel.kernelConnection ||
+      libroModel.kernelConnection.isDisposed
+    ) {
+      return false;
+    }
+
+    const kernelConnection = getOrigin(libroModel.kernelConnection);
+    const cellModel = this.model;
+
+    if (!cellModel.interpreterCode) {
+      return false;
+    }
+
+    try {
+      cellModel.executing = true;
+      const future = kernelConnection.requestExecute({
+        code: cellModel.interpreterCode,
+      });
+
+      let startTimeStr = '';
+      future.onIOPub = (msg: any) => {
+        if (msg.header.msg_type === 'execute_input') {
+          cellModel.metadata.execution = {
+            'shell.execute_reply.started': '',
+            'shell.execute_reply.end': '',
+            to_execute: new Date().toISOString(),
+          } as ExecutionMeta;
+          cellModel.kernelExecuting = true;
+          startTimeStr = msg.header.date as string;
+          const meta = cellModel.metadata.execution as ExecutionMeta;
+          if (meta) {
+            meta['shell.execute_reply.started'] = startTimeStr;
+          }
+        }
+        cellModel.msgChangeEmitter.fire(msg);
+      };
+      future.onReply = (msg: any) => {
+        cellModel.msgChangeEmitter.fire(msg);
+      };
+
+      const msgPromise = await future.done;
+      cellModel.executing = false;
+      cellModel.kernelExecuting = false;
+
+      startTimeStr = msgPromise.metadata['started'] as string;
+      const endTimeStr = msgPromise.header.date;
+
+      (cellModel.metadata.execution as ExecutionMeta)['shell.execute_reply.started'] =
+        startTimeStr;
+      (cellModel.metadata.execution as ExecutionMeta)['shell.execute_reply.end'] =
+        endTimeStr;
+
+      if (!msgPromise) {
+        return true;
+      }
+
+      if (msgPromise.content.status === 'ok') {
+        return true;
+      } else {
+        throw new KernelError(msgPromise.content);
+      }
+    } catch (reason: any) {
+      if (reason.message.startsWith('Canceled')) {
+        return false;
+      }
+      throw reason;
+    }
+  }
+
   fetch = async (
     content: KernelMessage.IExecuteRequestMsg['content'],
     ioCallback: (msg: KernelMessage.IIOPubMessage) => any,
@@ -475,6 +695,19 @@ 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(
       {
@@ -497,6 +730,7 @@ export class LibroPromptCellView extends LibroEditableExecutableCellView {
       value: item.key,
       label: <SelectionItemLabel item={item} />,
       disabled: !!item.disabled,
+      support_interpreter: item.support_interpreter,
     };
   };
 
@@ -533,7 +767,7 @@ export class LibroPromptCellView extends LibroEditableExecutableCellView {
     }
   };
 
-  checkVariableNameAvailable = (variableName: string) => {
+  checkVariableNameAvailable = (variableName?: string) => {
     return (
       this.parent.model.cells.findIndex(
         (cell) =>
@@ -542,10 +776,13 @@ export class LibroPromptCellView extends LibroEditableExecutableCellView {
       ) > -1
     );
   };
-  handleModelNameChange = (value: string) => {
+  handleModelNameChange = (value: string, option?: DefaultOptionType) => {
     this.model.chatKey = value;
+    if (option) {
+      this.model.supportInterpreter = option['support_interpreter'];
+    }
   };
-  handleVariableNameChange = (value: string) => {
+  handleVariableNameChange = (value?: string) => {
     this.model.variableName = value;
   };
   handleRecordChange = (value: string | undefined) => {

package/src/prompt-output-render.tsx

@@ -1,19 +1,19 @@
-import type {
-  IMimeBundle,
-  MultilineString,
-  PartialJSONObject,
-} from '@difizen/libro-common';
+import type { MultilineString, PartialJSONObject } from '@difizen/libro-common';
 import { copy2clipboard } from '@difizen/libro-common';
 import { concatMultilineString } from '@difizen/libro-common';
 import type { BaseOutputView } from '@difizen/libro-jupyter';
 import { NotebookCommands } from '@difizen/libro-jupyter';
+import { ChatComponents } from '@difizen/magent-chat';
 import { CommandRegistry, useInject } from '@difizen/mana-app';
 import { l10n } from '@difizen/mana-l10n';
 import React, { useState } from 'react';
+import breaks from 'remark-breaks';
+import remarkGfm from 'remark-gfm';
 import { v4 } from 'uuid';
 
-import { LibroLLMRenderMemo } from './libro-llm-render.js';
+import { CodeBlock } from './code-block.js';
 import { getPythonCode } from './prompt-cell-utils.js';
+import { LibroPromptCellView } from './prompt-cell-view.js';
 
 const getModelOutput = (data: PartialJSONObject | MultilineString) => {
   if (typeof data === 'string' || Array.isArray(data)) {
@@ -29,18 +29,26 @@ export const PromptOutputRender: React.FC<{
   const { model } = props;
   const renderHTMLRef = React.createRef<HTMLDivElement>();
   const commandRegistry = useInject(CommandRegistry);
+  const LLMRender = ChatComponents.Markdown;
   const [selection, setSelection] = useState('');
 
   if (!model.data['application/vnd.libro.prompt+json']) {
     return null;
   }
 
-  const data = model.data['application/vnd.libro.prompt+json'] as IMimeBundle;
+  if (!(model.cell instanceof LibroPromptCellView)) {
+    return null;
+  }
+  const data = model.data['application/vnd.libro.prompt+json'] as
+    | PartialJSONObject
+    | MultilineString;
 
   if (!data) {
     return null;
   }
+
   const modelData = getModelOutput(data);
+  model.cell.model.promptOutput = modelData;
   const sourceArr = getPythonCode(modelData ?? '');
   const insertAndRun = async () => {
     const libro = model.cell.parent;
@@ -98,7 +106,13 @@ export const PromptOutputRender: React.FC<{
     <div className="libro-prompt-output-render-container" onMouseUp={updateSelection}>
       <div className="prompt-output-render" ref={renderHTMLRef}>
         <div className="libro-prompt-output-llm-render">
-          <LibroLLMRenderMemo data={modelData} />
+          <LLMRender
+            type="message"
+            components={{ code: CodeBlock }}
+            remarkPlugins={[remarkGfm, breaks]}
+          >
+            {modelData}
+          </LLMRender>
         </div>
       </div>
       {sourceArr.length > 0 && (

package/es/libro-llm-render.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import 'highlight.js/styles/default.css';
-import './index.less';
-export declare const LibroLLMRender: React.FC<{
-    data: string;
-}>;
-export declare const LibroLLMRenderMemo: React.NamedExoticComponent<{
-    data: string;
-}>;
-//# sourceMappingURL=libro-llm-render.d.ts.map

package/es/libro-llm-render.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"libro-llm-render.d.ts","sourceRoot":"","sources":["../src/libro-llm-render.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAC1E,OAAO,iCAAiC,CAAC;AAEzC,OAAO,cAAc,CAAC;AAiBtB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAqCrD,CAAC;AACF,eAAO,MAAM,kBAAkB;UAtCe,MAAM;EAsCE,CAAC"}

package/es/libro-llm-render.js

@@ -1,75 +0,0 @@
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { ToolbarRender } from '@difizen/mana-app';
-import hljs from 'highlight.js';
-import { marked } from 'marked';
-import { markedHighlight } from 'marked-highlight';
-import markedKatex from 'marked-katex-extension';
-import React, { useEffect, useRef, memo, useState, useMemo } from 'react';
-import 'highlight.js/styles/default.css';
-import { createPortal } from 'react-dom';
-import "./index.less";
-import { jsx as _jsx } from "react/jsx-runtime";
-marked.use(markedKatex({
-  throwOnError: false,
-  output: 'mathml'
-}), markedHighlight({
-  langPrefix: 'libro-llm-hljs code-block language-',
-  highlight: function highlight(code, lang) {
-    var language = hljs.getLanguage(lang) ? lang : 'python';
-    return hljs.highlight(code, {
-      language: language
-    }).value;
-  }
-}), {
-  headerIds: false,
-  mangle: false
-});
-export var LibroLLMRender = function LibroLLMRender(props) {
-  var data = props.data;
-  var renderMarkdownRef = useRef(null);
-  // const LLMExtraRender = useInject<LLMExtraRenderProvider>(LLMExtraRenderProvider);
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    renderExtraList = _useState2[0],
-    setRenderExtraList = _useState2[1];
-  var codeToolbarArgs = useMemo(function () {
-    return [data, 'CodeToolbar'];
-  }, [data]);
-  useEffect(function () {
-    if (!renderMarkdownRef.current) {
-      return;
-    }
-    renderMarkdownRef.current.innerHTML = marked.parse(data);
-    var hljsElements = renderMarkdownRef.current.getElementsByClassName('libro-llm-hljs');
-    for (var i = 0; i < hljsElements.length; i++) {
-      var newElement = document.createElement('div');
-      var newRenderExtraList = [].concat(_toConsumableArray(renderExtraList), [newElement]);
-      setRenderExtraList(newRenderExtraList);
-      var hljsElement = hljsElements.item(i);
-      if (hljsElement) {
-        var _hljsElement$parentNo;
-        (_hljsElement$parentNo = hljsElement.parentNode) === null || _hljsElement$parentNo === void 0 || _hljsElement$parentNo.insertBefore(newElement, hljsElement.nextSibling);
-      }
-    }
-  }, [data]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  return /*#__PURE__*/_jsx("div", {
-    className: "libro-llm-output-render",
-    ref: renderMarkdownRef,
-    children: renderExtraList.map(function (element) {
-      return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(ToolbarRender, {
-        data: codeToolbarArgs
-      }), element);
-    })
-  });
-};
-export var LibroLLMRenderMemo = /*#__PURE__*/memo(LibroLLMRender);

package/src/libro-llm-render.tsx

@@ -1,64 +0,0 @@
-import { ToolbarRender } from '@difizen/mana-app';
-import hljs from 'highlight.js';
-import { marked } from 'marked';
-import { markedHighlight } from 'marked-highlight';
-import markedKatex from 'marked-katex-extension';
-import React, { useEffect, useRef, memo, useState, useMemo } from 'react';
-import 'highlight.js/styles/default.css';
-import { createPortal } from 'react-dom';
-import './index.less';
-
-marked.use(
-  markedKatex({
-    throwOnError: false,
-    output: 'mathml',
-  }),
-  markedHighlight({
-    langPrefix: 'libro-llm-hljs code-block language-',
-    highlight(code: string, lang: string) {
-      const language = hljs.getLanguage(lang) ? lang : 'python';
-      return hljs.highlight(code, { language }).value;
-    },
-  }),
-  { headerIds: false, mangle: false },
-);
-
-export const LibroLLMRender: React.FC<{ data: string }> = (props: { data: string }) => {
-  const { data } = props;
-
-  const renderMarkdownRef = useRef<HTMLDivElement>(null);
-  // const LLMExtraRender = useInject<LLMExtraRenderProvider>(LLMExtraRenderProvider);
-  const [renderExtraList, setRenderExtraList] = useState<HTMLDivElement[]>([]);
-  const codeToolbarArgs = useMemo(() => {
-    return [data, 'CodeToolbar'];
-  }, [data]);
-
-  useEffect(() => {
-    if (!renderMarkdownRef.current) {
-      return;
-    }
-    renderMarkdownRef.current.innerHTML = marked.parse(data);
-
-    const hljsElements =
-      renderMarkdownRef.current.getElementsByClassName('libro-llm-hljs');
-
-    for (let i = 0; i < hljsElements.length; i++) {
-      const newElement = document.createElement('div');
-      const newRenderExtraList = [...renderExtraList, newElement];
-      setRenderExtraList(newRenderExtraList);
-      const hljsElement = hljsElements.item(i);
-      if (hljsElement) {
-        hljsElement.parentNode?.insertBefore(newElement, hljsElement.nextSibling);
-      }
-    }
-  }, [data]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  return (
-    <div className="libro-llm-output-render" ref={renderMarkdownRef}>
-      {renderExtraList.map((element) => {
-        return createPortal(<ToolbarRender data={codeToolbarArgs} />, element);
-      })}
-    </div>
-  );
-};
-export const LibroLLMRenderMemo = memo(LibroLLMRender);