feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/data/memory/llm-plugins/stories/demo.stories.tsx

@@ -0,0 +1,37 @@
+/*
+ * 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 { DemoRecallSlices } from './demo';
+
+export default {
+  title: 'Example/Demo',
+  component: DemoRecallSlices,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Base = {
+  args: {
+    name: 'tecvan',
+  },
+};

frontend/packages/data/memory/llm-plugins/stories/demo.tsx

@@ -0,0 +1,76 @@
+/*
+ * 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.
+ */
+ 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { RecallSlices } from '../src';
+
+export function DemoRecallSlices() {
+  const mockLLMOutputs = [
+    {
+      meta: {
+        dataset: {
+          id: 111,
+          type: '文档',
+          name: '笔记软件评测',
+        },
+        document: {
+          id: 222,
+          source: '本地',
+          name: 'Flomo',
+        },
+        link: {
+          title:
+            '[Research for Operations] KK Search Comprehensive User Mental Research Report',
+          // cp-disable-next-line
+          url: 'https://flomoapp.com/',
+          uniq_key: '文档_笔记软件评测_本地_Flomo',
+        },
+        title:
+          '[Research for Operations] KK Search Comprehensive User Mental Research Report',
+        score: 0.7,
+      },
+      content:
+        'Flomo：特色是「便捷记录闪念笔记」，可以通过微信服务号、iOS快捷指令和API输入笔记，用于捕捉一闪即逝的想法。还可以不断地在阅读、消费信息的过程中记录，这是一个解释的过程.',
+    },
+    {
+      meta: {
+        dataset: {
+          id: 111,
+          type: '文档',
+          name: '笔记软件评测',
+        },
+        document: {
+          id: 222,
+          source: '本地',
+          name: 'Flomo',
+        },
+        link: {
+          title:
+            '[Research for Operations] KK Search Comprehensive User Mental Research Report',
+          // cp-disable-next-line
+          url: 'https://flomoapp.com/',
+          uniq_key: '文档_笔记软件评测_本地_Flomo',
+        },
+        title:
+          '[Research for Operations] KK Search Comprehensive User Mental Research Report',
+        score: 0.7,
+      },
+      content:
+        'Flomo：特色是「便捷记录闪念笔记」，可以通过微信服务号、iOS快捷指令和API输入笔记，用于捕捉一闪即逝的想法。还可以不断地在阅读、消费信息的过程中记录，这是一个解释的过程，也是一个向大脑“写入”的过程,特色是「便捷记录闪念笔记」，可以通过微信服务号、iOS快捷指令和API输入笔记，用于捕捉一闪即逝的想法。还可以不断地在阅读、消费信息的过程中记录，这是一个解释的过程，也是一个向大脑“写入”的过程,特色是「便捷记录闪念笔记」，可以通过微信服务号、iOS快捷指令和API输入笔记，用于捕捉一闪即逝的想法。还可以不断地在阅读、消费信息的过程中记录，这是一个解释的过程，也是一个向大脑“写入”的过程.',
+    },
+  ];
+  return <RecallSlices llmOutputs={mockLLMOutputs as unknown as any} />;
+}

frontend/packages/data/memory/llm-plugins/stories/hello.mdx

@@ -0,0 +1,34 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Hello world" />
+
+<div className="sb-container">
+  <div className='sb-section-title'>
+    # Hello world
+
+    Hello world
+  </div>
+</div>
+
+<style>
+  {`
+  .sb-container {
+    margin-bottom: 48px;
+  }
+
+  .sb-section {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+  }
+
+  img {
+    object-fit: cover;
+  }
+
+  .sb-section-title {
+    margin-bottom: 32px;
+  }
+  `}
+</style>