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

package/src/libro-ai-msg-item-model.ts

@@ -0,0 +1,69 @@
+import { AnswerState, ChatEvent } from '@difizen/magent-chat';
+import type {
+  IChatMessageSender,
+  ErrorMessage,
+  IChatEvent,
+  ChatEventChunk,
+  ChatEventError,
+  ChatEventResult,
+  IChatMessageItem,
+} from '@difizen/magent-chat';
+import { autoFactory, AutoFactoryOption } from '@difizen/magent-core';
+import { inject, prop } from '@difizen/mana-app';
+
+@autoFactory()
+export class LibroAIChatMessageItemModel {
+  id?: string;
+  sender: IChatMessageSender;
+
+  @prop()
+  state: AnswerState;
+
+  @prop()
+  protected _content = '';
+  get content(): string {
+    return this._content;
+  }
+  set content(v) {
+    this._content = v;
+  }
+
+  option: IChatMessageItem;
+
+  @prop()
+  error?: ErrorMessage;
+
+  constructor(@inject(AutoFactoryOption) option: IChatMessageItem) {
+    if (option.content) {
+      this.state = AnswerState.SUCCESS;
+    } else {
+      this.state = AnswerState.WAITING;
+    }
+  }
+
+  handleEventData(e: IChatEvent) {
+    if (ChatEvent.isChunk(e)) {
+      this.appendChunk(e);
+    }
+    if (ChatEvent.isError(e)) {
+      this.handleError(e);
+    }
+    if (ChatEvent.isResult(e)) {
+      this.handleResult(e);
+    }
+  }
+
+  appendChunk(e: ChatEventChunk) {
+    this.content = `${this.content}${e.output}`;
+  }
+
+  handleResult(e: ChatEventResult) {
+    this.content = e.output;
+    this.state = AnswerState.SUCCESS;
+  }
+
+  handleError(e: ChatEventError) {
+    this.error = { message: e.message };
+    this.state = AnswerState.FAIL;
+  }
+}

package/src/libro-ai-native-chat-service.ts

@@ -0,0 +1,95 @@
+import type { IChatEvent, IChatMessageItem } from '@difizen/magent-chat';
+import { ChatEvent } from '@difizen/magent-chat';
+import { LibroChatService } from '@difizen/magent-libro';
+import { singleton } from '@difizen/mana-app';
+import { EventSourceParserStream } from 'eventsource-parser/stream';
+
+import type { LibroAINativeChatMessageItemOption } from './protocol.js';
+import { stringToReadableStream } from './utils.js';
+
+@singleton()
+export class LibroAINativeChatService extends LibroChatService {
+  override chat = async (
+    option: LibroAINativeChatMessageItemOption,
+  ): Promise<IChatMessageItem[]> => {
+    const { content, system_prompt } = option;
+    const res = await this.fetcher.post<any>(`/libro/api/chat`, {
+      prompt: content,
+      system_prompt,
+    });
+
+    if (res.status === 200) {
+      if (res.data.output) {
+        return [
+          {
+            sender: { type: 'AI', id: 'libro' },
+            content: res.data.output,
+          },
+        ];
+      }
+    }
+    return [];
+  };
+  override chatStream = async (
+    option: LibroAINativeChatMessageItemOption,
+    messgeCallback: (event: IChatMessageItem) => void,
+    eventCallback: (event: IChatEvent) => void,
+  ) => {
+    const { content, system_prompt } = option;
+
+    const url = `/libro/api/chatstream`;
+    const msg = {
+      prompt: content,
+      system_prompt,
+    };
+    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();
+      }
+
+      messgeCallback({
+        sender: { type: 'AI', id: 'libro' },
+        content: '',
+      });
+      let alreayDone = false;
+      try {
+        while (!alreayDone) {
+          const { value, done } = await reader.read();
+          if (done) {
+            alreayDone = true;
+            eventCallback({
+              type: 'done',
+            });
+
+            break;
+          }
+          const data = JSON.parse(value.data);
+          const event = ChatEvent.format(value.event || 'chunk', data);
+          eventCallback(event);
+        }
+      } catch {
+        eventCallback({
+          type: 'error',
+        });
+      }
+      return;
+    }
+  };
+}

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

@@ -0,0 +1,54 @@
+import type { CellView, LibroView } from '@difizen/libro-jupyter';
+import { ChatView } 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';
+
+@transient()
+@view(viewId)
+export class LibroAiNativeChatView extends ChatView {
+  @prop()
+  isCellChat = false;
+
+  libro?: LibroView;
+
+  cell?: CellView;
+
+  constructor(@inject(ViewOption) option: AiNativeChatViewOption) {
+    super(option);
+    this.option = option;
+    this.isCellChat = option.isCellChat;
+  }
+
+  override getMarkdownProps() {
+    return {
+      components: { code: CodeBlockInChat, img: ImageModal },
+      remarkPlugins: [remarkGfm, breaks],
+    };
+  }
+
+  protected override toMessageOption(msgContent: string) {
+    if (this.isCellChat) {
+      return {
+        stream: true,
+        ...this.option,
+        sender: { type: 'HUMAN' },
+        input: msgContent,
+        system_prompt: `有如下的代码作为对话的上下文：${this.cell?.model.value}`,
+      };
+    }
+    return {
+      stream: true,
+      ...this.option,
+      sender: { type: 'HUMAN' },
+      input: msgContent,
+    };
+  }
+}

