From 83d9a5dfc73e4dabe6786d5faf03697de60ed21f Mon Sep 17 00:00:00 2001
From: Hao Wu <wuhaoecho@gmail.com>
Date: Sun, 8 Sep 2024 13:10:03 +0800
Subject: [PATCH 1/2] Refactor bot view and add API helper generation

---
 web/src/locales/zh-CN.json |   4 +-
 web/src/service/bot.ts     |  43 +++++++++++++++
 web/src/typings/chat.d.ts  |  20 +++++++
 web/src/views/bot/all.vue  | 106 ++++++++++++++++++-------------------
 4 files changed, 118 insertions(+), 55 deletions(-)
 create mode 100644 web/src/service/bot.ts

diff --git a/web/src/locales/zh-CN.json b/web/src/locales/zh-CN.json
index e54f3df5..66b8ecc9 100644
--- a/web/src/locales/zh-CN.json
+++ b/web/src/locales/zh-CN.json
@@ -2,6 +2,7 @@
   "common": {
     "ask_user_register": "请注册, 只有注册账号才能继续对话",
     "help": "第一条是主题(prompt, 角色定义), 上下文默认包括10条信息, 参数可以点击按钮进行调节, 请务必注意隐私, 不输入涉密, 敏感信息.",
+    "copy": "复制",
     "edit": "编辑",
     "delete": "删除",
     "save": "保存",
@@ -40,7 +41,8 @@
     "list": "机器人列表",
     "all": {
       "title": "机器人列表"
-    }
+    },
+    "showCode": "生成API调用代码"
   },
   "chat": {
     "new": "新对话",
diff --git a/web/src/service/bot.ts b/web/src/service/bot.ts
new file mode 100644
index 00000000..23227ea2
--- /dev/null
+++ b/web/src/service/bot.ts
@@ -0,0 +1,43 @@
+import { displayLocaleDate, formatYearMonth } from '@/utils/date'
+
+
+export function post_url(uuid: string): string {
+        return `#/bot/${uuid}`
+}
+
+
+export function generateAPIHelper(uuid: string, apiToken: string, origin: string) {
+        const data = {
+                "message": "Your message here",
+                "snapshot_uuid": uuid,
+                "stream": false,
+        }
+        return `curl -X POST ${origin}/api/chatbot -H "Content-Type: application/json" -H "Authorization: Bearer ${apiToken}" -d '${JSON.stringify(data)}'`
+}
+
+export function getChatbotPosts(posts: Snapshot.Snapshot[]) {
+        return posts
+                .filter((post: Snapshot.Snapshot) => post.typ === 'chatbot')
+                .map((post: Snapshot.Snapshot): Snapshot.PostLink => ({
+                        uuid: post.uuid,
+                        date: displayLocaleDate(post.createdAt),
+                        title: post.title,
+                }))
+}
+
+export function postsByYearMonthTransform(posts: Snapshot.PostLink[]) {
+        const init: Record<string, Snapshot.PostLink[]> = {}
+        return posts.reduce((acc, post) => {
+                const yearMonth = formatYearMonth(new Date(post.date))
+                if (!acc[yearMonth])
+                        acc[yearMonth] = []
+
+                acc[yearMonth].push(post)
+                return acc
+        }, init)
+}
+
+export function getPostLinks(snapshots: Snapshot.Snapshot[]): Record<string, Snapshot.PostLink[]> {
+        const chatbotPosts = getChatbotPosts(snapshots)
+        return postsByYearMonthTransform(chatbotPosts)
+}
\ No newline at end of file
diff --git a/web/src/typings/chat.d.ts b/web/src/typings/chat.d.ts
index 9ee89e75..aa14164a 100644
--- a/web/src/typings/chat.d.ts
+++ b/web/src/typings/chat.d.ts
@@ -78,4 +78,24 @@ declare namespace Chat {
 		userEmail: string
 		rateLimit: string
 	}
+
+	
 }
