@difizen/libro-ai-native 0.2.41-next.0

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

@@ -0,0 +1,248 @@
+import { CommentOutlined } from '@ant-design/icons';
+import {
+  LibroCommandRegister,
+  LibroSlotManager,
+  LibroSlotView,
+  LibroToolbarArea,
+  LibroCellView,
+  LibroView,
+} from '@difizen/libro-jupyter';
+import type { CommandRegistry, ToolbarRegistry } from '@difizen/mana-app';
+import { inject } from '@difizen/mana-app';
+import { CommandContribution } from '@difizen/mana-app';
+import { singleton, ToolbarContribution, ViewManager } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+
+import { AINativeCommands } from './ai-native-command.js';
+import { LibroAINativeService } from './ai-native-service.js';
+import { AIToolbarSelector } from './ai-side-toolbar-selector.js';
+import { LibroAIChatSlotContribution } from './chat-slot-contribution.js';
+import { AIIcon } from './icon.js';
+import { addCellAIClassname } from './utils.js';
+
+@singleton({ contrib: [CommandContribution, ToolbarContribution] })
+export class LibroAINativeCommandContribution
+  implements ToolbarContribution, CommandContribution
+{
+  @inject(LibroCommandRegister) protected readonly libroCommand: LibroCommandRegister;
+  @inject(LibroAIChatSlotContribution)
+  libroAIChatSlotContribution: LibroAIChatSlotContribution;
+  @inject(LibroSlotManager) libroSlotManager: LibroSlotManager;
+  @inject(LibroAINativeService) libroAINativeService: LibroAINativeService;
+  @inject(ViewManager) viewManager: ViewManager;
+
+  registerToolbarItems(registry: ToolbarRegistry): void {
+    registry.registerItem({
+      id: AINativeCommands['AISideToolbarSelect'].id,
+      command: AINativeCommands['AISideToolbarSelect'].id,
+      icon: AIToolbarSelector,
+      showLabelInline: true,
+      order: 'b',
+    });
+    registry.registerItem({
+      id: AINativeCommands['Chat'].id,
+      command: AINativeCommands['Chat'].id,
+      icon: AIIcon,
+      order: 'a',
+    });
+
+    registry.registerItem({
+      id: AINativeCommands['CellChat'].id,
+      command: AINativeCommands['CellChat'].id,
+      icon: <CommentOutlined className="libro-ai-native-cell-chat-icon" />,
+      order: 'a',
+    });
+  }
+
+  registerCommands(command: CommandRegistry): void {
+    this.libroCommand.registerLibroCommand(
+      command,
+      AINativeCommands['AISideToolbarSelect'],
+      {
+        execute: async () => {
+          // this.libroService.active?.enterEditMode();
+        },
+        isVisible: (cell, libro, path) => {
+          if (!cell || !libro || !(libro instanceof LibroView)) {
+            return false;
+          }
+          return path === LibroToolbarArea.CellRight;
+        },
+        isEnabled: (cell, libro) => {
+          if (!libro || !(libro instanceof LibroView)) {
+            return false;
+          }
+          return true;
+        },
+      },
+    );
+
+    this.libroCommand.registerLibroCommand(command, AINativeCommands['CellChat'], {
+      execute: async (cell, libro) => {
+        if (!libro || !cell) {
+          return;
+        }
+        addCellAIClassname(cell);
+        const chatView = this.libroAINativeService.chatViewMap.get(libro.id);
+        const showChat = this.libroAINativeService.showChatMap.get(libro.id);
+        if (chatView) {
+          chatView.setAINativeChatView({
+            id: cell.id,
+            isCellChat: true,
+            cell: cell,
+          });
+          if (showChat) {
+            return;
+          }
+          this.libroAINativeService.showChatMap.set(libro.id, !showChat);
+          this.libroAINativeService.cellAIChatMap.set(cell.id, !showChat);
+          this.libroSlotManager.slotViewManager.addView(
+            chatView,
+            this.libroSlotManager.getSlotName(
+              libro,
+              this.libroAIChatSlotContribution.slot,
+            ),
+            {
+              reveal: true,
+              order: 'a',
+            },
+          );
+        }
+        //优化交互，用于控制点击按钮后菜单消失
+        this.libroAINativeService.showSideToolbar = false;
+      },
+      isEnabled: (cell, libro) => {
+        if (!libro || !(libro instanceof LibroView)) {
+          return false;
+        }
+        return true;
+      },
+      isVisible: (cell, libro, path) => {
+        if (!cell || !libro || !(libro instanceof LibroView)) {
+          return false;
+        }
+        return path === LibroToolbarArea.CellRight;
+      },
+    });
+    this.libroCommand.registerLibroCommand(command, AINativeCommands['Chat'], {
+      execute: async (cell, libro) => {
+        if (!libro || !(libro instanceof LibroView)) {
+          return;
+        }
+        const chatView = this.libroAINativeService.chatViewMap.get(libro.id);
+        const showChat = this.libroAINativeService.showChatMap.get(libro.id);
+        this.libroAINativeService.showChatMap;
+        if (chatView) {
+          if (showChat && chatView.chatView.isCellChat) {
+            chatView.setAINativeChatView({
+              id: libro.id,
+              isCellChat: false,
+            });
+            return;
+          }
+          chatView.setAINativeChatView({
+            id: libro.id,
+            isCellChat: false,
+          });
+          this.libroAINativeService.showChatMap.set(libro.id, !showChat);
+          if (showChat) {
+            const slotview = this.libroSlotManager.slotViewManager.getSlotView(
+              this.libroSlotManager.getSlotName(libro, 'right'),
+            );
+            if (slotview instanceof LibroSlotView) {
+              slotview.revertActive();
+            }
+          } else {
+            this.libroSlotManager.slotViewManager.addView(
+              chatView,
+              this.libroSlotManager.getSlotName(
+                libro,
+                this.libroAIChatSlotContribution.slot,
+              ),
+              {
+                reveal: true,
+                order: 'a',
+              },
+            );
+          }
+        }
+        this.libroAINativeService.showSideToolbar = false;
+      },
+      isVisible: (cell, libro, path) => {
+        if (!cell || !libro || !(libro instanceof LibroView)) {
+          return false;
+        }
+        return path === LibroToolbarArea.HeaderRight;
+      },
+      isEnabled: (cell, libro) => {
+        if (!libro || !(libro instanceof LibroView)) {
+          return false;
+        }
+        return true;
+      },
+    });
+    this.libroCommand.registerLibroCommand(command, AINativeCommands['Explain'], {
+      execute: async (cell, libro) => {
+        if (
+          !cell ||
+          !(cell instanceof LibroCellView) ||
+          !libro ||
+          !(libro instanceof LibroView)
+        ) {
+          return;
+        }
+        const libroAINativeForCellView =
+          await this.libroAINativeService.getOrCreateLibroAINativeForCellView(
+            cell.id,
+            cell,
+          );
+        libroAINativeForCellView.showAI = true;
+        addCellAIClassname(cell);
+        libroAINativeForCellView.chatStream({
+          content: l10n.getLang()
+            ? `Could you please explain this piece of code?：${cell.model.value}，Provide the reasons and the results of the optimization.`
+            : `帮忙优化一下这段代码：${cell.model.value}，给出原因以及优化结果`,
+        });
+        // this.libroService.active?.enterEditMode();
+      },
+      isEnabled: (cell, libro) => {
+        if (!libro || !(libro instanceof LibroView)) {
+          return false;
+        }
+        return true;
+      },
+    });
+
+    this.libroCommand.registerLibroCommand(command, AINativeCommands['Optimize'], {
+      execute: async (cell, libro) => {
+        if (
+          !cell ||
+          !(cell instanceof LibroCellView) ||
+          !libro ||
+          !(libro instanceof LibroView)
+        ) {
+          return;
+        }
+        const libroAINativeForCellView =
+          await this.libroAINativeService.getOrCreateLibroAINativeForCellView(
+            cell.id,
+            cell,
+          );
+        libroAINativeForCellView.showAI = true;
+        addCellAIClassname(cell);
+        libroAINativeForCellView.chatStream({
+          content: l10n.getLang()
+            ? `Please help optimize this piece of code: ${cell.model.value},provide reasons and the optimized result.`
+            : `帮忙优化一下这段代码：${cell.model.value}，给出原因以及优化结果`,
+        });
+        // this.libroService.active?.enterEditMode();
+      },
+      isEnabled: (cell, libro) => {
+        if (!libro || !(libro instanceof LibroView)) {
+          return false;
+        }
+        return true;
+      },
+    });
+  }
+}