package/src/libro-ai-native-color-registry.ts

@@ -0,0 +1,33 @@
+import type { ColorRegistry } from '@difizen/mana-app';
+import { Color } from '@difizen/mana-app';
+import { singleton, ColorContribution } from '@difizen/mana-app';
+
+@singleton({ contrib: ColorContribution })
+export class LibroAINativeColorRegistry implements ColorContribution {
+  registerColors(colors: ColorRegistry): void {
+    colors.register(
+      // #region antd variable
+      {
+        id: 'libro.ai.native.color',
+        defaults: { dark: '#bd74e8', light: '#bd74e8' },
+        description: '',
+      },
+      {
+        id: 'libro.ai.native.box.shadow',
+        defaults: {
+          dark: Color.rgba(203, 146, 197, 0.37),
+          light: Color.rgba(203, 146, 197, 0.37),
+        },
+        description: '',
+      },
+      {
+        id: 'libro.ai.native.btn.hover.color',
+        defaults: {
+          dark: Color.rgba(255, 255, 255, 0.2),
+          light: Color.rgba(0, 10, 26, 0.16),
+        },
+        description: '',
+      },
+    );
+  }
+}

package/src/module.ts

@@ -0,0 +1,44 @@
+import { CellOutputTopProvider, ErrorOutputModel } from '@difizen/libro-jupyter';
+import { ChatView } from '@difizen/magent-chat';
+import { LibroChatModule, LibroChatService } from '@difizen/magent-libro';
+import { ManaModule } from '@difizen/mana-app';
+
+import { LibroAINativeCommandContribution } from './ai-native-command-contribution.js';
+import { LibroAINativeForCellView } from './ai-native-for-cell-view.js';
+import { LibroAINativeCellTopBlank } from './ai-native-output-top.js';
+import { LibroAINativeService } from './ai-native-service.js';
+import { LibroAIChatSlotContribution } from './chat-slot-contribution.js';
+import { LibroChatView } from './chat-view.js';
+import { AIErrorOutputModel } from './error-output-model.js';
+import { LibroAIChatMessageItemModel } from './libro-ai-msg-item-model.js';
+import { LibroAINativeChatService } from './libro-ai-native-chat-service.js';
+import { LibroAiNativeChatView } from './libro-ai-native-chat-view.js';
+import { LibroAINativeColorRegistry } from './libro-ai-native-color-registry.js';
+
+export const LibroAINativeModule = ManaModule.create()
+  .register(
+    LibroAINativeColorRegistry,
+    LibroChatView,
+    LibroAIChatSlotContribution,
+    LibroAINativeCommandContribution,
+    LibroAINativeService,
+    LibroAIChatMessageItemModel,
+    LibroAINativeForCellView,
+    {
+      token: ErrorOutputModel,
+      useClass: AIErrorOutputModel,
+    },
+    {
+      token: ChatView,
+      useClass: LibroAiNativeChatView,
+    },
+    {
+      token: LibroChatService,
+      useClass: LibroAINativeChatService,
+    },
+    {
+      token: CellOutputTopProvider,
+      useValue: LibroAINativeCellTopBlank,
+    },
+  )
+  .dependOn(LibroChatModule);

package/src/protocol.ts

@@ -0,0 +1,18 @@
+import type { CellView } from '@difizen/libro-jupyter';
+import type { ChatViewOption, IChatMessageItem } from '@difizen/magent-chat';
+
+export interface IAINativeForCellViewOption {
+  cell: CellView;
+  [key: string]: any;
+}
+
+export interface LibroAINativeChatMessageItemOption extends IChatMessageItem {
+  chat_key?: string;
+}
+
+export interface AiNativeChatViewOption extends ChatViewOption {
+  id: string;
+  chat_key?: string;
+  isCellChat: boolean;
+  cell?: CellView;
+}

package/src/utils.tsx

@@ -0,0 +1,115 @@
+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
+  const encoder = new TextEncoder();
+  const uint8Array = encoder.encode(inputString);
+
+  // Create a new ReadableStream
+  const readableStream = new ReadableStream({
+    start(controller) {
+      // Enqueue the Uint8Array into the stream
+      controller.enqueue(uint8Array);
+      // Close the stream
+      controller.close();
+    },
+  });
+
+  return readableStream;
+}
+
+export function addCellAIClassname(cell: CellView) {
+  if (cell.className?.includes('ai-cell-focus')) {
+    return;
+  } else {
+    cell.className = cell.className + ' ai-cell-focus';
+  }
+}
+
+export function cancelCellAIClassname(cell: CellView) {
+  if (cell.className?.includes(' ai-cell-focus')) {
+    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>
+  );
+}