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

package/src/chat-view.tsx

@@ -0,0 +1,141 @@
+import { CloseOutlined } from '@ant-design/icons';
+import {
+  LibroContextKey,
+  LibroSlotManager,
+  LibroSlotView,
+} from '@difizen/libro-jupyter';
+import type { DisplayView, LibroView } from '@difizen/libro-jupyter';
+import type { ConfigurationService } from '@difizen/mana-app';
+import {
+  BaseView,
+  prop,
+  transient,
+  view,
+  inject,
+  ViewManager,
+  useInject,
+  ViewInstance,
+  ViewRender,
+} from '@difizen/mana-app';
+import { useRef } from 'react';
+
+import { LibroAINativeService } from './ai-native-service.js';
+import { LibroAiNativeChatView } from './libro-ai-native-chat-view.js';
+import type { AiNativeChatViewOption } from './protocol.js';
+import { cancelCellAIClassname } from './utils.js';
+
+export const ChatRender = () => {
+  const containRef = useRef<HTMLDivElement>(null);
+  const libroChatView = useInject<LibroChatView>(ViewInstance);
+  const libroSlotManager = useInject<LibroSlotManager>(LibroSlotManager);
+  const libroContextKey = useInject<LibroContextKey>(LibroContextKey);
+  const libroAINativeService = useInject<LibroAINativeService>(LibroAINativeService);
+  return (
+    <div
+      className="chat-container"
+      ref={containRef}
+      onFocus={() => {
+        libroContextKey.disableCommandMode();
+      }}
+      onBlur={() => {
+        libroContextKey.enableCommandMode();
+      }}
+    >
+      <div className="chat-header">
+        <div className="chat-title">Libro AI</div>
+        <div className="chat-right-toolbar">
+          <div className="chat-type">
+            {libroChatView.chatView?.isCellChat ? 'Focused Cell' : 'General Chat'}
+          </div>
+          <div>
+            <CloseOutlined
+              className="chat-close-icon"
+              onClick={async () => {
+                if (libroChatView.parent) {
+                  if (libroChatView.chatView?.cell) {
+                    const libroAINativeForCellView =
+                      await libroAINativeService.getOrCreateLibroAINativeForCellView(
+                        libroChatView.chatView.cell.id,
+                        libroChatView.chatView.cell,
+                      );
+                    if (!libroAINativeForCellView.showAI) {
+                      cancelCellAIClassname(libroChatView.chatView.cell);
+                      libroAINativeService.cellAIChatMap.set(
+                        libroChatView.chatView.cell.id,
+                        false,
+                      );
+                    }
+                  }
+
+                  libroAINativeService.showChatMap.set(libroChatView.parent.id, false);
+                  const slotview = libroSlotManager.slotViewManager.getSlotView(
+                    libroSlotManager.getSlotName(libroChatView.parent, 'right'),
+                  );
+                  if (slotview instanceof LibroSlotView) {
+                    slotview.revertActive();
+                  }
+                }
+              }}
+            />
+          </div>
+        </div>
+      </div>
+      {libroChatView.chatView && (
+        <ViewRender view={libroChatView.chatView}></ViewRender>
+      )}
+    </div>
+  );
+};
+
+@transient()
+@view('libro-chat-view')
+export class LibroChatView extends BaseView implements DisplayView {
+  parent: LibroView | undefined = undefined;
+  protected configurationService: ConfigurationService;
+  @inject(ViewManager) viewManager: ViewManager;
+  @inject(LibroAINativeService) libroAINativeService: LibroAINativeService;
+
+  override view = ChatRender;
+
+  @prop()
+  chatView: LibroAiNativeChatView;
+
+  @prop()
+  isDisplay = true;
+
+  async setAINativeChatView(option: AiNativeChatViewOption) {
+    if (this.chatView?.cell) {
+      if (this.chatView?.cell.id === option.cell?.id) {
+        return;
+      }
+      const libroAINativeForCellView =
+        await this.libroAINativeService.getOrCreateLibroAINativeForCellView(
+          this.chatView.cell.id,
+          this.chatView.cell,
+        );
+
+      if (
+        this.libroAINativeService.cellAIChatMap.get(this.chatView.cell.id) &&
+        !libroAINativeForCellView.showAI
+      ) {
+        cancelCellAIClassname(this.chatView.cell);
+        this.libroAINativeService.cellAIChatMap.set(this.chatView.cell.id, false);
+      }
+    }
+
+    this.viewManager
+      .getOrCreateView(LibroAiNativeChatView, option)
+      .then((chatView) => {
+        chatView.libro = this.parent;
+        if (option.isCellChat && option.cell) {
+          chatView.cell = option.cell;
+          this.libroAINativeService.cellAIChatMap.set(option.cell.id, true);
+        }
+        this.chatView = chatView;
+        return;
+      })
+      .catch(() => {
+        //
+      });
+  }
+}

