@difizen/libro-prompt-cell 0.1.13 → 0.1.15

package/es/prompt-output-render.js

@@ -37,15 +37,14 @@ export var PromptOutputRender = function PromptOutputRender(props) {
   if (!model.data['application/vnd.libro.prompt+json']) {
     return null;
   }
-  var _ref = model.data['application/vnd.libro.prompt+json'],
-    data = _ref.data;
+  var data = model.data['application/vnd.libro.prompt+json'];
   if (!data) {
     return null;
   }
   var modelData = getModelOutput(data);
   var sourceArr = getPythonCode(modelData !== null && modelData !== void 0 ? modelData : '');
   var insertAndRun = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
       var libro, insertIndex;
       return _regeneratorRuntime().wrap(function _callee3$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
@@ -56,7 +55,7 @@ export var PromptOutputRender = function PromptOutputRender(props) {
             });
             _context3.next = 4;
             return Promise.all(sourceArr.map( /*#__PURE__*/function () {
-              var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(value, index) {
+              var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(value, index) {
                 return _regeneratorRuntime().wrap(function _callee$(_context) {
                   while (1) switch (_context.prev = _context.next) {
                     case 0:
@@ -76,13 +75,13 @@ export var PromptOutputRender = function PromptOutputRender(props) {
                 }, _callee);
               }));
               return function (_x, _x2) {
-                return _ref3.apply(this, arguments);
+                return _ref2.apply(this, arguments);
               };
             }()));
           case 4:
             _context3.next = 6;
             return Promise.all(sourceArr.map( /*#__PURE__*/function () {
-              var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_, index) {
+              var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_, index) {
                 return _regeneratorRuntime().wrap(function _callee2$(_context2) {
                   while (1) switch (_context2.prev = _context2.next) {
                     case 0:
@@ -95,7 +94,7 @@ export var PromptOutputRender = function PromptOutputRender(props) {
                 }, _callee2);
               }));
               return function (_x3, _x4) {
-                return _ref4.apply(this, arguments);
+                return _ref3.apply(this, arguments);
               };
             }()));
           case 6:
@@ -105,11 +104,11 @@ export var PromptOutputRender = function PromptOutputRender(props) {
       }, _callee3);
     }));
     return function insertAndRun() {
-      return _ref2.apply(this, arguments);
+      return _ref.apply(this, arguments);
     };
   }();
   var insert = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
       var libro, insertIndex;
       return _regeneratorRuntime().wrap(function _callee5$(_context5) {
         while (1) switch (_context5.prev = _context5.next) {
@@ -120,7 +119,7 @@ export var PromptOutputRender = function PromptOutputRender(props) {
             });
             _context5.next = 4;
             return Promise.all(sourceArr.map( /*#__PURE__*/function () {
-              var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(value, index) {
+              var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(value, index) {
                 return _regeneratorRuntime().wrap(function _callee4$(_context4) {
                   while (1) switch (_context4.prev = _context4.next) {
                     case 0:
@@ -140,7 +139,7 @@ export var PromptOutputRender = function PromptOutputRender(props) {
                 }, _callee4);
               }));
               return function (_x5, _x6) {
-                return _ref6.apply(this, arguments);
+                return _ref5.apply(this, arguments);
               };
             }()));
           case 4:
@@ -150,11 +149,11 @@ export var PromptOutputRender = function PromptOutputRender(props) {
       }, _callee5);
     }));
     return function insert() {
-      return _ref5.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
   var copy = /*#__PURE__*/function () {
-    var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+    var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
       return _regeneratorRuntime().wrap(function _callee6$(_context6) {
         while (1) switch (_context6.prev = _context6.next) {
           case 0:
@@ -166,11 +165,11 @@ export var PromptOutputRender = function PromptOutputRender(props) {
       }, _callee6);
     }));
     return function copy() {
-      return _ref7.apply(this, arguments);
+      return _ref6.apply(this, arguments);
     };
   }();
   var copySelection = /*#__PURE__*/function () {
-    var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+    var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
       return _regeneratorRuntime().wrap(function _callee7$(_context7) {
         while (1) switch (_context7.prev = _context7.next) {
           case 0:
@@ -182,7 +181,7 @@ export var PromptOutputRender = function PromptOutputRender(props) {
       }, _callee7);
     }));
     return function copySelection() {
-      return _ref8.apply(this, arguments);
+      return _ref7.apply(this, arguments);
     };
   }();
   var updateSelection = function updateSelection() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@difizen/libro-prompt-cell",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "",
   "keywords": [
     "libro",
@@ -32,18 +32,22 @@
     "src"
   ],
   "dependencies": {
-    "@difizen/libro-code-editor": "^0.1.13",
-    "@difizen/libro-jupyter": "^0.1.13",
-    "@difizen/libro-rendermime": "^0.1.13",
-    "@difizen/libro-codemirror": "^0.1.13",
-    "@difizen/libro-common": "^0.1.13",
-    "@difizen/libro-core": "^0.1.13",
+    "@difizen/libro-code-editor": "^0.1.15",
+    "@difizen/libro-jupyter": "^0.1.15",
+    "@difizen/libro-rendermime": "^0.1.15",
+    "@difizen/libro-codemirror": "^0.1.15",
+    "@difizen/libro-common": "^0.1.15",
+    "@difizen/libro-core": "^0.1.15",
+    "@ant-design/icons": "^5.1.0",
+    "@difizen/mana-l10n": "latest",
     "@difizen/mana-app": "latest",
+    "classnames": "^2.3.2",
     "highlight.js": "^11.8.0",
     "marked": "^5.1.1",
     "marked-highlight": "^2.0.1",
     "marked-katex-extension": "^3.0.0",
     "uuid": "^9.0.0",
+    "rc-select": "^14.9.2",
     "react-dom": "^18.2.0"
   },
   "peerDependencies": {

package/src/index.less

@@ -1,3 +1,9 @@
+.libro-prompt-cell-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .libro-llm-hljs {
   overflow-x: auto;
   white-space: pre-wrap !important;

package/src/input-handler/chat-record-input.tsx

@@ -0,0 +1,93 @@
+import { EditFilled } from '@ant-design/icons';
+import { LirboContextKey } from '@difizen/libro-core';
+import { useInject } from '@difizen/mana-app';
+import { Select, Tag } from 'antd';
+import classNames from 'classnames';
+import type { BaseSelectRef } from 'rc-select';
+import type { FC } from 'react';
+import { useEffect } from 'react';
+import { useRef } from 'react';
+import { useState } from 'react';
+import './index.less';
+
+interface ChatRecordInputProps {
+  value: string;
+  handleChange: (value: string) => void;
+  onFocus?: () => void;
+  classname?: string;
+  records: string[];
+}
+const ChatRecordInputCls = 'libro-chat-record-input';
+export const ChatRecordInput: FC<ChatRecordInputProps> = (
+  props: ChatRecordInputProps,
+) => {
+  const { value, records, handleChange, onFocus } = props;
+  const selectRef = useRef<BaseSelectRef>(null);
+  const [selecting, setSelecting] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const contextKey = useInject(LirboContextKey);
+
+  useEffect(() => {
+    if (selecting) {
+      selectRef.current?.focus();
+    }
+  }, [selecting]);
+
+  const handleSelecting = (value: boolean) => {
+    if (value) {
+      contextKey.disableCommandMode();
+    } else {
+      contextKey.enableCommandMode();
+    }
+    setSelecting(value);
+  };
+
+  return (
+    <div
+      className={classNames(ChatRecordInputCls, props.classname)}
+      ref={ref}
+      tabIndex={0}
+    >
+      <span className="libro-chat-record-input-label">Chat: </span>
+      {selecting ? (
+        <Select
+          ref={selectRef}
+          className="libro-chat-record-input-select"
+          size="small"
+          mode="tags"
+          style={{ width: '100%' }}
+          placeholder="选择或输入聊天标识"
+          onSelect={handleChange}
+          showSearch={false}
+          onBlur={() => {
+            handleSelecting(false);
+          }}
+          onFocus={() => {
+            if (onFocus) {
+              onFocus();
+            }
+          }}
+          options={
+            records.map((record) => ({
+              label: record,
+              value: record,
+            })) || []
+          }
+        />
+      ) : (
+        <>
+          <span className="libro-chat-record-input-value">
+            {value ? <Tag>{value}</Tag> : '...'}
+          </span>
+          <span
+            onClick={() => {
+              handleSelecting(true);
+            }}
+          >
+            <EditFilled />
+          </span>
+        </>
+      )}
+    </div>
+  );
+};

package/src/input-handler/index.less

@@ -0,0 +1,91 @@
+.libro-chat-record-input {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 8px;
+
+  &-select {
+    min-width: 180px;
+    padding: 0 8px;
+  }
+
+  &-value {
+    padding-left: 2px;
+
+    span {
+      margin-inline-end: 0;
+    }
+  }
+
+  &-label {
+    padding-left: 16px;
+    color: var(--mana-libro-cell-header-title);
+    font-size: 14px;
+    letter-spacing: 0;
+  }
+
+  svg {
+    margin-left: 4px;
+    color: #bdc0c4 !important;
+    cursor: pointer;
+
+    &:hover {
+      color: #1590ff !important;
+    }
+  }
+}
+
+.libro-variable-name-input {
+  border-left: 1px solid var(--mana-color-border);
+  display: inline-flex;
+  align-items: center;
+
+  svg {
+    margin-left: 4px;
+    color: #bdc0c4 !important;
+    cursor: pointer;
+
+    &:hover {
+      color: #1590ff !important;
+    }
+  }
+
+  &-value {
+    padding-left: 2px;
+  }
+
+  &-label {
+    padding-left: 16px;
+    color: var(--mana-libro-cell-header-title);
+    font-size: 14px;
+    letter-spacing: 0;
+  }
+
+  &-input {
+    width: 120px;
+    height: 32px;
+    border: 1px solid #d6d8da;
+    border-radius: 6px;
+    box-shadow: unset;
+  }
+
+  &-popover {
+    vertical-align: middle;
+  }
+
+  &-warning-text {
+    margin-top: 4px;
+    color: #faad14;
+  }
+
+  &-actions {
+    padding: 2px 0;
+
+    span + span {
+      margin-left: 8px;
+    }
+
+    span {
+      color: #1890ff;
+    }
+  }
+}

package/src/input-handler/index.ts

@@ -0,0 +1,2 @@
+export * from './variable-name-input.js';
+export * from './chat-record-input.js';

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

@@ -0,0 +1,121 @@
+import { EditFilled } from '@ant-design/icons';
+import { LirboContextKey } from '@difizen/libro-core';
+import { useInject } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+import { Input, Popover } from 'antd';
+import classNames from 'classnames';
+import type { FC } from 'react';
+import { useEffect } from 'react';
+import { useRef } from 'react';
+import { useCallback, useState } from 'react';
+import './index.less';
+
+interface VariableNameInputPopoverContentProps {
+  value: string;
+  handleVariableNameChange: (variableName: string) => void;
+  checkVariableNameAvailable: (variableName: string) => boolean;
+  cancel: () => void;
+}
+
+export const VariableNameInputPopoverContent: FC<
+  VariableNameInputPopoverContentProps
+> = (props: VariableNameInputPopoverContentProps) => {
+  const { value, handleVariableNameChange, checkVariableNameAvailable, cancel } = props;
+  const [variableNameAvailable, setVariableNameAvailable] = useState(true);
+  const [variableName, setVariableName] = useState(value);
+
+  useEffect(() => {
+    setVariableName(value);
+  }, [value]);
+
+  const handleValueChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (checkVariableNameAvailable(e.target.value)) {
+        setVariableNameAvailable(false);
+      } else {
+        setVariableNameAvailable(true);
+      }
+      setVariableName(e.target.value);
+    },
+    [checkVariableNameAvailable],
+  );
+
+  const handValueSave = useCallback(() => {
+    handleVariableNameChange(variableName);
+    cancel();
+  }, [variableName, handleVariableNameChange, cancel]);
+
+  return (
+    <>
+      <Input
+        status={`${variableNameAvailable ? '' : 'warning'}`}
+        className="libro-variable-name-input-component"
+        onChange={handleValueChange}
+        value={variableName}
+      />
+
+      {!variableNameAvailable && (
+        <span className="libro-variable-name-input-warning-text">
+          {l10n.t('当前变量名已存在')}
+        </span>
+      )}
+
+      <div className="libro-variable-name-input-actions">
+        <span onClick={cancel}>{l10n.t('取消')}</span>
+        <span onClick={handValueSave}>{l10n.t('保存')}</span>
+      </div>
+    </>
+  );
+};
+
+interface VariableNameInputProps {
+  value: string;
+  handleVariableNameChange: (variableName: string) => void;
+  checkVariableNameAvailable: (variableName: string) => boolean;
+  classname?: string;
+}
+const variableNameInputCls = 'libro-variable-name-input';
+export const VariableNameInput: FC<VariableNameInputProps> = (
+  props: VariableNameInputProps,
+) => {
+  const { value } = props;
+  const [popoverVisible, setPopoverVisible] = useState(false);
+  const contextKey = useInject(LirboContextKey);
+  const ref = useRef<HTMLDivElement>(null);
+  return (
+    <div className={classNames(variableNameInputCls, props.classname)} ref={ref}>
+      <span className="libro-variable-name-input-label">Save: </span>
+      <span className="libro-variable-name-input-value">{value || '...'}</span>
+      <span className="libro-variable-name-input-popover">
+        <Popover
+          content={
+            <VariableNameInputPopoverContent
+              {...props}
+              cancel={() => {
+                setPopoverVisible(false);
+              }}
+            />
+          }
+          placement="bottomLeft"
+          open={popoverVisible}
+          onOpenChange={(visible) => {
+            if (visible) {
+              contextKey.disableCommandMode();
+            } else {
+              contextKey.enableCommandMode();
+            }
+            setPopoverVisible(visible);
+          }}
+          getPopupContainer={() => {
+            return ref.current?.getElementsByClassName(
+              variableNameInputCls,
+            )[0] as HTMLElement;
+          }}
+          trigger="click"
+        >
+          <EditFilled />
+        </Popover>
+      </span>
+    </div>
+  );
+};

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

