change client ui

langchat-aigc/src/main/java/cn/tycoding/langchat/aigc/service/impl/AigcMessageServiceImpl.java

@@ -74,6 +74,7 @@ public class AigcMessageServiceImpl extends ServiceImpl<AigcMessageMapper, AigcM
 
     @Override
     public AigcConversation addConversation(AigcConversation conversation) {
+        conversation.setCreateTime(new Date());
         aigcConversationMapper.insert(conversation);
         return conversation;
     }

langchat-ui-client/src/api/chat.ts

@@ -10,7 +10,7 @@ export function chat(
   onDownloadProgress?: (progressEvent: AxiosProgressEvent) => void
 ) {
   return http.post({
-    url: '/langchat/chat',
+    url: '/aigc/chat',
     data,
     onDownloadProgress: onDownloadProgress,
   });
@@ -24,7 +24,7 @@ export function genTranslate(
   onDownloadProgress?: (progressEvent: AxiosProgressEvent) => void
 ) {
   return http.post({
-    url: `/langchat/chat/translate`,
+    url: `/aigc/chat/translate`,
     data: data,
     onDownloadProgress: onDownloadProgress,
   });
@@ -38,7 +38,7 @@ export function genWrite(
   onDownloadProgress?: (progressEvent: AxiosProgressEvent) => void
 ) {
   return http.post({
-    url: `/langchat/chat/write`,
+    url: `/aigc/chat/write`,
     data: data,
     onDownloadProgress: onDownloadProgress,
   });
@@ -59,7 +59,7 @@ export function genMindMap(data: ChatR) {
  */
 export function genChart(data: ChatR) {
   return http.post({
-    url: '/langchat/chat/chart',
+    url: '/aigc/chat/chart',
     data: data,
   });
 }
@@ -69,7 +69,7 @@ export function genChart(data: ChatR) {
  */
 export function genImage(data: ImageR): Promise<Oss> {
   return http.post({
-    url: '/langchat/chat/image',
+    url: '/aigc/chat/image',
     data: data,
   });
 }
@@ -82,7 +82,7 @@ export function genMermaid(
   onDownloadProgress?: (progressEvent: AxiosProgressEvent) => void
 ) {
   return http.post({
-    url: '/langchat/chat/mermaid',
+    url: '/aigc/chat/mermaid',
     data: data,
     onDownloadProgress: onDownloadProgress,
   });

langchat-ui-client/src/api/conversation.ts

@@ -1,55 +1,54 @@
 import { http } from '@/utils/request';
-import { Conversation } from '@/typings/chat';
 
 export function page(params: any) {
   return http.get({
-    url: '/langchat/conversation/page',
+    url: '/aigc/conversation/page',
     params,
   });
 }
 
-export function list(params: any) {
+export function list(data: any) {
   return http.get({
-    url: '/langchat/conversation/list',
-    params,
+    url: '/aigc/conversation/list',
+    data,
   });
 }
 
-export function add(params: any) {
+export function add(data: any) {
   return http.post({
-    url: '/langchat/conversation',
-    params,
+    url: '/aigc/conversation',
+    data,
   });
 }
 
-export function update(params: Partial<Conversation>) {
+export function update(data: any) {
   return http.put({
-    url: '/langchat/conversation',
-    data: params,
+    url: '/aigc/conversation',
+    data,
   });
 }
 
 export function del(conversationId: string) {
   return http.delete({
-    url: `/langchat/conversation/${conversationId}`,
+    url: `/aigc/conversation/${conversationId}`,
   });
 }
 
 export function clearMessage(conversationId: string | undefined) {
   return http.delete({
-    url: `/langchat/conversation/message/${conversationId}`,
+    url: `/aigc/conversation/message/${conversationId}`,
   });
 }
 
 export function getMessages(conversationId: string) {
   return http.get({
-    url: `/langchat/conversation/messages/${conversationId}`,
+    url: `/aigc/conversation/messages/${conversationId}`,
   });
 }
 
 export function addMessage(data: any) {
   return http.post({
-    url: `/langchat/conversation/message`,
+    url: `/aigc/conversation/message`,
     data,
   });
 }

langchat-ui-client/src/api/docs.ts

@@ -7,7 +7,7 @@ import { AxiosProgressEvent } from 'axios';
  */
 export function upload(data: any, onUploadProgress?: (progressEvent: AxiosProgressEvent) => void) {
   return http.post({
-    url: `/langchat/docs/upload`,
+    url: `/aigc/docs/upload`,
     data,
     headers: {
       'Content-Type': 'multipart/form-data',
@@ -27,7 +27,7 @@ export function chat(
   onDownloadProgress?: (progressEvent: AxiosProgressEvent) => void
 ) {
   return http.post({
-    url: `/langchat/docs/chat`,
+    url: `/aigc/docs/chat`,
     data: data,
     onDownloadProgress: onDownloadProgress,
   });
@@ -35,25 +35,25 @@ export function chat(
 
 export function list(): Promise<Oss[]> {
   return http.get({
-    url: '/langchat/file/list',
+    url: '/aigc/file/list',
   });
 }
 
 export function update(data: Oss) {
   return http.put({
-    url: '/langchat/file',
+    url: '/aigc/file',
     data: data,
   });
 }
 
 export function del(id?: number) {
   return http.delete({
-    url: `/langchat/file/${id}`,
+    url: `/aigc/file/${id}`,
   });
 }
 
 export function task() {
   return http.get({
-    url: `/langchat/docs/task`,
+    url: `/aigc/docs/task`,
   });
 }

langchat-ui-client/src/api/model.ts

@@ -2,6 +2,6 @@ import { http } from '@/utils/request';
 
 export function getList() {
   return http.get({
-    url: '/langchat/model/list',
+    url: '/aigc/model/list',
   });
 }

langchat-ui-client/src/api/models/index.d.ts

@@ -67,3 +67,50 @@ export interface ImageR {
   size?: string;
   style?: string;
 }
+
+export const modelList = [
+  {
+    label: 'OpenAI',
+    key: 'OpenAI',
+    type: 'group',
+    children: [
+      {
+        label: 'GPT-4o',
+        value: 'gpt-4o',
+      },
+      {
+        label: 'GPT-4 Turbo',
+        value: 'gpt-4-turbo',
+      },
+      {
+        label: 'GPT-4',
+        value: 'gpt-4',
+      },
+      {
+        label: 'GPT-3.5 Turbo',
+        value: 'gpt-3.5-turbo',
+      },
+    ],
+  },
+  {
+    label: 'Google Gemini',
+    value: 'gemini',
+    type: 'group',
+    children: [
+      {
+        label: 'Gemini 1.5 Flash',
+        value: 'gemini-1.5-flash',
+      },
+      {
+        label: 'Gemini 1.5 Pro',
+        value: 'gemini-1.5-pro',
+      },
+    ],
+  },
+  {
+    label: 'Ollama',
+    value: 'ollama',
+    type: 'group',
+    children: [],
+  },
+];

langchat-ui-client/src/api/prompt.ts

@@ -2,13 +2,13 @@ import { http } from '@/utils/request';
 
 export function getBotPage(data: any) {
   return http.get({
-    url: '/langchat/prompt/page',
+    url: '/aigc/prompt/page',
     data: data,
   });
 }
 
 export function getById(id: string) {
   return http.get({
-    url: '/langchat/prompt/' + id,
+    url: '/aigc/prompt/' + id,
   });
 }

langchat-ui-client/src/views/modules/chat/Header.vue

@@ -7,23 +7,14 @@
   import { t } from '@/locales';
   import { clearMessage } from '@/api/conversation';
   import html2canvas from 'html2canvas';
-  import { getList } from '@/api/model';
+  import { modelList } from '@/api/models/index.d.ts';
 
   const { isMobile } = useBasicLayout();
   const chatStore = useChatStore();
   const dialog = useDialog();
   const ms = useMessage();
   const isShow = ref(true);
-  const model = ref('gemma:2b');
-  const modelList = ref<
-    {
-      label: string;
-      value: string;
-    }[]
-  >([]);
   onMounted(async () => {
-    modelList.value = await getList();
-    chatStore.model = modelList.value[0].value;
     isShow.value = false;
   });
 
@@ -91,6 +82,7 @@
             <SvgIcon class="text-2xl" icon="solar:list-bold-duotone" />
           </n-button>
           <n-select
+            size="small"
             v-model:value="chatStore.model"
             :options="modelList"
             class="!w-[200px] tracking-widest"

langchat-ui-client/src/views/modules/chat/index.vue

@@ -24,7 +24,7 @@
   const prompt = ref<string>('');
   const chatId = ref<string>('');
   const aiChatId = ref<string>('');
-  const inputRef = ref<Ref | null>(null);
+  const inputRef = ref();
 
   const dataSources = computed(() => {
     // 获取当前聊天窗口的数据
@@ -174,12 +174,15 @@
     }
   }
 
-  const buttonDisabled = computed(() => {
-    return loading.value;
-  });
+  const menuOptions = ref([
+    {
+      label: 'Upload File',
+      value: 'Upload File',
+    },
+  ]);
 
   const footerClass = computed(() => {
-    let classes = ['p-8 pt-0'];
+    let classes = ['p-4'];
     if (isMobile.value) {
       classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-3', 'overflow-hidden'];
     }
@@ -231,7 +234,12 @@
               <div v-if="chatIsLoading" class="w-full h-full flex items-center justify-center">
                 <n-spin :show="chatIsLoading" size="large" />
               </div>
-              <div v-else ref="scrollRef" :class="[isMobile ? 'p-2' : 'p-8']" class="w-full m-auto">
+              <div
+                v-else
+                ref="scrollRef"
+                class="max-w-screen-3xl m-auto px-10"
+                :class="[isMobile ? 'p-2' : 'p-5']"
+              >
                 <Message
                   v-for="(item, index) of dataSources"
                   :key="index"
@@ -255,51 +263,33 @@
           </main>
 
           <footer :class="footerClass">
-            <div class="w-full m-auto">
-              <div class="flex items-center justify-between space-x-2 w-full">
+            <div class="w-full max-w-screen-3xl m-auto px-8 pb-6 relative">
+              <div class="flex items-center justify-between">
                 <n-input
                   ref="inputRef"
                   v-model:value="prompt"
-                  :autosize="{ minRows: 3, maxRows: isMobile ? 4 : 8 }"
-                  :placeholder="t('chat.placeholder')"
                   type="textarea"
                   @keypress="handleEnter"
+                  :autosize="{ minRows: 1, maxRows: isMobile ? 1 : 4 }"
+                  class="!rounded-full px-2 py-1"
+                  :placeholder="t('chat.placeholder')"
+                  size="large"
                 >
-                  <template #suffix>
-                    <div
-                      class="flex justify-end align-center absolute w-full bottom-0 left-0 p-2 gap-2"
-                    >
-                      <n-popover trigger="hover">
-                        <template #trigger>
-                          <n-button
-                            :disabled="buttonDisabled"
-                            class="z-10"
-                            secondary
-                            size="small"
-                            type="info"
-                            @click="handleSubmit"
-                          >
-                            <template #icon>
-                              <SvgIcon icon="ic:round-plus" />
-                            </template>
-                          </n-button>
-                        </template>
-                        <span>{{ t('chat.filePlaceholder') }}</span>
-                      </n-popover>
-
-                      <n-button
-                        :disabled="buttonDisabled"
-                        class="z-10"
-                        secondary
-                        size="small"
-                        type="primary"
-                        @click="handleSubmit"
-                      >
+                  <template #prefix>
+                    <n-popselect placement="top" :options="menuOptions" trigger="click">
+                      <n-button text class="!mr-2" size="large">
                         <template #icon>
-                          <SvgIcon icon="ri:send-plane-fill" />
+                          <SvgIcon icon="ion:attach" />
                         </template>
                       </n-button>
-                    </div>
+                    </n-popselect>
+                  </template>
+                  <template #suffix>
+                    <n-button text :loading="loading" @click="handleSubmit">
+                      <template #icon>
+                        <SvgIcon icon="mdi:sparkles-outline" />
+                      </template>
+                    </n-button>
                   </template>
                 </n-input>
               </div>
@@ -311,12 +301,4 @@
   </div>
 </template>
 
-<style lang="less" scoped>
-  ::v-deep(.n-input__textarea) {
-    height: calc(100% - 30px);
-  }
-
-  ::v-deep(.n-scrollbar-rail) {
-    height: calc(100% - 33px);
-  }
-</style>
+<style lang="less" scoped></style>

langchat-ui-client/src/views/modules/chat/sider/index.vue

@@ -2,7 +2,7 @@
   import type { CSSProperties } from 'vue';
   import { computed, watch } from 'vue';
   import { SvgIcon } from '@/components/common';
-  import { NButton, NLayoutSider, useMessage } from 'naive-ui';
+  import { NButton, NLayoutSider } from 'naive-ui';
   import { useChatStore } from '../store/useChatStore';
   import { useBasicLayout } from '../store/useBasicLayout';
   import List from './List.vue';
@@ -11,7 +11,6 @@
 
   const chatStore = useChatStore();
   const { isMobile } = useBasicLayout();
-  const ms = useMessage();
 
   const loading = computed(() => {
     return chatStore.sideIsLoading;
@@ -53,7 +52,11 @@
   );
 
   async function onAddConversation() {
-    await addConversation({});
+    chatStore.sideIsLoading = true;
+    console.log('xxx');
+    await addConversation({
+      title: 'New Chat' + Number(chatStore.conversations.length + 1),
+    });
     await chatStore.loadData();
   }
 </script>
@@ -76,22 +79,10 @@
       </div>
       <main v-else class="flex flex-col flex-1 min-h-0">
         <div class="p-4 pt-3 flex justify-between items-center gap-2">
-          <n-popover trigger="hover">
-            <template #trigger>
-              <n-button @click="onAddConversation" size="small" type="success" secondary>
-                <SvgIcon icon="ic:round-plus" />
-              </n-button>
-            </template>
+          <n-button @click="onAddConversation" block size="" type="success" secondary>
+            <SvgIcon icon="ic:round-plus" />
             <span>{{ t('chat.newChatButton') }}</span>
-          </n-popover>
-          <n-popover trigger="hover">
-            <template #trigger>
-              <n-button @click="onAddConversation" size="small" type="success" secondary>
-                <SvgIcon icon="material-symbols:refresh" />
-              </n-button>
-            </template>
-            <span>{{ t('chat.newChatButton') }}</span>
-          </n-popover>
+          </n-button>
         </div>
         <div class="flex-1 min-h-0 pb-4 overflow-hidden">
           <List />

langchat-ui-client/src/views/modules/chat/store/useChatStore.ts

@@ -15,7 +15,7 @@ import { toRaw } from 'vue';
 export const useChatStore = defineStore('chat-store', {
   state: (): ChatState =>
     <ChatState>{
-      model: '',
+      model: 'gpt-4o',
       active: '',
       isEdit: '',
       siderCollapsed: true,
@@ -56,7 +56,7 @@ export const useChatStore = defineStore('chat-store', {
         } else {
           this.active = '';
           this.conversations = [];
-          await router.replace({ path: router.currentRoute.value.path, query: {} });
+          await router.replace({ path: '/chat', query: {} });
         }
       } finally {
         this.sideIsLoading = false;
@@ -104,11 +104,11 @@ export const useChatStore = defineStore('chat-store', {
       }
       const { id, promptId } = this.curConversation;
       // replace url path
-      const query: any = { conversationId: id };
+      const query: any = {};
       if (promptId) {
         query.promptId = promptId;
       }
-      await router.replace({ path: router.currentRoute.value.path, query });
+      await router.replace({ path: `/chat/${id}`, query });
     },
 
     /**