feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/data/memory/llm-plugins/src/assets/link-to-knowledge.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M6.49289 5.50001L5.42716 4.43428C5.23292 4.24003 5.23604 3.92454 5.43029 3.73029C5.62453 3.53605 5.94002 3.53292 6.13427 3.72717L8.23744 5.83034C8.33507 5.92797 8.33507 6.08626 8.23744 6.18389L6.14377 8.27756C5.94986 8.47147 5.63229 8.46975 5.43838 8.27584C5.24447 8.08193 5.24275 7.76436 5.43666 7.57046L6.50711 6.50001H1.5C1.22386 6.50001 1 6.27615 1 6.00001C1 5.72387 1.22386 5.50001 1.5 5.50001H6.49289ZM2 2V4.5H1C1 4.1411 1 2.9017 1 1.99943C1 1.44714 1.44772 1 2 1L10 1C10.5523 1 11 1.44772 11 2V10C11 10.5523 10.5523 11 10 11H2C1.44772 11 1 10.5523 1 10V7.5H2V10H10V2H2Z"
+    fill="#4D53E8" />
+</svg>

frontend/packages/data/memory/llm-plugins/src/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+export { RecallSlices, LLMOutput } from './plugins';

frontend/packages/data/memory/llm-plugins/src/plugins/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+export { RecallSlices, LLMOutput } from './recall-slices';

frontend/packages/data/memory/llm-plugins/src/plugins/recall-slices/helpers/filter-unnecessary-content-from-slice.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+export const filterUnnecessaryContentFromSlice = (slice: string): string => {
+  let res = slice;
+  // 过滤img 标签
+  res = res.replaceAll(/<(\n)*img((?!(<(\n)*img))(.|\n))*>/g, '');
+  return res;
+};

frontend/packages/data/memory/llm-plugins/src/plugins/recall-slices/index.module.less

@@ -0,0 +1,71 @@
+.recall-slices {
+  width: 100%;
+
+  :global {
+    .semi-card-body {
+      padding: 10px;
+    }
+  }
+}
+
+.recall-slice {
+  margin-bottom: 8px;
+
+  &-title {
+    margin-bottom: 7px;
+
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 16px;
+    color: #1D1C23CC;
+
+    &-icon {
+      cursor: pointer;
+
+      position: relative;
+      top: 2px;
+
+      display: inline-flex;
+      align-items: center;
+
+      margin-left: 5px;
+    }
+  }
+
+  &-content {
+    &-collapsed {
+      overflow: hidden;
+      display: -webkit-box;
+
+      text-overflow: ellipsis;
+
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 10;
+    }
+
+    &-action {
+      cursor: pointer;
+      color: #4D53E8;
+    }
+  }
+
+
+  &-tag {
+    margin-bottom: 7px;
+    font-weight: bold;
+    color: #1D1C2399;
+  }
+
+  &-tags {
+    display: flex;
+    gap: 6px;
+    justify-content: flex-start;
+    margin-bottom: 10px;
+
+    :global {
+      .semi-tag-content {
+        max-width: 120px;
+      }
+    }
+  }
+}

frontend/packages/data/memory/llm-plugins/src/plugins/recall-slices/index.tsx

