feat: improve function

itsharex · Jun 10, 2023 · d33a316 · d33a316
1 parent e97f4a0
commit d33a316
Show file tree

Hide file tree

Showing 15 changed files with 150 additions and 66 deletions.
diff --git a/README.md b/README.md
@@ -1,18 +1,30 @@
-# Vue 3 + TypeScript + Vite
+![image-20230610140346190](https://gitee.com/mark_xian/graphic-bed/raw/master/202306101403488.png)
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+<center>An AI-powered tool for generating mind maps, enhancing productivity by streamlining idea organization.</center>
 
-## Recommended IDE Setup
+---
 
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+## Features
+---
+- Generates mind maps automatically based on user input
+- Offers various customization options for the generated mind maps
+- Supports exporting the mind maps in various formats, such as PNG, PDF, and SVG
+![mindmap](https://gitee.com/mark_xian/graphic-bed/raw/master/202306101041874.gif)
 
-## Type Support For `.vue` Imports in TS
+## Motivation
+----
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+The motivation behind AI-powered mind map generator tools is to help users create mind maps more quickly and efficiently. Traditional manual mind map creation requires a lot of time and effort, while using an AI-powered tool can greatly reduce the time needed and increase productivity. Additionally, AI-powered mind map generator tools can automatically generate related nodes and branches based on the keywords and information provided by the user, helping to streamline the mind mapping process.
 
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+## Inspiration
 
-1. Disable the built-in TypeScript Extension
-   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+---
+
+- [Flowise](https://github.com/FlowiseAI/Flowise)
+- Xmind
+
+## License
+
+---
+
+Source code in this repository is made available under the [MIT License](https://github.com/xianjianlf2/MindGeniusAI/blob/main/LICENSE).
diff --git a/components.d.ts b/components.d.ts
@@ -18,6 +18,7 @@ declare module '@vue/runtime-core' {
     ALayoutFooter: typeof import('ant-design-vue/es')['LayoutFooter']
     ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
     AModal: typeof import('ant-design-vue/es')['Modal']
+    APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
     ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ASpin: typeof import('ant-design-vue/es')['Spin']

diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "@vueuse/motion": "^2.0.0",
     "ant-design-vue": "4.0.0-rc.5",
     "axios": "^1.4.0",
+    "lodash": "^4.17.21",
     "pinia": "^2.1.3",
     "router-view": "^1.1.7",
     "vue": "^3.3.4",
@@ -35,6 +36,7 @@
     "@iconify-icons/mdi": "^1.2.46",
     "@iconify/vue": "^4.1.1",
     "@types/d3": "^7.4.0",
+    "@types/lodash": "^4.14.195",
     "@types/marked": "^5.0.0",
     "@types/node": "^20.2.3",
     "@types/uuid": "^9.0.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/server/.example.env b/server/.example.env
@@ -1,5 +1,2 @@
-PINECONE_API_KEY="YOUR-KEY"
-PINECONE_ENVIRONMENT="YOUR-KEY"
-PINECONE_INDEX="YOUR-KEY"
 OPENAI_API_KEY="YOUR-KEY"
 OPENAI_PROXY_URL="YOUR-KEY"
diff --git a/server/chatMindMap.ts b/server/chatMindMap.ts
@@ -6,14 +6,27 @@ import { useOpenAIProxy } from './utils/useOpenAIProxy.ts'
 
 export async function chatMindMap(topic: string, messageSend: Function, messageDone: Function) {
   let result = ''
-  const prompt = new HumanChatMessage(
-            `create a road map / guide line for the topic ${topic}
-              requirement:
-              1.use markdown
-              2.when guide line is started, please use '[START]' to mark the start point
-              3.short language is preferred
-              4.usually, there are 3 levels
-            `)
+  let prompt: HumanChatMessage
+  const pattern = /[\u4E00-\u9FA5]+/
+  if (pattern.test(topic)) {
+    prompt = new HumanChatMessage(
+      `为主题${topic}创建一个思维导图/指南
+        要求：
+        1.使用markdown
+        2.语言简洁
+        3.通常有3个级别
+      `)
+  }
+  else {
+    prompt = new HumanChatMessage(
+      `create a road map / guide line for the topic ${topic}
+        requirement:
+        1.use markdown
+        2.short language is preferred
+        3.usually, there are 3 levels
+      `)
+  }
+
   const chat = new ChatOpenAI({
     maxTokens: 1024,
     streaming: true,

diff --git a/src/api/index.ts b/src/api/index.ts
@@ -39,7 +39,7 @@ function fetchChat(url: string, data: any) {
     onmessage(msg) {
       const { status, data } = JSON.parse(msg.data)
       if (status === MessageStatus.PENDING)
-        chatStore.appendMessage(data)
+        chatStore.appendMessage(`${data}`)
 
       else if (status === MessageStatus.DONE)
         controller.abort()

diff --git a/src/components/MindMap.vue b/src/components/MindMap.vue
@@ -5,6 +5,7 @@ import { Snapline } from '@antv/x6-plugin-snapline'
 import Hierarchy from '@antv/hierarchy'
 import { Keyboard } from '@antv/x6-plugin-keyboard'
 import { Selection } from '@antv/x6-plugin-selection'
+import { cloneDeep } from 'lodash'
 import type { MindMapData } from '../stores'
 import { useNodeStore } from '../stores'
 
@@ -21,7 +22,7 @@ const graphRef = ref<Graph>()
 const containerRef = ref()
 const nodeStore = useNodeStore()
 watch(() => nodeStore.nodes, (nodes) => {
-  data.value = nodes
+  data.value = cloneDeep(nodes)
   if (nodes) {
     useBindingKeyBoard(graphRef.value!, render)
     render(graphRef.value!)
@@ -73,6 +74,16 @@ Graph.registerNode(
         fill: '#262626',
       },
     },
+    tools: [
+      {
+        name: 'node-editor',
+        args: {
+          attrs: {
+            backgroundColor: '#5F95FF',
+          },
+        },
+      },
+    ],
   },
   true,
 )
@@ -113,6 +124,16 @@ Graph.registerNode(
         d: 'M 0 15 L 60 15',
       },
     },
+    tools: [
+      {
+        name: 'node-editor',
+        args: {
+          attrs: {
+            backgroundColor: '#5F95FF',
+          },
+        },
+      },
+    ],
   },
   true,
 )
@@ -266,7 +287,7 @@ function addChildNode(id: string, type: any) {
       item = {
         id: `${id}-${length + 1}`,
         type: 'topic-branch',
-        label: `分支主题${length + 1}`,
+        label: `topic-branch-${length + 1}`,
         width: 100,
         height: 40,
       }
@@ -275,7 +296,7 @@ function addChildNode(id: string, type: any) {
       item = {
         id: `${id}-${length + 1}`,
         type: 'topic-child',
-        label: `子主题${length + 1}`,
+        label: `topic-child-${length + 1}`,
         width: 60,
         height: 30,
       }
@@ -307,28 +328,22 @@ function removeNode(id: string) {
 function useInitMindMap() {
   const graph = new Graph({
     container: containerRef.value,
-    background: {
-      color: '#F2F7FA',
-    },
     mousewheel: true,
     autoResize: true,
     panning: true,
   })
-  graph.use(
-    new Snapline({
-      enabled: true,
-    }),
-  )
-  graph.use(
-    new Keyboard({
-      enabled: true,
-    }),
-  )
-  graph.use(
-    new Selection({
-      enabled: true,
-    }),
-  )
+  graph.use(new Snapline())
+  graph.use(new Selection(
+    {
+      multiple: true,
+      modifiers: ['alt'],
+      rubberband: true,
+      showNodeSelectionBox: true,
+      pointerEvents: 'none',
+    },
+  ))
+  graph.use(new Keyboard())
+
   return { graph }
 }
 
@@ -337,14 +352,14 @@ function useBindingKeyBoard(graph: Graph, render: any) {
     const { id } = node
     const type = node.prop('type')
     if (addChildNode(id, type))
-      render()
+      render(graph)
   })
   graph.bindKey(['backspace', 'delete'], () => {
     const selectedNodes = graph.getSelectedCells().filter(item => item.isNode())
     if (selectedNodes.length) {
       const { id } = selectedNodes[0]
       if (removeNode(id))
-        render()
+        render(graph)
     }
   })
 
@@ -355,7 +370,7 @@ function useBindingKeyBoard(graph: Graph, render: any) {
       const node = selectedNodes[0]
       const type = node.prop('type')
       if (addChildNode(node.id, type))
-        render()
+        render(graph)
     }
   })
 }
@@ -370,6 +385,4 @@ onMounted(() => {
   <div ref="containerRef" />
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/src/components/RobotMessage.vue b/src/components/RobotMessage.vue
@@ -2,7 +2,9 @@
 import type { PropType } from 'vue'
 import { ref } from 'vue'
 import type { Message } from '../stores/useChatStore'
+import { useChatStore } from '../stores/useChatStore'
 import { useNodeStore } from '../stores'
+import { useCopyText } from '@/utils'
 
 defineProps({
   message: {
@@ -14,6 +16,11 @@ defineProps({
 const showButtonGroup = ref(false)
 
 const nodeStore = useNodeStore()
+const chatStore = useChatStore()
+
+function confirm(id: Message['id']) {
+  chatStore.removeMessage(id)
+}
 </script>
 
 <template>
@@ -24,18 +31,19 @@ const nodeStore = useNodeStore()
         <a-button type="primary" ghost size="small" @click="nodeStore.generateNode(message.content)">
           generate
         </a-button>
-        <a-button type="primary" ghost size="small">
+        <a-button type="primary" ghost size="small" @click="useCopyText(message.content)">
           copy
         </a-button>
-        <a-button danger ghost size="small">
-          delete
-        </a-button>
+        <a-popconfirm title="Are you sure delete this message?" ok-text="Yes" cancel-text="No" @confirm="confirm(message.id)">
+          <a href="#">
+            <a-button danger ghost size="small">
+              delete
+            </a-button></a>
+        </a-popconfirm>
       </div>
     </div>
     <div class="mt-1 text-sm inline-block break-words" v-html="message.content" />
   </div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/src/components/TopNav.vue b/src/components/TopNav.vue
@@ -4,6 +4,10 @@ import { ref } from 'vue'
 import ChatBox from './ChatBox.vue'
 
 const showChatBox = ref(false)
+
+function handleOpenGitHub() {
+  window.open('https://github.com/xianjianlf2/MindGeniusAI', '_blank')
+}
 </script>
 
 <template>
@@ -13,8 +17,8 @@ const showChatBox = ref(false)
       <span>Create a mindMap</span>
     </div>
 
-    <!-- <div class="flex gap-2 justify-center items-center">
-      <a-button type="text">
+    <div class="flex gap-2 justify-center items-center">
+      <!-- <a-button type="text">
         <template #icon>
           <span class="button-icon">
             <Icon icon="bx:save" width="24" color="white" />
@@ -27,10 +31,17 @@ const showChatBox = ref(false)
             <Icon icon="mdi:cog" width="24" />
           </span>
         </template>
+      </a-button> -->
+      <a-button type="text" @click="handleOpenGitHub">
+        <template #icon>
+          <span class="button-icon">
+            <Icon icon="mdi:github" width="24" />
+          </span>
+        </template>
       </a-button>
-    </div> -->
+    </div>
   </div>
-  <a-modal v-model:open="showChatBox" title="Talking with gpt" :footer="null" :mask-closable="false">
+  <a-modal v-model:open="showChatBox" title="Talking with AI" :footer="null" :mask-closable="false">
     <ChatBox />
   </a-modal>
 </template>