feat(prompt): prompt cell initialize

apps/docs/src/lab/app.ts

@@ -14,8 +14,8 @@ export class LibroApp implements ApplicationContribution {
 
   async onStart() {
     this.serverConnection.updateSettings({
-      baseUrl: 'http://localhost:8888/',
-      wsUrl: 'ws://localhost:8888/',
+      baseUrl: "http://localhost:8888/",
+      wsUrl: "ws://localhost:8888/",
     });
     this.serverManager.launch();
   }

packages/libro-jupyter/src/components/index.less

@@ -20,6 +20,7 @@
   }
 
   p {
+    margin: 0;
     width: calc(100% - 56px);
     white-space: nowrap;
     overflow: hidden;

packages/libro-lab/package.json

@@ -48,8 +48,9 @@
   "dependencies": {
     "@difizen/mana-app": "latest",
     "@difizen/mana-react": "latest",
-    "@difizen/libro-jupyter": "0.1.0",
-    "@difizen/libro-toc": "0.1.0",
+    "@difizen/libro-jupyter": "^0.1.0",
+    "@difizen/libro-toc": "^0.1.0",
+    "@difizen/libro-prompt-cell": "^0.1.0",
     "@ant-design/icons": "^5.1.0",
     "classnames": "^2.2.6"
   },

packages/libro-lab/src/module.tsx

@@ -1,4 +1,5 @@
 import { FileView, LibroJupyterModule } from '@difizen/libro-jupyter';
+import { LibroPromptCellModule } from '@difizen/libro-prompt-cell';
 import {
   ManaModule,
   createSlotPreference,
@@ -20,8 +21,8 @@ import {
 import './index.less';
 import { LibroLabHeaderMenuModule } from './menu/module.js';
 import { LibroLabTocModule } from './toc/module.js';
-import { WelcomeView } from './welcome/index.js';
 import { EntryPointView } from './welcome/entry-point-view.js';
+import { WelcomeView } from './welcome/index.js';
 
 export const LibroLabModule = ManaModule.create()
   .register(
@@ -87,4 +88,5 @@ export const LibroLabModule = ManaModule.create()
     LibroLabLayoutModule,
     LibroLabHeaderMenuModule,
     LibroLabTocModule,
+    LibroPromptCellModule,
   );

packages/libro-prompt-cell/.eslintrc.mjs

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: require.resolve('../../.eslintrc.js'),
+};

packages/libro-prompt-cell/.fatherrc.ts

@@ -0,0 +1,15 @@
+export default {
+  platform: 'browser',
+  esm: {
+    output: 'es',
+  },
+  extraBabelPlugins: [
+    ['@babel/plugin-proposal-decorators', { legacy: true }],
+    ['@babel/plugin-transform-flow-strip-types'],
+    ['@babel/plugin-transform-class-properties', { loose: true }],
+    ['@babel/plugin-transform-private-methods', { loose: true }],
+    ['@babel/plugin-transform-private-property-in-object', { loose: true }],
+    ['babel-plugin-parameter-decorator'],
+  ],
+  extraBabelPresets: [['@babel/preset-typescript', { onlyRemoveTypeImports: true }]],
+};

packages/libro-prompt-cell/CHANGELOG.md

@@ -0,0 +1,5 @@
+# @difizen/libro-prompt-cell
+
+## 0.0.2-alpha.0
+
+### Patch Changes

packages/libro-prompt-cell/README.md

@@ -0,0 +1 @@
+# libro-prompt-cell

packages/libro-prompt-cell/babel.config.json

@@ -0,0 +1,11 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+  "plugins": [
+    ["@babel/plugin-proposal-decorators", { "legacy": true }],
+    "@babel/plugin-transform-flow-strip-types",
+    ["@babel/plugin-transform-private-methods", { "loose": true }],
+    ["@babel/plugin-transform-private-property-in-object", { "loose": true }],
+    ["@babel/plugin-transform-class-properties", { "loose": true }],
+    "babel-plugin-parameter-decorator"
+  ]
+}

packages/libro-prompt-cell/jest.config.mjs

@@ -0,0 +1,3 @@
+import configs from '../../jest.config.mjs';
+
+export default { ...configs };

packages/libro-prompt-cell/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@difizen/libro-prompt-cell",
+  "version": "0.1.0",
+  "description": "",
+  "keywords": [
+    "libro",
+    "notebook"
+  ],
+  "repository": "git@github.com:difizen/libro.git",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "typings": "./es/index.d.ts",
+      "default": "./es/index.js"
+    },
+    "./mock": {
+      "typings": "./es/mock/index.d.ts",
+      "default": "./es/mock/index.js"
+    },
+    "./es/mock": {
+      "typings": "./es/mock/index.d.ts",
+      "default": "./es/mock/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "es/index.js",
+  "module": "es/index.js",
+  "typings": "es/index.d.ts",
+  "files": [
+    "es",
+    "src"
+  ],
+  "scripts": {
+    "setup": "father build",
+    "build": "father build",
+    "test": ": Note: lint task is delegated to test:* scripts",
+    "test:vitest": "vitest run",
+    "test:jest": "jest",
+    "coverage": ": Note: lint task is delegated to coverage:* scripts",
+    "coverage:vitest": "vitest run --coverage",
+    "coverage:jest": "jest --coverage",
+    "lint": ": Note: lint task is delegated to lint:* scripts",
+    "lint:eslint": "eslint src",
+    "lint:tsc": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@difizen/libro-code-editor": "^0.0.2-alpha.0",
+    "@difizen/libro-jupyter": "0.0.2-alpha.0",
+    "@difizen/libro-rendermime": "^0.0.2-alpha.0",
+    "@difizen/libro-codemirror": "^0.0.2-alpha.0",
+    "@difizen/libro-common": "^0.0.2-alpha.0",
+    "@difizen/libro-core": "^0.0.2-alpha.0",
+    "@difizen/mana-app": "latest",
+    "highlight.js": "^11.8.0",
+    "marked": "^5.1.1",
+    "marked-highlight": "^2.0.1",
+    "marked-katex-extension": "^3.0.0",
+    "uuid": "^9.0.0",
+    "react-dom": "^18.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "antd": "^5.8.6"
+  },
+  "devDependencies": {
+    "@types/marked": "^5.0.1",
+    "@types/react": "^18.2.25",
+    "@types/uuid": "^9.0.2",
+    "@types/react-dom": "^18.2.4"
+  }
+}

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