package/src/ai-native-command.ts

@@ -0,0 +1,23 @@
+import type { Command } from '@difizen/mana-app';
+
+export const AINativeCommands: Record<string, Command & { keybind?: string }> = {
+  Explain: {
+    id: 'ai-native:explain',
+    label: 'EXPLAIN',
+  },
+  Chat: {
+    id: 'ai-native:chat',
+    label: 'Chat',
+  },
+  CellChat: {
+    id: 'ai-native:cell-chat',
+    label: 'Cell Chat',
+  },
+  AISideToolbarSelect: {
+    id: 'ai-native:side-toolbat-select',
+  },
+  Optimize: {
+    id: 'ai-native:optimize',
+    label: 'Optimize',
+  },
+};

package/src/ai-native-for-cell-view.tsx

@@ -0,0 +1,156 @@
+import { CloseOutlined } from '@ant-design/icons';
+import type { CellView } from '@difizen/libro-jupyter';
+import type { IChatMessage } from '@difizen/magent-chat';
+import { AnswerState } from '@difizen/magent-chat';
+import { ChatComponents } from '@difizen/magent-chat';
+import { ChatEvent } from '@difizen/magent-chat';
+import type { ToAutoFactory } from '@difizen/magent-core';
+import { Fetcher } from '@difizen/magent-core';
+import { toAutoFactory } from '@difizen/magent-core';
+import type { ViewComponent } from '@difizen/mana-app';
+import { ViewOption } from '@difizen/mana-app';
+import { prop } from '@difizen/mana-app';
+import { useObserve } from '@difizen/mana-app';
+import { useInject, ViewInstance } from '@difizen/mana-app';
+import { inject } from '@difizen/mana-app';
+import { BaseView, transient, view } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+import { Button } from 'antd';
+import { EventSourceParserStream } from 'eventsource-parser/stream';
+import breaks from 'remark-breaks';
+import remarkGfm from 'remark-gfm';
+
+import { CodeBlockInCell } from './ai-native-code-block.js';
+import { LibroAINativeService } from './ai-native-service.js';
+import { AILoadding } from './icon.js';
+import { LibroAIChatMessageItemModel } from './libro-ai-msg-item-model.js';
+import type { IAINativeForCellViewOption } from './protocol.js';
+import { cancelCellAIClassname, stringToReadableStream } from './utils.js';
+
+export function LibroAINativeForCellRender() {
+  const LLMRender = ChatComponents.Markdown;
+
+  const instance = useInject<LibroAINativeForCellView>(ViewInstance);
+  const libroAINativeService = useInject<LibroAINativeService>(LibroAINativeService);
+
+  const msgItem = useObserve(instance.libroAIChatMessageItemModel);
+  if (!instance.showAI) {
+    return null;
+  }
+
+  return (
+    <div className="libro-ai-native-for-cell-container">
+      {msgItem?.state === AnswerState.FAIL ? (
+        <div className="libro-ai-native-for-cell-error">{l10n.t('请求报错～')}</div>
+      ) : (
+        <LLMRender
+          type="message"
+          components={{ code: CodeBlockInCell }}
+          remarkPlugins={[remarkGfm, breaks]}
+        >
+          {msgItem?.content || ''}
+        </LLMRender>
+      )}
+      <Button
+        color="default"
+        variant="outlined"
+        className={`libro-ai-native-for-cell-cancel-btn ${msgItem?.state === AnswerState.FAIL ? 'error' : ''}`}
+        onClick={() => {
+          instance.showAI = false;
+          if (!libroAINativeService.cellAIChatMap.get(instance.cell.id)) {
+            cancelCellAIClassname(instance.cell);
+          }
+        }}
+        icon={
+          msgItem?.state === AnswerState.SUCCESS ||
+          msgItem?.state === AnswerState.FAIL ? (
+            <CloseOutlined />
+          ) : (
+            <AILoadding />
+          )
+        }
+      >
+        {l10n.t('取消')}
+      </Button>
+    </div>
+  );
+}
+
+@transient()
+@view('libro-ai-native-for-cell-view')
+export class LibroAINativeForCellView extends BaseView {
+  override view: ViewComponent = LibroAINativeForCellRender;
+  @inject(Fetcher) fetcher: Fetcher;
+  cell: CellView;
+  @inject(toAutoFactory(LibroAIChatMessageItemModel))
+  libroAiChatMessageItemFactory: ToAutoFactory<typeof LibroAIChatMessageItemModel>;
+  @prop()
+  libroAIChatMessageItemModel?: LibroAIChatMessageItemModel;
+
+  @prop()
+  showAI = false;
+  constructor(@inject(ViewOption) options: IAINativeForCellViewOption) {
+    super();
+    this.cell = options.cell;
+  }
+
+  chatStream = async (option: IChatMessage) => {
+    const { chat_key, content, language } = option;
+
+    const url = `/libro/api/chatstream`;
+    const msg = {
+      chat_key: chat_key,
+      prompt: content,
+      language: language,
+    };
+    const res = await this.fetcher.post<ReadableStream<Uint8Array>>(url, msg, {
+      headers: {
+        Accept: 'text/event-stream',
+      },
+      responseType: 'stream',
+      adapter: 'fetch',
+    });
+    if (res.status === 200) {
+      let reader;
+      if (typeof res.data === 'string') {
+        reader = stringToReadableStream(res.data)
+          .pipeThrough(new TextDecoderStream())
+          .pipeThrough(new EventSourceParserStream())
+          .getReader();
+      } else {
+        const stream = res.data;
+        reader = stream
+          .pipeThrough(new TextDecoderStream())
+          .pipeThrough(new EventSourceParserStream())
+          .getReader();
+      }
+      const msgItem = this.libroAiChatMessageItemFactory({
+        sender: { type: 'AI', id: 'libro' },
+        content: '',
+      });
+      this.libroAIChatMessageItemModel = msgItem;
+      let alreayDone = false;
+      try {
+        while (!alreayDone) {
+          const { value, done } = await reader.read();
+          if (done) {
+            alreayDone = true;
+            msgItem.handleEventData({
+              type: 'done',
+            });
+
+            break;
+          }
+          const data = JSON.parse(value.data);
+          const event = ChatEvent.format(value.event || 'chunk', data);
+          msgItem.handleEventData(event);
+        }
+      } catch {
+        msgItem.handleEventData({
+          type: 'error',
+        });
+      }
+      return;
+    }
+  };
+}