+
+declare namespace Snapshot {
+
+	interface Snapshot {
+		uuid: string;
+		title: string;
+		summary: string;
+		tags: Record<string, unknown>;
+		createdAt: string;
+		typ: 'chatbot' | 'snapshot';
+	      }
+	      
+	interface PostLink {
+		uuid: string;
+		date: string;
+		title: string;
+	}
+}
\ No newline at end of file
diff --git a/web/src/views/bot/all.vue b/web/src/views/bot/all.vue
index 68b6f63c..26a69b71 100644
--- a/web/src/views/bot/all.vue
+++ b/web/src/views/bot/all.vue
@@ -1,56 +1,36 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, h } from 'vue'
 import { NModal, useDialog, useMessage } from 'naive-ui'
 import Search from '../snapshot/components/Search.vue'
 import { fetchSnapshotAll, fetchSnapshotDelete } from '@/api'
-import { displayLocaleDate, formatYearMonth } from '@/utils/date'
 import { HoverButton, SvgIcon } from '@/components/common'
+import { generateAPIHelper, post_url, getPostLinks } from '@/service/bot'
+import request from '@/utils/request/axios'
 import { t } from '@/locales'
 const dialog = useDialog()
 const nui_msg = useMessage()
 const search_visible = ref(false)
+const apiToken = ref('')
 
-interface PostLink {
-  uuid: string
-  date: string
-  title: string
-}
-
-function post_url(uuid: string): string {
-  return `#/bot/${uuid}`
-}
-
-const postsByYearMonth = ref<Record<string, PostLink[]>>({})
-
-function postsByYearMonthTransform(posts: PostLink[]) {
-  const init: Record<string, PostLink[]> = {}
-  return posts.reduce((acc, post) => {
-    const yearMonth = formatYearMonth(new Date(post.date))
-    if (!acc[yearMonth])
-      acc[yearMonth] = []
-
-    acc[yearMonth].push(post)
-    return acc
-  }, init)
-}
-
-async function getPostLinks() {
-  const rawPosts = await fetchSnapshotAll()
-  const rawPostsFormated = rawPosts.filter( (post: any) => post.typ === 'chatbot').map((post: any) => {
-    return {
-      uuid: post.uuid,
-      date: displayLocaleDate(post.createdAt),
-      title: post.title,
-    }
-  })
-  return postsByYearMonthTransform(rawPostsFormated)
-}
+const postsByYearMonth = ref<Record<string, Snapshot.PostLink[]>>({})
 
 onMounted(async () => {
-  postsByYearMonth.value = await getPostLinks()
+  const rawPosts: Snapshot.Snapshot[] = await fetchSnapshotAll()
+  postsByYearMonth.value = getPostLinks(rawPosts)
+  try {
+    const response = await request.get('/token_10years')
+    if (response.status === 200) {
+      apiToken.value = response.data.accessToken
+    }
+    else {
+      nui_msg.error('Failed to fetch API token')
+    }
+  } catch (error) {
+    nui_msg.error('Error fetching API token')
+  }
 })
 
