# title
VITE_APP_TITLE = 'Vue3-DeepSeek-Chat'

# port 默認http://localhost:5173/
VITE_PORT = 3001

# 運行時自動打開瀏覽器
VITE_OPEN = true

# 開啟https
VITE_HTTPS = false

# 是否刪除生產環境 console
VITE_DROP_CONSOLE = true

# DeepSeek API配置
VITE_DEEPSEEK_API_KEY = 替換為你的 API Key
VITE_DEEPSEEK_BASE_URL = https://api.deepseek.com

import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'

// 引入路由/狀態管理
import Router from './router'
import Pinia from './pinia'

import Plugins from './plugins'

const app = createApp(App)

app
.use(Router)
.use(Pinia)
.use(Plugins)
.mount('#app')

<template>
  <div class="flexbox flex-col" style="height:100%;">
    <Toolbar :title="chatSession?.title" />

    <div class="v3ai__scrollview flex1">
      <!-- Chat對話 -->
      <div v-if="chatSession && !isEmpty(chatSession.data)" class="v3ai__chatbot" ref="scrollRef" @scroll="onScroll">
        <div class="v3ai__chatbot-sessions">
          ...
        </div>
        <!-- 滾動底部 -->
        <div class="v3ai__scrollbottom flex-c" :class="{'is-bottom': reachBottom}" @click="scrollToBottom"><i class="iconfont ai-arrD"></i></div>
      </div>
      <!-- 導語 -->
      <div v-else class="v3ai__chatbot-intro">
        <i class="logo iconfont ai-deepseek"></i>
        <h3 class="name"><span class="txt text-gradient">嗨~ Vue3-DeepSeek</span></h3>
        <p class="desc">你身邊的智能小幫手，我可以幫你搜索、答疑、寫作，請把你的任務交給我吧~</p>
        <div class="prompt">
          <p class="tip flex-c"><span class="flex1">你可以這樣問</span><span class="flex-c" @click="refreshPrompt">換一換<i class="iconfont ai-shuaxin"></i></span></p>
          <ul class="list">
            <li v-for="(item,index) in promptList" :key="index">
              <div class="txt" @click="changePrompt(item.prompt)">{{item.emoji}} {{item.prompt}}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 編輯器 -->
    <ChatEditor ref="editorRef" :value="promptValue" :reachBottom="reachBottom" :scrollBottom="scrollToBottom" />
  </div>
</template>

/**
 * 路由配置
 * @author andy
 */

import { createRouter, createWebHashHistory } from 'vue-router'
import { appStore } from '@/pinia/modules/app'

// 批量導入modules路由
const modules = import.meta.glob('./modules/*.js', { eager: true })
const patchRoutes = Object.keys(modules).map(key => modules[key].default).flat()

const routes = [
  // 錯誤模塊
  {
    path: '/:pathMatch(.*)*',
    component: () => import('@views/error/404.vue'),
    meta: {
      title: '404 error'
    }
  },
  ...patchRoutes
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

// 全局鉤子攔截
router.beforeEach((to, from, next) => {
  const store = appStore()
  if(to?.meta?.isAuth && !store.isLogged) {
    next('/login')
  }else {
    next()
  }
})

router.afterEach(() => {
  // ...
})

router.onError(error => {
  console.warn('Router Error>>', error.message);
})

export default router

/**
 * 狀態管理 Pinia
 * @author andy
 */

import { createPinia } from 'pinia'
// 引入pinia本地持久化存儲
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia

export const chatStore = defineStore('chat', {
  state: () => ({
    // 聊天會話記錄
    sessionId: '',
    session: []
  }),
  getters: {},
  actions: {
    // 創建新對話
    createSession(ssid) {
      this.sessionId = ssid
      this.session.unshift({
        sessionId: ssid,
        title: '',
        data: []
      })
    },

    // 新增會話
    addSession(message) {
      // 判斷當前會話uuid是否存在，不存在創建新對話
      if(!this.sessionId) {
        const ssid = guid()
        this.createSession(ssid)
      }
      this.session.map(item => {
        if(item.sessionId == this.sessionId) {
          if(!item.title) {
            item.title = message.content
          }
          item.data.push(message)
        }
      })
    },

    // 更新某一條會話
    updateSession(key, content) {
      this.session.map(item => {
        if(item.sessionId == this.sessionId) {
          if(item.data && !isEmpty(item.data)) {
            item.data.map((it, index) => {
              if(it.key == key) {
                it.content = content
              }
            })
          }
        }
      })
    },

    // 獲取會話
    getSession() {
      return this.session.find(item => item.sessionId == this.sessionId)
    },

    // 移除會話
    removeSession(ssid) {
      const index = this.session.findIndex(item => item?.sessionId === ssid)
      if(index > -1) {
        this.session.splice(index, 1)
      }
      this.sessionId = ''
    },
    // 刪除某一條會話
    deleteSession(key) {
      this.session.map(item => {
        if(item.sessionId == this.sessionId) {
          if(item.data && !isEmpty(item.data)) {
            item.data.map((it, index) => {
              if(it.key == key) {
                item.data.splice(index, 1)
              }
            })
          }
        }
      })
    },

    // 清空會話
    clearSession() {
      this.session = []
      this.sessionId = ''
    }
  },
  // 本地持久化存儲(默認存儲localStorage)
  persist: true
  /* persist: {
    // key: 'chatStore', // 不設置則是默認app
    storage: localStorage,
    paths: ['ssid', 'sessions'] // 設置緩存鍵
  } */
})

const completion = await openai.chat.completions.create({
  messages: [
    {role: 'user', content: editorValue}
  ],
  model: 'deepseek-chat', // deepseek-chat對話模型 deepseek-reasoner推理模型
  stream: false, // 流式輸出
  max_tokens: 8192, // 限制一次請求中模型生成 completion 的最大 token 數(默認使用 4096)
  temperature: 0.4, // 嚴謹采樣 越低越嚴謹(默認1)
})

// 處理返回數據
console.log(completion.choices[0].message.content)

// 處理流式輸出
let content = ''
for await (const chunk of completion) {
  content += chunk.choices[0].delta.content;
  chatState.updateSession(uniKey, content)
  if(chunk.choices[0].finish_reason == 'stop') {
    loading.value = false
  }
  if(props.reachBottom) {
    props.scrollBottom()
  }
}