package/src/ai-native-output-top.tsx

@@ -0,0 +1,43 @@
+import type { CellView } from '@difizen/libro-jupyter';
+import { useInject, ViewManager, ViewRender } from '@difizen/mana-app';
+import { useEffect, useState } from 'react';
+import './index.less';
+
+import type { LibroAINativeForCellView } from './ai-native-for-cell-view.js';
+import { LibroAINativeService } from './ai-native-service.js';
+
+export function LibroAINativeCellTopBlank({ cell }: { cell: CellView }) {
+  const viewManager = useInject<ViewManager>(ViewManager);
+
+  const [aiNativeForCellView, setAiNativeForCellView] =
+    useState<LibroAINativeForCellView>();
+  const libroAINativeService = useInject<LibroAINativeService>(LibroAINativeService);
+
+  useEffect(() => {
+    libroAINativeService
+      .getOrCreateLibroAINativeForCellView(cell.id, cell)
+      .then((view) => {
+        setAiNativeForCellView(view);
+        return;
+      })
+      .catch(() => {
+        //
+      });
+  }, [
+    cell,
+    cell.id,
+    libroAINativeService,
+    libroAINativeService.libroAINativeForCellViewMap,
+    viewManager,
+  ]);
+
+  if (!aiNativeForCellView) {
+    return null;
+  }
+
+  return (
+    <div className="libro-ai-native-output-top">
+      <ViewRender view={aiNativeForCellView}></ViewRender>
+    </div>
+  );
+}

