fix(ai-native): fix cursor in chat

difizen · Nov 4, 2024 · 4c0e7ae · 4c0e7ae
1 parent eea64f8
commit 4c0e7ae
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 85 deletions.
diff --git a/.changeset/weak-bees-cry.md b/.changeset/weak-bees-cry.md
@@ -0,0 +1,35 @@
+---
+'@difizen/libro-ai-native': patch
+'@difizen/libro-docs': patch
+'@difizen/libro-code-cell': patch
+'@difizen/libro-code-editor': patch
+'@difizen/libro-codemirror': patch
+'@difizen/libro-cofine-editor': patch
+'@difizen/libro-cofine-editor-contribution': patch
+'@difizen/libro-cofine-editor-core': patch
+'@difizen/libro-cofine-textmate': patch
+'@difizen/libro-common': patch
+'@difizen/libro-core': patch
+'@difizen/libro-jupyter': patch
+'@difizen/libro-kernel': patch
+'@difizen/libro-l10n': patch
+'@difizen/libro-lab': patch
+'@difizen/libro-language-client': patch
+'@difizen/libro-lsp': patch
+'@difizen/libro-markdown': patch
+'@difizen/libro-markdown-cell': patch
+'@difizen/libro-output': patch
+'@difizen/libro-prompt-cell': patch
+'@difizen/libro-raw-cell': patch
+'@difizen/libro-rendermime': patch
+'@difizen/libro-search': patch
+'@difizen/libro-search-code-cell': patch
+'@difizen/libro-shared-model': patch
+'@difizen/libro-sql-cell': patch
+'@difizen/libro-terminal': patch
+'@difizen/libro-toc': patch
+'@difizen/libro-virtualized': patch
+'@difizen/libro-widget': patch
+---
+
+fix cursor in chat
diff --git a/packages/libro-ai-native/package.json b/packages/libro-ai-native/package.json
@@ -47,7 +47,6 @@
   "dependencies": {
     "@difizen/libro-jupyter": "^0.2.43",
     "@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",

diff --git a/packages/libro-ai-native/src/libro-ai-native-chat-view.tsx b/packages/libro-ai-native/src/libro-ai-native-chat-view.tsx
@@ -1,16 +1,17 @@
 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';
 
 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 {

diff --git a/packages/libro-ai-native/src/utils.tsx b/packages/libro-ai-native/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>
-  );
-}