@difizen/libro-ai-native 0.2.42 → 0.2.44

package/es/ai-native-command-contribution.js

@@ -248,7 +248,7 @@ export var LibroAINativeCommandContribution = (_dec = singleton({
                   libroAINativeForCellView = _context4.sent;
                   libroAINativeForCellView.showAI = true;
                   addCellAIClassname(cell);
-                  code = l10n.getLang() === 'en-US' ? "Could you please explain this piece of code?\uFF1A".concat(cell.model.value, "\uFF0CProvide the reasons and the results of the optimization.") : "\u5E2E\u5FD9\u4F18\u5316\u4E00\u4E0B\u8FD9\u6BB5\u4EE3\u7801\uFF1A".concat(cell.model.value, "\uFF0C\u7ED9\u51FA\u539F\u56E0\u4EE5\u53CA\u4F18\u5316\u7ED3\u679C");
+                  code = l10n.getLang() === 'en-US' ? "Could you please explain this piece of code?\uFF1A".concat(cell.model.value) : "\u5E2E\u5FD9\u89E3\u91CA\u4E00\u4E0B\u8FD9\u6BB5\u4EE3\u7801\uFF1A".concat(cell.model.value);
                   libroAINativeForCellView.chatStream({
                     content: code
                   });

package/es/index.less

@@ -207,7 +207,7 @@
 
   .chat-msg-md-message {
     color: var(--mana-libro-llm-response-output-text-color);
-    width: calc(100% - 78px);
+    width: calc(100% - 104px);
     margin-right: 12px;
 
     code {
@@ -261,6 +261,7 @@
 
 .chat-msg-md-code-code {
   display: inline;
+  font-size: 13px;
 }
 
 .libro-ai-native-for-cell-container {
@@ -273,9 +274,10 @@
   code {
     background-color: unset;
     padding: unset;
+    font-size: 13px;
   }
 
-  padding: 12px;
+  padding: 22px 12px 12px;
   background-color: var(--mana-libro-input-background) !important;
   color: var(--mana-libro-llm-response-output-text-color);
   font-family:

package/es/libro-ai-native-chat-view.d.ts

@@ -1,10 +1,10 @@
+/// <reference types="react" resolution-mode="require"/>
 import type { CellView, LibroView } from '@difizen/libro-jupyter';
 import { ChatView } from '@difizen/magent-chat';
 import breaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
 import './index.less';
 import type { AiNativeChatViewOption } from './protocol.js';
-import { ImageModal } from './utils.js';
 export declare class LibroAiNativeChatView extends ChatView {
     isCellChat: boolean;
     libro?: LibroView;
@@ -13,7 +13,7 @@ export declare class LibroAiNativeChatView extends ChatView {
     getMarkdownProps(): {
         components: {
             code: (props: any) => import("react/jsx-runtime").JSX.Element;
-            img: typeof ImageModal;
+            img: ({ src, alt }: any) => JSX.Element;
         };
         remarkPlugins: (typeof remarkGfm | typeof breaks)[];
     };

package/es/libro-ai-native-chat-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"libro-ai-native-chat-view.d.ts","sourceRoot":"","sources":["../src/libro-ai-native-chat-view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,MAAM,MAAM,eAAe,CAAC;AACnC,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAIxC,qBAEa,qBAAsB,SAAQ,QAAQ;IAEjD,UAAU,UAAS;IAEnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,IAAI,CAAC,EAAE,QAAQ,CAAC;gBAEgB,MAAM,EAAE,sBAAsB;IAMrD,gBAAgB;;;;;;;cAON,eAAe,CAAC,UAAU,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;CAiBtD"}
+{"version":3,"file":"libro-ai-native-chat-view.d.ts","sourceRoot":"","sources":["../src/libro-ai-native-chat-view.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAkB,MAAM,sBAAsB,CAAC;AAEhE,OAAO,MAAM,MAAM,eAAe,CAAC;AACnC,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAM5D,qBAEa,qBAAsB,SAAQ,QAAQ;IAEjD,UAAU,UAAS;IAEnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,IAAI,CAAC,EAAE,QAAQ,CAAC;gBAEgB,MAAM,EAAE,sBAAsB;IAMrD,gBAAgB;;;;;;;cAON,eAAe,CAAC,UAAU,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;CAiBtD"}

package/es/libro-ai-native-chat-view.js

@@ -18,14 +18,14 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) { var desc = {}; Object.keys(descriptor).forEach(function (key) { desc[key] = descriptor[key]; }); desc.enumerable = !!desc.enumerable; desc.configurable = !!desc.configurable; if ('value' in desc || desc.initializer) { desc.writable = true; } desc = decorators.slice().reverse().reduce(function (desc, decorator) { return decorator(target, property, desc) || desc; }, desc); if (context && desc.initializer !== void 0) { desc.value = desc.initializer ? desc.initializer.call(context) : void 0; desc.initializer = undefined; } if (desc.initializer === void 0) { Object.defineProperty(target, property, desc); desc = null; } return desc; }
 function _initializerWarningHelper(descriptor, context) { throw new Error('Decorating class property failed. Please ensure that ' + 'transform-class-properties is enabled and runs after the decorators transform.'); }
-import { ChatView } from '@difizen/magent-chat';
+import { ChatView, ChatComponents } from '@difizen/magent-chat';
 import { inject, prop, transient, view, ViewOption } from '@difizen/mana-app';
 import breaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
 import { CodeBlockInChat } from "./ai-native-code-block.js";
 import "./index.less";
-import { ImageModal } from "./utils.js";
 var viewId = 'magent-chat';
+var ImageModal = ChatComponents.ImageModal;
 export var LibroAiNativeChatView = (_dec = transient(), _dec2 = view(viewId), _dec3 = prop(), _dec(_class = _dec2(_class = (_class2 = /*#__PURE__*/function (_ChatView) {
   _inherits(LibroAiNativeChatView, _ChatView);
   var _super = _createSuper(LibroAiNativeChatView);

package/es/utils.d.ts

@@ -2,5 +2,4 @@ import type { CellView } from '@difizen/libro-jupyter';
 export declare function stringToReadableStream(inputString: string): ReadableStream<any>;
 export declare function addCellAIClassname(cell: CellView): void;
 export declare function cancelCellAIClassname(cell: CellView): void;
-export declare function ImageModal({ src, alt }: any): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=utils.d.ts.map

package/es/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAKvD,wBAAgB,sBAAsB,CAAC,WAAW,EAAE,MAAM,uBAgBzD;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,QAAQ,QAMhD;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,QAAQ,QAInD;AAED,wBAAgB,UAAU,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,GAAG,2CA6E3C"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAEvD,wBAAgB,sBAAsB,CAAC,WAAW,EAAE,MAAM,uBAgBzD;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,QAAQ,QAMhD;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,QAAQ,QAInD"}

package/es/utils.js

@@ -1,14 +1,3 @@
-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 { Modal } from 'antd';
-import { useEffect, useState } from 'react';
-import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 export function stringToReadableStream(inputString) {
   // Convert the string into a Uint8Array
   var encoder = new TextEncoder();
@@ -39,91 +28,4 @@ export function cancelCellAIClassname(cell) {
     var _cell$className3;
     cell.className = (_cell$className3 = cell.className) === null || _cell$className3 === void 0 ? void 0 : _cell$className3.replace(' ai-cell-focus', '');
   }
-}
-export function ImageModal(_ref) {
-  var src = _ref.src,
-    alt = _ref.alt;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    visible = _useState2[0],
-    setVisible = _useState2[1];
-  var _useState3 = useState({
-      width: 0,
-      height: 0
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    imageDimensions = _useState4[0],
-    setImageDimensions = _useState4[1];
-  useEffect(function () {
-    var img = new Image();
-    img.src = src;
-    img.onload = function () {
-      setImageDimensions({
-        width: img.width,
-        height: img.height
-      });
-    };
-  }, [src]);
-  var maxModalWidth = window.innerWidth * 0.8; // 80% of the viewport width
-  var maxModalHeight = window.innerHeight * 0.8; // 80% of the viewport height
-
-  var adjustedWidth, adjustedHeight;
-  var aspectRatio = imageDimensions.width / imageDimensions.height;
-  if (imageDimensions.width > maxModalWidth) {
-    adjustedWidth = maxModalWidth;
-    adjustedHeight = adjustedWidth / aspectRatio;
-  } else if (imageDimensions.height > maxModalHeight) {
-    adjustedHeight = maxModalHeight;
-    adjustedWidth = adjustedHeight * aspectRatio;
-  } else {
-    adjustedWidth = imageDimensions.width;
-    adjustedHeight = imageDimensions.height;
-  }
-  return /*#__PURE__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsx("img", {
-      src: src,
-      alt: alt,
-      style: {
-        cursor: 'pointer'
-      },
-      onClick: function onClick() {
-        return setVisible(true);
-      },
-      onLoad: function onLoad() {
-        var _document$getElementB;
-        // 解决生成图片没有滚动到最下方的问题。
-        (_document$getElementB = document.getElementById('chat-main-scroll')) === null || _document$getElementB === void 0 || _document$getElementB.scrollIntoView(false);
-      }
-    }), /*#__PURE__*/_jsx(Modal, {
-      open: visible,
-      closeIcon: false,
-      footer: null,
-      width: adjustedWidth + 30,
-      onCancel: function onCancel() {
-        return setVisible(false);
-      },
-      bodyStyle: {
-        padding: 0,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: adjustedHeight
-      },
-      children: /*#__PURE__*/_jsx(TransformWrapper, {
-        initialScale: 1,
-        initialPositionX: 0,
-        initialPositionY: 0,
-        children: /*#__PURE__*/_jsx(TransformComponent, {
-          children: /*#__PURE__*/_jsx("img", {
-            src: src,
-            alt: alt,
-            style: {
-              width: '100%',
-              height: '100%'
-            }
-          })
-        })
-      })
-    })]
-  });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@difizen/libro-ai-native",
-  "version": "0.2.42",
+  "version": "0.2.44",
   "description": "",
   "keywords": [
     "libro",
@@ -32,9 +32,8 @@
     "src"
   ],
   "dependencies": {
-    "@difizen/libro-jupyter": "^0.2.42",
+    "@difizen/libro-jupyter": "^0.2.44",
     "@ant-design/icons": "^5.4.0",
-    "react-zoom-pan-pinch": "^3.6.1",
     "@difizen/mana-app": "latest",
     "@difizen/mana-l10n": "latest",
     "@difizen/magent-libro": "^0.1.27",

package/src/ai-native-command-contribution.tsx

@@ -200,8 +200,8 @@ export class LibroAINativeCommandContribution
         addCellAIClassname(cell);
         const code =
           l10n.getLang() === 'en-US'
-            ? `Could you please explain this piece of code?：${cell.model.value}，Provide the reasons and the results of the optimization.`
-            : `帮忙优化一下这段代码：${cell.model.value}，给出原因以及优化结果`;
+            ? `Could you please explain this piece of code?：${cell.model.value}`
+            : `帮忙解释一下这段代码：${cell.model.value}`;
         libroAINativeForCellView.chatStream({
           content: code,
         });

package/src/index.less

@@ -207,7 +207,7 @@
 
   .chat-msg-md-message {
     color: var(--mana-libro-llm-response-output-text-color);
-    width: calc(100% - 78px);
+    width: calc(100% - 104px);
     margin-right: 12px;
 
     code {
@@ -261,6 +261,7 @@
 
 .chat-msg-md-code-code {
   display: inline;
+  font-size: 13px;
 }
 
 .libro-ai-native-for-cell-container {
@@ -273,9 +274,10 @@
   code {
     background-color: unset;
     padding: unset;
+    font-size: 13px;
   }
 
-  padding: 12px;
+  padding: 22px 12px 12px;
   background-color: var(--mana-libro-input-background) !important;
   color: var(--mana-libro-llm-response-output-text-color);
   font-family:

package/src/libro-ai-native-chat-view.tsx

@@ -1,5 +1,5 @@
 import type { CellView, LibroView } from '@difizen/libro-jupyter';
-import { ChatView } from '@difizen/magent-chat';
+import { ChatView, ChatComponents } from '@difizen/magent-chat';
 import { inject, prop, transient, view, ViewOption } from '@difizen/mana-app';
 import breaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
@@ -7,10 +7,11 @@ import remarkGfm from 'remark-gfm';
 import { CodeBlockInChat } from './ai-native-code-block.js';
 import './index.less';
 import type { AiNativeChatViewOption } from './protocol.js';
-import { ImageModal } from './utils.js';
 
 const viewId = 'magent-chat';
 
+const ImageModal = ChatComponents.ImageModal as ({ src, alt }: any) => JSX.Element;
+
 @transient()
 @view(viewId)
 export class LibroAiNativeChatView extends ChatView {

package/src/utils.tsx

@@ -1,7 +1,4 @@
 import type { CellView } from '@difizen/libro-jupyter';
-import { Modal } from 'antd';
-import { useEffect, useState } from 'react';
-import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
 
 export function stringToReadableStream(inputString: string) {
   // Convert the string into a Uint8Array
@@ -34,82 +31,3 @@ export function cancelCellAIClassname(cell: CellView) {
     cell.className = cell.className?.replace(' ai-cell-focus', '');
   }
 }
-
-export function ImageModal({ src, alt }: any) {
-  const [visible, setVisible] = useState(false);
-  const [imageDimensions, setImageDimensions] = useState({
-    width: 0,
-    height: 0,
-  });
-
-  useEffect(() => {
-    const img = new Image();
-    img.src = src;
-    img.onload = () => {
-      setImageDimensions({
-        width: img.width,
-        height: img.height,
-      });
-    };
-  }, [src]);
-
-  const maxModalWidth = window.innerWidth * 0.8; // 80% of the viewport width
-  const maxModalHeight = window.innerHeight * 0.8; // 80% of the viewport height
-
-  let adjustedWidth, adjustedHeight;
-
-  const aspectRatio = imageDimensions.width / imageDimensions.height;
-
-  if (imageDimensions.width > maxModalWidth) {
-    adjustedWidth = maxModalWidth;
-    adjustedHeight = adjustedWidth / aspectRatio;
-  } else if (imageDimensions.height > maxModalHeight) {
-    adjustedHeight = maxModalHeight;
-    adjustedWidth = adjustedHeight * aspectRatio;
-  } else {
-    adjustedWidth = imageDimensions.width;
-    adjustedHeight = imageDimensions.height;
-  }
-
-  return (
-    <div>
-      <img
-        src={src}
-        alt={alt}
-        style={{ cursor: 'pointer' }}
-        onClick={() => setVisible(true)}
-        onLoad={() => {
-          // 解决生成图片没有滚动到最下方的问题。
-          document.getElementById('chat-main-scroll')?.scrollIntoView(false);
-        }}
-      />
-      <Modal
-        open={visible}
-        closeIcon={false}
-        footer={null}
-        width={adjustedWidth + 30}
-        onCancel={() => setVisible(false)}
-        bodyStyle={{
-          padding: 0,
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          height: adjustedHeight,
-        }}
-      >
-        <TransformWrapper initialScale={1} initialPositionX={0} initialPositionY={0}>
-          <TransformComponent>
-            <img
-              src={src}
-              alt={alt}
-              style={{
-                width: '100%',
-                height: '100%',
-              }}
-            />
-          </TransformComponent>
-        </TransformWrapper>
-      </Modal>
-    </div>
-  );
-}