package/src/ai-native-service.ts

@@ -0,0 +1,39 @@
+import type { CellView } from '@difizen/libro-jupyter';
+import { getOrigin, inject, prop, singleton, ViewManager } from '@difizen/mana-app';
+
+import { LibroAINativeForCellView } from './ai-native-for-cell-view.js';
+import type { LibroChatView } from './chat-view.js';
+import type { LibroAiNativeChatView } from './libro-ai-native-chat-view.js';
+
+@singleton()
+export class LibroAINativeService {
+  @prop()
+  showSideToolbar = false;
+
+  chatViewMap: Map<string, LibroChatView> = new Map();
+
+  //用于控制是否显示当前 libro 层级的 chat 面板
+  showChatMap: Map<string, boolean> = new Map();
+
+  cellAIChatMap: Map<string, boolean> = new Map();
+  @inject(ViewManager)
+  viewManager: ViewManager;
+
+  libroAINativeForCellViewMap: Map<string, LibroAINativeForCellView> = new Map();
+
+  libroAINativeChatViewMap: Map<string, LibroAiNativeChatView> = new Map();
+
+  async getOrCreateLibroAINativeForCellView(id: string, cell: CellView) {
+    let libroAINativeForCellView = this.libroAINativeForCellViewMap.get(id);
+    if (libroAINativeForCellView) {
+      return libroAINativeForCellView;
+    } else {
+      libroAINativeForCellView = await this.viewManager.getOrCreateView(
+        LibroAINativeForCellView,
+        { id: id, cell: getOrigin(cell) },
+      );
+      this.libroAINativeForCellViewMap.set(cell.id, libroAINativeForCellView);
+    }
+    return libroAINativeForCellView;
+  }
+}

