Merge pull request #142 from opentiny/chat-history-import-export

feat(playground): add history import and export functionality

Author: rhlin

pnpm-lock.yaml

@@ -17,16 +17,17 @@
     "@opentiny/tiny-robot-kit": "0.3.3",
     "@opentiny/tiny-robot-svgs": "0.3.3",
     "@opentiny/vue": "^3.28.0",
-    "@opentiny/vue-renderless": "^3.28.2",
     "@opentiny/vue-directive": "^3.28.0",
     "@opentiny/vue-icon": "^3.28.0",
+    "@opentiny/vue-renderless": "^3.28.2",
     "@opentiny/vue-theme": "^3.28.0",
+    "ai": "6.0.116",
     "clipboard-copy": "^4.0.1",
     "monaco-editor-vue3": "^1.0.4",
     "schema-renderer-ng-adpater": "workspace:*",
+    "uuid": "11.1.0",
     "vite-commit-hash-plugin": "workspace:*",
-    "vue": "^3.5.18",
-    "ai": "6.0.116"
+    "vue": "^3.5.18"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",

sites/playground/web/package.json

@@ -25,10 +25,9 @@ import {
   validateJsonPatch,
   PARSE_PARTIAL_JSON_STATE,
   formatJsonPatch,
-  formatDateTime,
   generateIdForComponents,
-  generateId,
 } from './template-chat-utils';
+import { formatDate, generateId } from '../../utils';
 import { jsonPatchDeduplicator } from './json-patch-deduplicator';
 import useTemplate from './useTemplate';
 import AssistantFooter from './TemplateAssistantFooter.vue';
@@ -376,7 +375,7 @@ const handleNotification = (event: INotificationPayload) => {
     if (lastMessageCard) {
       lastMessageCard.schema = JSON.stringify(currentSchema.value);
       lastMessageCard.prevSchema = prevSchema.value || '';
-      lastMessageCard.generatedTime = formatDateTime(new Date());
+      lastMessageCard.generatedTime = formatDate(new Date());
     }
   }
 };

sites/playground/web/src/components/genui-template/GenuiTemplateChat.vue

@@ -3,4 +3,3 @@ export * from './json-patch-validate';
 export * from './json-patch-format';
 export * from './schema-path';
 export * from './schema-id-generator';
-export * from './date-format';

sites/playground/web/src/components/genui-template/template-chat-utils/date-format.ts

@@ -1,13 +1,4 @@
-// schema 相关 ID 工具
-export const generateId = (length: number = 8): string => {
-  if (typeof crypto !== 'undefined' && (crypto as any).randomUUID) {
-    return (crypto as any).randomUUID().replace(/-/g, '').substring(0, length);
-  }
-  return Math.random()
-    .toString(36)
-    .substring(2, 2 + length)
-    .padEnd(length, '0');
-};
+import { generateId } from '../../../utils';
 
 export const generateIdForComponents = (schema: any) => {
   const traverse = (node: any, index: number | null = null) => {

sites/playground/web/src/components/genui-template/template-chat-utils/index.ts

@@ -1,40 +1,59 @@
 <template>
-  <tr-history
-    class="tr-history-container"
-    :data="state.conversations"
-    :selected="state.currentId || undefined"
-    :show-rename-controls="isTouchDevice"
-    :menu-list-gap="12"
-    @item-action="handleItemAction"
-    @item-title-change="handleItemTitleChange"
-    @item-click="handleItemClick"
-  />
+  <div class="genui-history">
+    <history-transfer-toolbar
+      :conversations="state.conversations"
+      @import-conversations="handleImportConversations"
+    />
+    <tr-history
+      class="tr-history-container"
+      :data="state.conversations"
+      :selected="state.currentId || undefined"
+      :show-rename-controls="isTouchDevice"
+      :menu-items="historyMenuItems"
+      :menu-list-gap="12"
+      @item-action="handleItemAction"
+      @item-title-change="handleItemTitleChange"
+      @item-click="handleItemClick"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
 import { TrHistory, useTouchDevice } from '@opentiny/tiny-robot';
 import { type Conversation, type UseConversationReturn } from '@opentiny/tiny-robot-kit';
+import { HistoryTransferToolbar, downloadConversations, historyMenuItems } from './history-transfer';
 
 const { isTouchDevice } = useTouchDevice();
 
 const props = defineProps<{
   conversation: UseConversationReturn;
 }>();
 
+const { state, switchConversation, deleteConversation, updateTitle, createConversation, saveConversations } =
+  props.conversation;
+
+const handleImportConversations = (conversations: Conversation[]) => {
+  state.conversations.unshift(...conversations);
+  saveConversations();
+};
 
-const { state, switchConversation, deleteConversation, updateTitle, createConversation, saveConversations } = props.conversation;
 const handleItemClick = (item: Conversation) => {
   switchConversation(item.id);
 };
 
 const handleItemAction = (action: { id: string }, item: Conversation) => {
+  if (action.id === 'export') {
+    downloadConversations([item]);
+    return;
+  }
+
   if (action.id === 'delete') {
     deleteConversation(item.id);
     saveConversations();
   }
 
   // 保证至少有一个会话
-  if(state.conversations.length === 0) {
+  if (state.conversations.length === 0) {
     createConversation();
     saveConversations();
   }
@@ -47,6 +66,12 @@ const handleItemTitleChange = (title: string, item: Conversation) => {
 </script>
 
 <style lang="less" scoped>
+.genui-history {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
 .tr-history-container {
   padding: 0 20px;