@@ -0,0 +1,208 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+
+import { DataNamespace, dataReporter } from '@coze-data/reporter';
+import { REPORT_EVENTS } from '@coze-arch/report-events';
+import { I18n } from '@coze-arch/i18n';
+import { Card, Tag, Tooltip } from '@coze-arch/bot-semi';
+import { DocumentSource, FormatType } from '@coze-arch/bot-api/knowledge';
+
+import { ReactComponent as LinkToKnowledgeIcon } from '../../assets/link-to-knowledge.svg';
+import { filterUnnecessaryContentFromSlice } from './helpers/filter-unnecessary-content-from-slice';
+
+import styles from './index.module.less';
+
+export interface LLMOutput {
+  meta: {
+    dataset: {
+      id: number;
+      name: string;
+    };
+    document: {
+      id: number;
+      source_type: number;
+      format_type: number;
+      name: string;
+    };
+    link: {
+      title: string;
+      url: string;
+    };
+  };
+  score: number;
+  slice: string;
+}
+
+const getSourceTypeDescription = (sourceType: number): string | undefined =>
+  ({
+    [DocumentSource.Custom]: I18n.t('chat-area-knowledge-custom-data-source'),
+    [DocumentSource.Document]: I18n.t('chat-area-knowledge-local-data-source'),
+    [DocumentSource.FeishuWeb]: I18n.t(
+      'chat-area-knowledge-feishu-data-source',
+    ),
+    [DocumentSource.Web]: I18n.t('chat-area-knowledge-online-data-source'),
+    [DocumentSource.FrontCrawl]: I18n.t(
+      'chat-area-knowledge-crawl-data-source',
+    ),
+    [DocumentSource.GoogleDrive]: I18n.t(
+      'chat-area-knowledge-google-data-source',
+    ),
+    [DocumentSource.Notion]: I18n.t('chat-area-knowledge-notion-data-source'),
+    [DocumentSource.LarkWeb]: I18n.t('Lark_00002'),
+  })[sourceType];
+
+const getFormatTypeDescription = (formatType: number): string | undefined =>
+  ({
+    [FormatType.Table]: I18n.t('knowledge-dataset-type-table'),
+    [FormatType.Text]: I18n.t('knowledge-dataset-type-text'),
+    [FormatType.Image]: I18n.t('knowledge_photo_025'),
+  })[formatType];
+
+function RecallSlice(props: { llmOutput: LLMOutput; index: number }) {
+  const { llmOutput, index } = props;
+  const { meta, slice, score } = llmOutput;
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [needCollapse, setNeedCollapse] = useState(false);
+  const sliceContentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setNeedCollapse(
+      (sliceContentRef.current?.scrollHeight ?? 0) >
+        (sliceContentRef.current?.clientHeight ?? 0),
+    );
+  }, []);
+
+  const formatTypeDesc = useMemo(
+    () =>
+      meta.document.format_type
+        ? getFormatTypeDescription(meta.document.format_type)
+        : null,
+    [meta.document],
+  );
+
+  const sourceTypeDesc = useMemo(
+    () =>
+      meta.document.source_type
+        ? getSourceTypeDescription(meta.document.source_type)
+        : null,
+    [meta.document],
+  );
+
+  // 后面改成 staring
+  const sliceTag = `Recall slice ${index + 1}`;
+
+  const filteredSlice = filterUnnecessaryContentFromSlice(slice);
+
+  return (
+    <div className={styles['recall-slice']}>
+      <Card>
+        <Tag className={styles['recall-slice-tag']}>{sliceTag}</Tag>
+        <div className={styles['recall-slice-title']}>
+          {meta.document?.name ?? ''}
+          <div
+            onClick={() => {
+              const { href, origin } = window.location;
+              const hrefSlices = href.split('/');
+              const spaceIndex = hrefSlices.indexOf('space');
+              if (spaceIndex === -1 || spaceIndex === hrefSlices.length - 1) {
+                dataReporter.errorEvent(DataNamespace.KNOWLEDGE, {
+                  eventName: REPORT_EVENTS.KnowledgeSourceGetURL,
+                  error: new Error(),
+                });
+              }
+              const spaceId = hrefSlices[spaceIndex + 1];
+              if (!/^[1-9][0-9]+$/.test(spaceId)) {
+                dataReporter.errorEvent(DataNamespace.KNOWLEDGE, {
+                  eventName: REPORT_EVENTS.KnowledgeSourceGetURL,
+                  error: new Error(),
+                });
+              }
+              window.open(
+                `${origin}/space/${spaceId}/knowledge/${meta.dataset.id}?first_auto_open_edit_document_id=${meta.document.id}`,
+                '_blank',
+              );
+            }}
+            className={styles['recall-slice-title-icon']}
+          >
+            <LinkToKnowledgeIcon />
+          </div>
+        </div>
+        <div className={styles['recall-slice-tags']}>
+          {meta.dataset.name ? (
+            <Tooltip content={meta.dataset.name}>
+              <Tag>{meta.dataset.name}</Tag>
+            </Tooltip>
+          ) : null}
+
+          {formatTypeDesc ? (
+            <Tooltip content={formatTypeDesc}>
+              <Tag>{formatTypeDesc} </Tag>
+            </Tooltip>
+          ) : null}
+
+          {sourceTypeDesc ? (
+            <Tooltip content={sourceTypeDesc}>
+              <Tag>{sourceTypeDesc} </Tag>
+            </Tooltip>
+          ) : null}
+          {score > 0 && <Tag>{`Score: ${score.toFixed(2)}`}</Tag>}
+        </div>
+        <div className={styles['recall-slice-content']}>
+          <div
+            ref={sliceContentRef}
+            className={
+              isOpen
+                ? styles['recall-slice-content-open']
+                : styles['recall-slice-content-collapsed']
+            }
+          >
+            {filteredSlice}
+          </div>
+          {needCollapse ? (
+            isOpen ? (
+              <div
+                className={styles['recall-slice-content-action']}
+                onClick={() => setIsOpen(false)}
+              >
+                {I18n.t('collapse-chat-knowledge-source-header')}
+              </div>
+            ) : (
+              <div
+                className={styles['recall-slice-content-action']}
+                onClick={() => setIsOpen(true)}
+              >
+                {I18n.t('view-all-chat-knowledge-source-header')}
+              </div>
+            )
+          ) : null}
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+export function RecallSlices(props: { llmOutputs: Array<LLMOutput> }) {
+  return (
+    <div className={styles['recall-slices']}>
+      {props.llmOutputs.map((llmOutput, index) => (
+        <RecallSlice llmOutput={llmOutput} index={index} />
+      ))}
+    </div>
+  );
+}

frontend/packages/data/memory/llm-plugins/src/typings.d.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+/// <reference types='@coze-arch/bot-typings' />