package/src/ai-side-toolbar-selector.tsx

@@ -0,0 +1,51 @@
+import type { LibroSideToolbarMenuItemType } from '@difizen/libro-jupyter';
+import { LibroSideToolbarMenu } from '@difizen/libro-jupyter';
+import { useInject } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+import { Popover } from 'antd';
+
+import { AINativeCommands } from './ai-native-command.js';
+import { LibroAINativeService } from './ai-native-service.js';
+import { AIIcon } from './icon.js';
+
+export const AIToolbarSelector: React.FC = () => {
+  const items: LibroSideToolbarMenuItemType[] = [
+    {
+      id: AINativeCommands['Explain'].id,
+      label: (
+        <>
+          <span className="libro-menu-item-label">{l10n.t('代码解释')}</span>
+        </>
+      ),
+      group: 'ai',
+    },
+    {
+      id: AINativeCommands['Optimize'].id,
+      label: (
+        <>
+          <span className="libro-menu-item-label">{l10n.t('代码优化')}</span>
+        </>
+      ),
+      group: 'ai',
+    },
+  ];
+  const libroAINativeService = useInject<LibroAINativeService>(LibroAINativeService);
+  const handleOpenChange = (newOpen: boolean) => {
+    libroAINativeService.showSideToolbar = newOpen;
+  };
+
+  return (
+    <Popover
+      placement="leftTop"
+      content={<LibroSideToolbarMenu items={items} />}
+      trigger="hover"
+      open={libroAINativeService.showSideToolbar}
+      onOpenChange={handleOpenChange}
+      overlayClassName="libro-popover-side-toolbar-menu libro-side-toolbar-ai-select-menu"
+    >
+      <div>
+        <AIIcon />
+      </div>
+    </Popover>
+  );
+};

package/src/chat-slot-contribution.ts

@@ -0,0 +1,36 @@
+import type {
+  LibroView,
+  LibroExtensionSlotFactory,
+  LibroSlot,
+} from '@difizen/libro-jupyter';
+import { LibroExtensionSlotContribution } from '@difizen/libro-jupyter';
+import { ViewManager } from '@difizen/mana-app';
+import { inject, singleton } from '@difizen/mana-app';
+
+import { LibroAINativeService } from './ai-native-service.js';
+import { LibroChatView } from './chat-view.js';
+
+@singleton({ contrib: [LibroExtensionSlotContribution] })
+export class LibroAIChatSlotContribution implements LibroExtensionSlotContribution {
+  @inject(ViewManager) viewManager: ViewManager;
+  @inject(LibroAINativeService) libroAINativeService: LibroAINativeService;
+
+  public readonly slot: LibroSlot = 'right';
+
+  factory: LibroExtensionSlotFactory = async (libro: LibroView) => {
+    const view = await this.viewManager.getOrCreateView(LibroChatView, {
+      parentId: libro.id,
+    });
+    view.parent = libro;
+    this.libroAINativeService.chatViewMap.set(libro.id, view);
+    this.libroAINativeService.showChatMap.set(libro.id, false);
+    view.onDisposed(() => {
+      this.libroAINativeService.chatViewMap.delete(libro.id);
+    });
+    return view;
+  };
+  viewOpenOption = {
+    reveal: false,
+    order: 'a',
+  };
+}