refactor: improve code organization and fix voice input bug

This commit refactors the frontend chat components to improve code organization and readability. It also fixes a bug in the voice input functionality where the transcript was not being properly cleared when stopping voice input.

.vscode/config.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

backend/src/main.ts

@@ -4,6 +4,18 @@ import 'reflect-metadata';
 
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
+  app.enableCors({
+    origin: '*',
+    credentials: true,
+    methods: ['GET', 'POST', 'OPTIONS'],
+    allowedHeaders: [
+      'Content-Type',
+      'Accept',
+      'Authorization',
+      'Access-Control-Allow-Origin',
+      'Access-Control-Allow-Credentials',
+    ],
+  });
   await app.listen(process.env.PORT ?? 3000);
 }
 bootstrap();

frontend/package.json

@@ -20,6 +20,7 @@
     "@hookform/resolvers": "^3.9.0",
     "@langchain/community": "^0.3.1",
     "@langchain/core": "^0.3.3",
+    "@nestjs/common": "^10.4.6",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",

frontend/src/app/HomeContent.tsx

@@ -177,7 +177,6 @@ export default function HomeContent() {
 
           if (chunk.choices[0]?.finish_reason === 'stop') {
             setLoadingSubmit(false);
-            // 保存到本地存储
             localStorage.setItem(`chat_${chatId}`, JSON.stringify(messages));
             window.dispatchEvent(new Event('storage'));
           }

frontend/src/lib/model-helper.ts

@@ -1,9 +1,26 @@
+import { ModelTags } from '@/graphql/type';
+import client from '@/utils/client';
+import { gql } from '@apollo/client';
+
 export function getSelectedModel(): string {
   if (typeof window !== 'undefined') {
+    client
+      .query<ModelTags>({
+        query: gql`
+          query {
+            modelTags {
+              tags
+            }
+          }
+        `,
+      })
+      .then((result) => {
+        console.log(result.data.tags);
+      });
     const storedModel = localStorage.getItem('selectedModel');
     return storedModel || 'gemma:2b';
   } else {
     // Default model
-    return 'gemma:2b';
+    return 'default';
   }
 }

frontend/src/utils/client.ts

@@ -4,14 +4,33 @@ import {
   HttpLink,
   ApolloLink,
   concat,
+  from,
 } from '@apollo/client';
+import { onError } from '@apollo/client/link/error';
 
 const httpLink = new HttpLink({
   uri: process.env.NEXT_PUBLIC_GRAPHQL_URL,
+  headers: {
+    'Access-Control-Allow-Credentials': 'true',
+    'Access-Control-Allow-Origin': '*',
+  },
 });
+const requestLoggingMiddleware = new ApolloLink((operation, forward) => {
+  console.log('GraphQL Request:', {
+    operationName: operation.operationName,
+    variables: operation.variables,
+    query: operation.query.loc?.source.body,
+  });
 
+  return forward(operation).map((response) => {
+    console.log('GraphQL Response:', response.data);
+    return response;
+  });
+});
 const authMiddleware = new ApolloLink((operation, forward) => {
-  // Get the authentication token from local storage if it exists
+  if (typeof window === 'undefined') {
+    return forward(operation);
+  }
   const token = localStorage.getItem('token');
   // Use the setContext method to set the HTTP headers.
   if (token) {
@@ -23,8 +42,21 @@ const authMiddleware = new ApolloLink((operation, forward) => {
   }
   return forward(operation);
 });
+const errorLink = onError(({ graphQLErrors, networkError, operation }) => {
+  if (graphQLErrors) {
+    graphQLErrors.forEach(({ message, locations, path }) => {
+      console.error(
+        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
+      );
+    });
+  }
+  if (networkError) {
+    console.error(`[Network error]: ${networkError}`);
+  }
+});
+
 const client = new ApolloClient({
-  link: concat(authMiddleware, httpLink),
+  link: from([errorLink, requestLoggingMiddleware, authMiddleware, httpLink]),
   cache: new InMemoryCache(),
 });
 

frontend/src/utils/requests.ts

@@ -1,7 +1,6 @@
 import { ApolloClient, gql, TypedDocumentNode } from '@apollo/client';
 import type { DocumentNode } from 'graphql';
 
-// 定义具体的查询类型
 export type GetUserProjectsQuery = { __typename?: 'Query' } & {
   getUserProjects: Array<
     { __typename?: 'Project' } & {

frontend/tsconfig.json

@@ -10,6 +10,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
+    "sourceMap": true,
     "incremental": true,
     "plugins": [
       {

package.json

@@ -26,5 +26,8 @@
   "packageManager": "[email protected]",
   "engines": {
     "node": ">=18"
+  },
+  "dependencies": {
+    "typescript": "5.6.2"
   }
 }