@@ -10,6 +10,9 @@ import { singleton } from '@difizen/mana-app';
 
 export interface PromptDecodedFormatter extends DefaultDecodedFormatter {
   modelType?: string;
+  variableName?: string;
+  cellId?: string;
+  record?: string;
 }
 
 @singleton({ contrib: FormatterContribution })
@@ -27,8 +30,11 @@ export class FormatterPromptMagicContribution
 
   encode = (source: PromptDecodedFormatter) => {
     const promptObj = {
-      model_name: source.modelType || 'CodeGPT',
+      model_name: source.modelType || 'chatgpt',
       prompt: source.value,
+      variable_name: source.variableName,
+      cell_id: source.cellId,
+      record: source.record,
     };
     const encodeValue = `%%prompt \n${JSON.stringify(promptObj)}`;
     return {
@@ -41,15 +47,20 @@ export class FormatterPromptMagicContribution
 
   decode = (formatterValue: DefaultEncodedFormatter) => {
     const value = concatMultilineString(formatterValue.source);
-
     if (value.startsWith('%%prompt \n')) {
       const run = value.split('%%prompt \n')[1];
       const runValue = JSON.parse(run);
       const codeValue = runValue.prompt;
       const modelType = runValue.model_name;
+      const variableName = runValue.variable_name;
+      const cellId = runValue.cell_id;
+      const record = runValue.record;
       return {
         value: codeValue,
+        variableName,
         modelType,
+        cellId,
+        record,
       };
     }
     return {

package/src/module.ts

@@ -6,17 +6,17 @@ import { FormatterPromptMagicContribution } from './libro-formatter-prompt-magic
 import { LibroPromptCellCommandContribution } from './prompt-cell-command-contribution.js';
 import { PromptCellContribution } from './prompt-cell-contribution.js';
 import { LibroPromptCellModel } from './prompt-cell-model.js';
-import { LibroPromptOutputArea } from './prompt-cell-output-area.js';
 import { LibroPromptCellModelFactory } from './prompt-cell-protocol.js';
+import { PromptScript } from './prompt-cell-script.js';
 import { LibroPromptCellView } from './prompt-cell-view.js';
 import { LibroPromptOutputMimeTypeContribution } from './prompt-output-rendermime-contribution.js';
 
 export const LibroPromptCellModule = ManaModule.create()
   .register(
     PromptCellContribution,
+    PromptScript,
     LibroPromptCellView,
     LibroPromptCellModel,
-    LibroPromptOutputArea,
     LibroPromptOutputMimeTypeContribution,
     LibroPromptCellCommandContribution,
     FormatterPromptMagicContribution,

package/src/prompt-cell-model.ts

@@ -36,7 +36,15 @@ export class LibroPromptCellModel
   @prop()
   kernelExecuting = false;
 
+  @prop()
+  record: string;
+
+  @prop()
   modelType: string;
+
+  @prop()
+  variableName: string;
+
   @prop()
   executing: boolean;
   @prop()
@@ -51,6 +59,24 @@ export class LibroPromptCellModel
     return this.msgChangeEmitter.event;
   }
 
+  override get decodeObject() {
+    return {
+      ...this._decodeObject,
+      variableName: this.variableName,
+      modelType: this.modelType,
+      record: this.record,
+      value: this.value,
+      cellId: this.id,
+    };
+  }
+
+  override set decodeObject(value) {
+    super.decodeObject = value;
+    this.variableName = value.variableName;
+    this.modelType = value.modelType;
+    this.record = value.record;
+  }
+
   viewManager: ViewManager;
 
   constructor(

package/src/prompt-cell-script.ts

@@ -1,4 +1,9 @@
-export namespace PromptScript {
-  export const get_models =
-    'import json\nfrom aistudio_notebook.prompt_flow import prompt_model_registry\nmodel_list = list(prompt_model_registry.promptModelRegistry.get_models().keys())\nmodel_data = json.dumps(model_list)\nprint(model_data)\n';
+import { singleton } from '@difizen/mana-app';
+
+@singleton()
+export class PromptScript {
+  public readonly getChatObjects = `from libro_server import chat_object_manager
+chat_object_manager.dump_list_json()`;
+  public readonly getChatRecoreds = `from libro_server import chat_record_provider
+chat_record_provider.get_records()`;
 }