@@ -0,0 +1,54 @@
+.libro-llm-hljs {
+  overflow-x: auto;
+  white-space: pre-wrap !important;
+  word-wrap: break-word !important;
+  text-shadow: unset !important;
+  color: var(--mana-libro-editor-variable-color) !important;
+
+  .hljs-title.function_ {
+    color: var(--mana-libro-editor-def-color);
+  }
+
+  .hljs-keyword {
+    color: var(--mana-libro-editor-keyword-color);
+  }
+
+  .hljs-number {
+    color: var(--mana-libro-editor-number-color);
+  }
+
+  .hljs-comment {
+    color: var(--mana-libro-editor-comment-color);
+  }
+
+  .hljs-string {
+    color: var(--mana-libro-editor-string-color);
+  }
+
+  .hljs-built_in {
+    color: var(--mana-libro-editor-builtin-color);
+  }
+}
+
+.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 {
+  .libro-llm-output-render pre {
+    background: #f4f6fb;
+    padding: 16px;
+  }
+}
+
+.libro-prompt-output-btn {
+  cursor: pointer;
+  color: #1677ff;
+  margin-left: 24px;
+}

packages/libro-prompt-cell/src/index.spec.ts

@@ -0,0 +1,11 @@
+import assert from 'assert';
+
+import { LibroPromptCellView, LibroPromptCellModelFactory } from './index.js';
+import 'reflect-metadata';
+
+describe('libro-prompt-cell', () => {
+  it('#import', () => {
+    assert(LibroPromptCellView);
+    assert(LibroPromptCellModelFactory);
+  });
+});

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

@@ -0,0 +1,5 @@
+export * from './prompt-cell-contribution.js';
+export * from './prompt-cell-model.js';
+export * from './prompt-cell-protocol.js';
+export * from './prompt-cell-view.js';
+export * from './module.js';

packages/libro-prompt-cell/src/libro-llm-render.tsx

@@ -0,0 +1,63 @@
+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;
+    },
+  }),
+);
+
+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, renderExtraList]);
+
+  return (
+    <div className="libro-llm-output-render" ref={renderMarkdownRef}>
+      {renderExtraList.map((element) => {
+        return createPortal(<ToolbarRender data={codeToolbarArgs} />, element);
+      })}
+    </div>
+  );
+};
+export const LibroLLMRenderMemo = memo(LibroLLMRender);

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

@@ -0,0 +1,35 @@
+import { CellOptions, LibroModule, OutputModule } from '@difizen/libro-core';
+import { LibroRenderMimeModule } from '@difizen/libro-rendermime';
+import { ManaModule } from '@difizen/mana-app';
+
+import { PromptCellContribution } from './prompt-cell-contribution.js';
+import { LibroPromptCellModel } from './prompt-cell-model.js';
+import { LibroPromptOutputArea } from './prompt-cell-outputArea.js';
+import { LibroPromptCellModelFactory } from './prompt-cell-protocol.js';
+import { LibroPromptCellView } from './prompt-cell-view.js';
+import { LibroPromptOutputMimeTypeContribution } from './prompt-output-rendermime-contribution.js';
+
+export const LibroPromptCellModule = ManaModule.create()
+  .register(
+    PromptCellContribution,
+    LibroPromptCellView,
+    LibroPromptCellModel,
+    LibroPromptOutputArea,
+    LibroPromptOutputMimeTypeContribution,
+
+    {
+      token: LibroPromptCellModelFactory,
+      useFactory: (ctx) => {
+        return (options: CellOptions) => {
+          const child = ctx.container.createChild();
+          child.register({
+            token: CellOptions,
+            useValue: options,
+          });
+          const model = child.get(LibroPromptCellModel);
+          return model;
+        };
+      },
+    },
+  )
+  .dependOn(LibroModule, OutputModule, LibroRenderMimeModule);