package/src/error-output-model.tsx

@@ -0,0 +1,103 @@
+import type { IError, IRenderMimeRegistry } from '@difizen/libro-jupyter';
+import { concatMultilineString } from '@difizen/libro-jupyter';
+import {
+  ErrorOutputModel,
+  defaultSanitizer,
+  RenderMimeRegistry,
+  renderText,
+} from '@difizen/libro-jupyter';
+import { prop, transient } from '@difizen/mana-app';
+import { getOrigin, useInject, view, ViewInstance } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+import { Button } from 'antd';
+import { forwardRef, createRef, useEffect } from 'react';
+
+import './index.less';
+import { LibroAINativeService } from './ai-native-service.js';
+import { AIIcon } from './icon.js';
+import { addCellAIClassname } from './utils.js';
+
+const AIErrorOutputModelRender = forwardRef<HTMLDivElement>(
+  function ErrorOutputModelRender(_props, ref) {
+    const output = useInject<AIErrorOutputModel>(ViewInstance);
+    const model = getOrigin(output);
+    const source = getOrigin(output).raw as IError;
+    const defaultRenderMime = useInject<IRenderMimeRegistry>(RenderMimeRegistry);
+    const traceback = source.traceback.join('\n');
+    const defaultRenderMimeType = defaultRenderMime.preferredMimeType(model);
+    const streamRef = createRef<HTMLDivElement>();
+    const libroAINativeService = useInject<LibroAINativeService>(LibroAINativeService);
+
+    useEffect(() => {
+      renderText({
+        host: streamRef.current as HTMLDivElement,
+        sanitizer: defaultSanitizer,
+        source: traceback,
+        mimeType: defaultRenderMimeType || '',
+      });
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const handleShowErrorDetail = () => {
+      output.showErrorDetail = !output.showErrorDetail;
+    };
+
+    const handleFixWithAI = async () => {
+      const libroAINativeForCellView =
+        await libroAINativeService.getOrCreateLibroAINativeForCellView(
+          output.cell.id,
+          getOrigin(output.cell),
+        );
+      addCellAIClassname(output.cell);
+      libroAINativeForCellView.showAI = true;
+
+      libroAINativeForCellView.chatStream({
+        chat_key: 'LLM:debug',
+        content: `代码为:\n${output.cell.model.value}\n报错为:\n${concatMultilineString(source.traceback)}`,
+        language: l10n.getLang(),
+      });
+    };
+
+    return (
+      <div ref={ref} className="libro-error-container">
+        <div className="libro-text-render-container">
+          <div className="libro-error-label libro-text-render">
+            <pre>
+              <span className="ansi-red-fg">{source.ename}</span>
+              {': ' + source.evalue}
+            </pre>
+            <div className="libro-error-output-btn-container">
+              <Button
+                className="libro-ai-native-fix-button"
+                icon={<AIIcon />}
+                onClick={handleFixWithAI}
+              >
+                Fix with AI
+              </Button>
+              <Button
+                className="libro-show-error-detail-button"
+                danger
+                onClick={handleShowErrorDetail}
+              >
+                {output.showErrorDetail ? 'Hide' : 'Show'} error details
+              </Button>
+            </div>
+          </div>
+        </div>
+        <div className="libro-text-render-container">
+          <div
+            className="libro-text-render"
+            ref={streamRef}
+            style={{ display: `${output.showErrorDetail ? 'block' : 'none'} ` }}
+          />
+        </div>
+      </div>
+    );
+  },
+);
+
+@transient()
+@view('libro-error-output-model')
+export class AIErrorOutputModel extends ErrorOutputModel {
+  override view = AIErrorOutputModelRender;
+  @prop() showChat = false;
+}

package/src/icon.tsx

@@ -0,0 +1,80 @@
+export const AIIcon: React.FC = () => (
+  <svg
+    width="16px"
+    height="16px"
+    viewBox="0 0 16 16"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    className="libro-ai-icon"
+  >
+    <g
+      id="libro-copilot-1"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g id="libro-copilot-2" transform="translate(-1347.000000, -186.000000)">
+        <g id="libro-copilot-3" transform="translate(1339.000000, 144.000000)">
+          <g id="libro-copilot-4" transform="translate(8.000000, 42.000000)">
+            <rect id="libro-copilot-5" x="0" y="0" width="16" height="16" />
+            <g
+              id="libro-copilot-6"
+              transform="translate(0.300772, 0.470588)"
+              fill="#BB50E1"
+              className="libro-ai-inner-icon"
+            >
+              <path
+                d="M4.6251825,4.23305674 C5.89323061,5.80889295 7.29789772,6.58398704 8.83918382,6.55833903 C10.3804699,6.53269102 11.9554683,5.70801334 13.5641789,4.08430598 C11.9274189,5.7798156 11.0970322,7.34910485 11.0730185,8.79217375 C11.0490049,10.2352426 11.8298081,11.6456189 13.4154281,13.0233024 C11.8157864,11.6647772 10.2918193,10.9975649 8.84352682,11.0216655 C7.39523433,11.045766 5.93953597,11.7625619 4.47643174,13.1720531 C5.87320041,11.7759156 6.58428719,10.3145081 6.60969211,8.78783075 C6.63509702,7.26115339 5.97359381,5.74289539 4.6251825,4.23305674 Z"
+                id="libro-copilot-5"
+                transform="translate(9.020305, 8.628180) rotate(45.000000) translate(-9.020305, -8.628180) "
+              />
+              <path
+                d="M6.17780613,0.532367865 C6.5102071,0.945451143 6.8784208,1.14863115 7.28244726,1.14190788 C7.68647371,1.13518462 8.09933736,0.919006974 8.5210382,0.493374948 C8.09198462,0.937828925 7.87431041,1.34919601 7.86801558,1.72747621 C7.86172075,2.1057564 8.06639732,2.47546667 8.48204528,2.83660701 C8.06272172,2.48048877 7.6632352,2.30558846 7.28358571,2.31190607 C6.90393623,2.31822369 6.52234539,2.50612164 6.13881322,2.87559993 C6.50495646,2.50962212 6.69135785,2.12653473 6.69801739,1.72633775 C6.70467693,1.32614077 6.53127318,0.928150813 6.17780613,0.532367865 Z"
+                id="libro-copilot-8"
+                transform="translate(7.329926, 1.684487) rotate(45.000000) translate(-7.329926, -1.684487) "
+              />
+              <path
+                d="M1.02530107,2.42653997 C1.6654807,3.22210777 2.37463303,3.61341741 3.15275805,3.6004689 C3.93088308,3.58752039 4.72602788,3.17117825 5.53819246,2.3514425 C4.71186704,3.20742794 4.29264265,3.99969048 4.28051927,4.72823011 C4.26839589,5.45676975 4.6625878,6.16880434 5.46309499,6.86433388 C4.65550888,6.17847653 3.88612743,5.84163148 3.15495064,5.85379875 C2.42377385,5.86596601 1.68885817,6.22784354 0.950203604,6.93943135 C1.65536837,6.2345852 2.01436364,5.49678726 2.02718942,4.72603753 C2.0400152,3.9552878 1.70605242,3.18878861 1.02530107,2.42653997 Z"
+                id="libro-copilot-9"
+                transform="translate(3.244198, 4.645437) rotate(45.000000) translate(-3.244198, -4.645437) "
+              />
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export const AILoadding: React.FC = () => {
+  return (
+    <svg
+      width="14px"
+      height="14px"
+      viewBox="0 0 14 14"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      className="libro-lab-loadding"
+    >
+      <g id="整体框架部分" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g
+          id="1.1容器加载中-关闭提示"
+          transform="translate(-1362.000000, -879.000000)"
+          fill="#bd74e8"
+        >
+          <g id="编组-20" transform="translate(0.000000, 872.000000)">
+            <g id="编组-3" transform="translate(1302.000000, 5.000000)">
+              <path
+                d="M67,2 C70.8659932,2 74,5.13400675 74,9 C74,12.6840981 71.1539658,15.7034692 67.5405741,15.9794369 C67.4622857,15.9934347 67.3819096,16 67.3,16 C66.4715729,16 65.8,15.3284271 65.8,14.5 C65.8,13.6715729 66.4715729,13 67.3,13 L67.301026,12.9888432 C69.3695589,12.8349382 71,11.1078741 71,9 C71,6.790861 69.209139,5 67,5 C64.8578046,5 63.1089211,6.68396847 63.0048953,8.80035966 L63,9 C63,9.82842712 62.3284271,10.5 61.5,10.5 C60.6715729,10.5 60,9.82842712 60,9 C60,5.13400675 63.1340068,2 67,2 Z"
+                id="形状结合"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};

package/src/index.less

@@ -0,0 +1,330 @@
+@ant-prefix: ant;
+
+.libro-error-output-btn-container {
+  display: flex;
+
+  .libro-ai-native-fix-button {
+    height: 24px;
+    width: 118px;
+    margin-top: 16px;
+    margin-right: 16px;
+    padding: unset;
+    background: var(--mana-color-bg-container);
+    border-color: var(--mana-libro-ai-native-color);
+
+    span {
+      display: flex;
+      font-family: ArialMT;
+      font-size: 12px;
+      color: var(--mana-libro-ai-native-color);
+      line-height: 22px;
+    }
+
+    &:hover {
+      color: var(--mana-libro-ai-native-color) !important;
+      border-color: var(--mana-libro-ai-native-color) !important;
+    }
+  }
+}
+
+.libro-cell-right-toolbar {
+  .libro-ai-icon {
+    g {
+      fill: none !important;
+    }
+
+    .libro-ai-inner-icon {
+      fill: var(--mana-libro-ai-native-color) !important;
+    }
+  }
+}
+
+.libro-side-toolbar-ai-select-menu {
+  .@{ant-prefix}-popover-content {
+    width: 120px;
+    height: 72px;
+  }
+}
+
+.libro-ai-native-cell-chat-icon {
+  svg {
+    color: var(--mana-libro-ai-native-color);
+  }
+}
+
+.libro-view-content-right {
+  .libro-slot-container {
+    height: 100%;
+  }
+}
+
+.chat-header {
+  padding: 8px 16px;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+
+  .chat-title {
+    font-size: 16px;
+    font-weight: 600;
+  }
+}
+
+.chat-container {
+  border: 1px solid var(--mana-libro-ai-native-color);
+  box-shadow: var(--mana-libro-ai-native-box-shadow) 0 0 0 2px;
+  border-radius: 6px;
+  margin: 16px 0;
+  height: calc(100% - 32px);
+  width: 460px;
+
+  .chat {
+    height: calc(100% - 40px);
+  }
+}
+
+.chat-type {
+  margin-right: 6px;
+}
+
+.chat-close-icon {
+  cursor: pointer;
+}
+
+.chat-input-upload {
+  display: none;
+}
+
+.chat-input-iconBottom {
+  align-items: center;
+  justify-content: center;
+}
+
+.chat-input-searchInput:focus-within {
+  border-color: var(--mana-libro-ai-native-color);
+}
+
+.chat-input-sendButton {
+  margin: unset;
+  background-color: var(--mana-libro-ai-native-color);
+}
+
+.chat-right-toolbar {
+  display: flex;
+  color: var(--mana-libro-tip-font-color);
+
+  .@{ant-prefix}-switch.@{ant-prefix}-switch-checked {
+    background: var(--mana-libro-ai-native-color);
+
+    &:hover {
+      background: var(--mana-libro-ai-native-color);
+    }
+  }
+}
+
+.libro-dnd-cell:has(.ai-cell-focus) {
+  &.active {
+    border: 1px solid var(--mana-libro-ai-native-color);
+    box-shadow: var(--mana-libro-ai-native-box-shadow) 0 0 0 2px;
+
+    .libro-cell-input-collapser,
+    .libro-cell-output-collapser,
+    .libro-cell-collapser {
+      background: var(--mana-libro-ai-native-color);
+      opacity: 1;
+    }
+
+    &.error {
+      border: 1px solid var(--mana-libro-ai-native-color);
+      box-shadow: var(--mana-libro-ai-native-box-shadow) 0 0 0 2px;
+    }
+  }
+
+  &.error {
+    border: 1px solid var(--mana-libro-ai-native-color);
+    box-shadow: var(--mana-libro-ai-native-box-shadow) 0 0 0 2px;
+
+    .libro-cell-input-collapser,
+    .libro-cell-output-collapser,
+    .libro-cell-collapser {
+      background: var(--mana-libro-ai-native-color);
+      opacity: 1;
+    }
+  }
+
+  &.active.command-mode {
+    border: 1px solid var(--mana-libro-ai-native-color);
+    box-shadow: unset;
+  }
+}
+
+.libro-ai-native-debug-code-btn-container {
+  margin-top: 12px;
+
+  .@{ant-prefix}-btn-variant-outlined {
+    height: 24px;
+    margin-right: 6px;
+    font-size: 13px;
+    border-color: var(--mana-libro-ai-native-color);
+    color: var(--mana-libro-ai-native-color);
+    &.@{ant-prefix}-btn-color-primary {
+      box-shadow: unset;
+
+      &:hover {
+        border-color: var(--mana-libro-ai-native-color) !important;
+        color: var(--mana-libro-ai-native-color) !important;
+      }
+    }
+  }
+}
+
+.libro-ai-native-for-cell-cancel-btn {
+  width: 78px;
+
+  &.@{ant-prefix}-btn-variant-outlined {
+    border-color: var(--mana-libro-ai-native-color);
+    color: var(--mana-libro-ai-native-color);
+
+    &:hover {
+      border-color: var(--mana-libro-ai-native-color) !important;
+      color: var(--mana-libro-ai-native-color) !important;
+
+      &.error {
+        border-color: var(--mana-libro-error-color) !important;
+        color: var(--mana-libro-error-color) !important;
+      }
+    }
+
+    &.error {
+      border-color: var(--mana-libro-error-color);
+      color: var(--mana-libro-error-color);
+    }
+  }
+}
+
+.libro-ai-native-output-top {
+  padding: 0 24px;
+
+  .chat-msg-md-message {
+    color: var(--mana-libro-llm-response-output-text-color);
+    width: calc(100% - 78px);
+    margin-right: 12px;
+
+    code {
+      font-size: 13px;
+    }
+  }
+}
+
+.chat-msg-md-code-pre {
+  :global {
+    .md-code-pre {
+      margin: 0 !important;
+      padding: 1.5em !important;
+    }
+  }
+}
+
+.chat-msg-md-code-wrap {
+  border-radius: 4px;
+  position: relative;
+  margin: 12px 0;
+
+  pre {
+    overflow-x: auto;
+  }
+}
+
+.chat-msg-md-code-lang {
+  position: absolute;
+  top: 9px;
+  right: 28px;
+  color: var(--mana-libro-llm-response-output-text-color);
+  opacity: 0.8;
+  font-size: 13px;
+  line-height: 16px;
+}
+
+.chat-msg-md-code-copy {
+  font-size: 13px;
+  cursor: pointer;
+  position: absolute;
+  top: 9px;
+  right: 4px;
+  color: var(--mana-libro-llm-response-output-text-color);
+  opacity: 0.8;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.chat-msg-md-code-code {
+  display: inline;
+}
+
+.libro-ai-native-for-cell-container {
+  display: flex;
+  padding-top: 18px;
+  justify-content: space-between;
+}
+
+.libro-llm-syntax-highlighter {
+  code {
+    background-color: unset;
+    padding: unset;
+  }
+
+  padding: 12px;
+  background-color: var(--mana-libro-input-background) !important;
+  color: var(--mana-libro-llm-response-output-text-color);
+  font-family:
+    system-ui,
+    -apple-system,
+    blinkmacsystemfont,
+    'Segoe UI',
+    helvetica,
+    arial,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol';
+  font-size: 13px;
+
+  .token.comment {
+    color: var(--mana-libro-editor-comment-color);
+    font-style: italic;
+  }
+
+  .token.string {
+    color: var(--mana-libro-editor-string-color) !important;
+  }
+
+  .token.keyword {
+    color: var(--mana-libro-editor-keyword-color);
+  }
+
+  .token.function {
+    color: var(--mana-libro-editor-def-color);
+  }
+
+  .token.number {
+    color: var(--mana-libro-editor-number-color);
+  }
+
+  .token.operator {
+    color: var(--mana-libro-editor-operator-color);
+  }
+
+  .token.class-name {
+    color: var(--mana-libro-editor-class-color);
+  }
+
+  .token.constant {
+    color: var(--mana-libro-editor-class-color);
+  }
+}
+
+.libro-ai-native-for-cell-error {
+  color: var(--mana-libro-error-color);
+}

package/src/index.spec.ts

@@ -0,0 +1,8 @@
+import assert from 'assert';
+import 'reflect-metadata';
+
+describe('libro-ai-native', () => {
+  it('#import', () => {
+    assert(true);
+  });
+});

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './module.js';
+export * from './chat-slot-contribution.js';
+export * from './chat-view.js';
+export * from './error-output-model.js';
+export * from './libro-ai-native-color-registry.js';