-function handleDelete(post: PostLink) {
+function handleDelete(post: Snapshot.PostLink) {
   const dialogBox = dialog.warning({
     title: t('chat_snapshot.deletePost'),
     content: post.title,
@@ -60,7 +40,8 @@ function handleDelete(post: PostLink) {
       try {
         dialogBox.loading = true
         await fetchSnapshotDelete(post.uuid)
-        postsByYearMonth.value = await getPostLinks()
+        const snapshots: Snapshot.Snapshot[] = await fetchSnapshotAll()
+        postsByYearMonth.value = getPostLinks(snapshots)
         dialogBox.loading = false
         nui_msg.success(t('chat_snapshot.deleteSuccess'))
         Promise.resolve()
@@ -74,20 +55,35 @@ function handleDelete(post: PostLink) {
     },
   })
 }
+
+function genAPIHelper(post: Snapshot.PostLink) {
+  return generateAPIHelper(post.uuid, apiToken.value, window.location.origin)
+}
+
+function handleShowCode(post: Snapshot.PostLink) {
+  const dialogBox = dialog.info({
+    title: t('bot.showCode'),
+    content: () => h('code', { class: 'whitespace-pre-wrap' }, genAPIHelper(post)),
+    positiveText: t('common.copy'),
+    onPositiveClick: () => {
+      // copy to clipboard
+      navigator.clipboard.writeText(genAPIHelper(post))
+      dialogBox.loading = false
+      nui_msg.success(t('common.success'))
+    },
+  })
+}
 </script>
 
 <template>
   <div class="flex flex-col w-full h-full dark:text-white">
-    <header class="flex items-center justify-between h-16 z-30 border-b dark:border-neutral-800 bg-white/80 dark:bg-black/20 dark:text-white backdrop-blur">
+    <header
+      class="flex items-center justify-between h-16 z-30 border-b dark:border-neutral-800 bg-white/80 dark:bg-black/20 dark:text-white backdrop-blur">
       <div class="flex items-center ml-10">
-        <svg
-          class="w-8 h-8 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-          />
+        <svg class="w-8 h-8 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+          stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
         </svg>
         <h1 class="text-xl font-semibold text-gray-900">
           {{ $t('bot.all.title') }}
@@ -104,7 +100,8 @@ function handleDelete(post: PostLink) {
     </header>
     <div id="scrollRef" ref="scrollRef" class="h-full overflow-hidden overflow-y-auto">
       <div class="max-w-screen-xl px-4 py-8 mx-auto">
-        <div v-for="[yearMonth, postsOfYearMonth] in Object.entries(postsByYearMonth)" :key="yearMonth" class="flex mb-2">
+        <div v-for="[yearMonth, postsOfYearMonth] in Object.entries(postsByYearMonth)" :key="yearMonth"
+          class="flex mb-2">
           <h2 class="flex-none w-28 text-lg font-medium">
             {{ yearMonth }}
           </h2>
@@ -118,11 +115,12 @@ function handleDelete(post: PostLink) {
                   <div class="ml-2 text-sm" @click="handleDelete(post)">
                     <SvgIcon icon="ic:baseline-delete-forever" />
                   </div>
+                  <div class="ml-4 cursor-pointer" @click="handleShowCode(post)">
+                    <SvgIcon icon="ic:outline-code" />
+                  </div>
                 </div>
-                <a
-                  :href="post_url(post.uuid)" :title="post.title"
-                  class="block text-xl font-semibold text-gray-900 hover:text-blue-600 mb-2"
-                >{{ post.title }}</a>
+                <a :href="post_url(post.uuid)" :title="post.title"
+                  class="block text-xl font-semibold text-gray-900 hover:text-blue-600 mb-2">{{ post.title }}</a>
               </div>
             </li>
           </ul>

From 9054864fa940041fae90bb3dbf2df4bb9a718d03 Mon Sep 17 00:00:00 2001
From: Hao Wu <wuhaoecho@gmail.com>
Date: Sun, 8 Sep 2024 13:22:31 +0800
Subject: [PATCH 2/2] Remove bot service and refactor snapshot views to use
 centralized snapshot service functions.

---
 web/src/service/{bot.ts => snapshot.ts} | 23 ++++++++++---
 web/src/views/bot/all.vue               | 31 ++++++++++++-----
 web/src/views/snapshot/all.vue          | 45 ++++++-------------------
 3 files changed, 50 insertions(+), 49 deletions(-)
 rename web/src/service/{bot.ts => snapshot.ts} (63%)

diff --git a/web/src/service/bot.ts b/web/src/service/snapshot.ts
similarity index 63%
rename from web/src/service/bot.ts
rename to web/src/service/snapshot.ts
index 23227ea2..8a499dc8 100644
--- a/web/src/service/bot.ts
+++ b/web/src/service/snapshot.ts
@@ -1,9 +1,7 @@
 import { displayLocaleDate, formatYearMonth } from '@/utils/date'
 
 
-export function post_url(uuid: string): string {
-        return `#/bot/${uuid}`
-}
+
 
 
 export function generateAPIHelper(uuid: string, apiToken: string, origin: string) {
@@ -25,6 +23,16 @@ export function getChatbotPosts(posts: Snapshot.Snapshot[]) {
                 }))
 }
 
+export function getSnapshotPosts(posts: Snapshot.Snapshot[]) {
+        return posts
+                .filter((post: Snapshot.Snapshot) => post.typ === 'snapshot')
+                .map((post: Snapshot.Snapshot): Snapshot.PostLink => ({
+                        uuid: post.uuid,
+                        date: displayLocaleDate(post.createdAt),
+                        title: post.title,
+                }))
+}
+
 export function postsByYearMonthTransform(posts: Snapshot.PostLink[]) {
         const init: Record<string, Snapshot.PostLink[]> = {}
         return posts.reduce((acc, post) => {
@@ -37,7 +45,12 @@ export function postsByYearMonthTransform(posts: Snapshot.PostLink[]) {
         }, init)
 }
 
-export function getPostLinks(snapshots: Snapshot.Snapshot[]): Record<string, Snapshot.PostLink[]> {
-        const chatbotPosts = getChatbotPosts(snapshots)
+export function getSnapshotPostLinks(snapshots: Snapshot.Snapshot[]): Record<string, Snapshot.PostLink[]> {
+        const snapshotPosts = getSnapshotPosts(snapshots)
+        return postsByYearMonthTransform(snapshotPosts)
+}
+
+export function getBotPostLinks(bots: Snapshot.Snapshot[]): Record<string, Snapshot.PostLink[]> {
+        const chatbotPosts = getChatbotPosts(bots)
         return postsByYearMonthTransform(chatbotPosts)
 }
\ No newline at end of file
diff --git a/web/src/views/bot/all.vue b/web/src/views/bot/all.vue
index 26a69b71..19c4648b 100644
--- a/web/src/views/bot/all.vue
+++ b/web/src/views/bot/all.vue
@@ -4,19 +4,19 @@ import { NModal, useDialog, useMessage } from 'naive-ui'
 import Search from '../snapshot/components/Search.vue'
 import { fetchSnapshotAll, fetchSnapshotDelete } from '@/api'
 import { HoverButton, SvgIcon } from '@/components/common'
-import { generateAPIHelper, post_url, getPostLinks } from '@/service/bot'
+import { generateAPIHelper, getBotPostLinks } from '@/service/snapshot'
 import request from '@/utils/request/axios'
 import { t } from '@/locales'
 const dialog = useDialog()
 const nui_msg = useMessage()
+
 const search_visible = ref(false)
 const apiToken = ref('')
 
 const postsByYearMonth = ref<Record<string, Snapshot.PostLink[]>>({})
 
 onMounted(async () => {
-  const rawPosts: Snapshot.Snapshot[] = await fetchSnapshotAll()
-  postsByYearMonth.value = getPostLinks(rawPosts)
+  await refreshSnapshot()
   try {
     const response = await request.get('/token_10years')
     if (response.status === 200) {
@@ -30,6 +30,12 @@ onMounted(async () => {
   }
 })
 
+
+async function refreshSnapshot() {
+  const bots: Snapshot.Snapshot[] = await fetchSnapshotAll()
+  postsByYearMonth.value = getBotPostLinks(bots)
+}
+
 function handleDelete(post: Snapshot.PostLink) {
   const dialogBox = dialog.warning({
     title: t('chat_snapshot.deletePost'),
@@ -40,8 +46,7 @@ function handleDelete(post: Snapshot.PostLink) {
       try {
         dialogBox.loading = true
         await fetchSnapshotDelete(post.uuid)
-        const snapshots: Snapshot.Snapshot[] = await fetchSnapshotAll()
-        postsByYearMonth.value = getPostLinks(snapshots)
+        await refreshSnapshot()
         dialogBox.loading = false
         nui_msg.success(t('chat_snapshot.deleteSuccess'))
         Promise.resolve()
@@ -56,9 +61,6 @@ function handleDelete(post: Snapshot.PostLink) {
   })
 }
 
-function genAPIHelper(post: Snapshot.PostLink) {
-  return generateAPIHelper(post.uuid, apiToken.value, window.location.origin)
-}
 
 function handleShowCode(post: Snapshot.PostLink) {
   const dialogBox = dialog.info({
@@ -73,6 +75,17 @@ function handleShowCode(post: Snapshot.PostLink) {
     },
   })
 }
+
+
+function post_url(uuid: string): string {
+        return `#/bot/${uuid}`
+}
+
+function genAPIHelper(post: Snapshot.PostLink) {
+  return generateAPIHelper(post.uuid, apiToken.value, window.location.origin)
+}
+
+
 </script>
 
 <template>
@@ -111,7 +124,7 @@ function handleShowCode(post: Snapshot.PostLink) {
                 <div class="flex">
                   <time :datetime="post.date" class="mb-1 text-sm font-medium text-gray-600">{{
                     post.date
-                  }}</time>
+                    }}</time>
                   <div class="ml-2 text-sm" @click="handleDelete(post)">
                     <SvgIcon icon="ic:baseline-delete-forever" />
                   </div>
diff --git a/web/src/views/snapshot/all.vue b/web/src/views/snapshot/all.vue
index 52896374..75d6ded7 100644
--- a/web/src/views/snapshot/all.vue
+++ b/web/src/views/snapshot/all.vue
@@ -3,54 +3,29 @@ import { onMounted, ref } from 'vue'
 import { NModal, useDialog, useMessage } from 'naive-ui'
 import Search from './components/Search.vue'
 import { fetchSnapshotAll, fetchSnapshotDelete } from '@/api'
-import { displayLocaleDate, formatYearMonth } from '@/utils/date'
 import { HoverButton, SvgIcon } from '@/components/common'
+import { getSnapshotPostLinks } from '@/service/snapshot'
 import { t } from '@/locales'
 const dialog = useDialog()
 const nui_msg = useMessage()
 const search_visible = ref(false)
 
-interface PostLink {
-  uuid: string
-  date: string
-  title: string
-}
-
 function post_url(uuid: string): string {
   return `#/snapshot/${uuid}`
 }
 
-const postsByYearMonth = ref<Record<string, PostLink[]>>({})
-
-function postsByYearMonthTransform(posts: PostLink[]) {
-  const init: Record<string, PostLink[]> = {}
-  return posts.reduce((acc, post) => {
-    const yearMonth = formatYearMonth(new Date(post.date))
-    if (!acc[yearMonth])
-      acc[yearMonth] = []
-
-    acc[yearMonth].push(post)
-    return acc
-  }, init)
-}
-
-async function getPostLinks() {
-  const rawPosts = await fetchSnapshotAll()
-  const rawPostsFormated = rawPosts.filter( (post: any) => post.typ === 'snapshot' ).map((post: any) => {
-    return {
-      uuid: post.uuid,
-      date: displayLocaleDate(post.createdAt),
-      title: post.title,
-    }
-  })
-  return postsByYearMonthTransform(rawPostsFormated)
-}
+const postsByYearMonth = ref<Record<string, Snapshot.PostLink[]>>({})
 
 onMounted(async () => {
-  postsByYearMonth.value = await getPostLinks()
+  await refreshSnapshot()
 })
 
-function handleDelete(post: PostLink) {
+async function refreshSnapshot() {
+  const snapshots: Snapshot.Snapshot[] = await fetchSnapshotAll()
+  postsByYearMonth.value = getSnapshotPostLinks(snapshots)
+}
+
+function handleDelete(post: Snapshot.PostLink) {
   const dialogBox = dialog.warning({
     title: t('chat_snapshot.deletePost'),
     content: post.title,
@@ -60,7 +35,7 @@ function handleDelete(post: PostLink) {
       try {
         dialogBox.loading = true
         await fetchSnapshotDelete(post.uuid)
-        postsByYearMonth.value = await getPostLinks()
+        await refreshSnapshot()
         dialogBox.loading = false
         nui_msg.success(t('chat_snapshot.deleteSuccess'))
         Promise.resolve()