Feat frontend api refactor

.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
   extends: [
@@ -19,5 +19,6 @@
     'no-console': 'warn',
     'prefer-const': 'error',
     'no-var': 'error',
+    '@typescript-eslint/no-explicit-any': 'warn',
   },
 };

.gitignore

@@ -12,4 +12,7 @@ dist/
 
 # Models
 models/
-*/**/models/
+*/**/models/
+
+*/**/database.sqlite
+./backend/src/database.sqlite

.vscode/config.json

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

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["upsert"]
+}

backend/interceptor/LoggingInterceptor.ts

@@ -0,0 +1,28 @@
+import {
+  Injectable,
+  NestInterceptor,
+  ExecutionContext,
+  CallHandler,
+  Logger,
+} from '@nestjs/common';
+import { Observable } from 'rxjs';
+import { GqlExecutionContext } from '@nestjs/graphql';
+
+@Injectable()
+export class LoggingInterceptor implements NestInterceptor {
+  private readonly logger = new Logger('GraphQLRequest');
+
+  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
+    const ctx = GqlExecutionContext.create(context);
+    const { operation, fieldName } = ctx.getInfo();
+    const variables = ctx.getContext().req.body.variables;
+
+    this.logger.log(
+      `${operation.operation.toUpperCase()} \x1B[33m${fieldName}\x1B[39m${
+        variables ? ` Variables: ${JSON.stringify(variables)}` : ''
+      }`,
+    );
+
+    return next.handle();
+  }
+}

backend/src/app.module.ts

@@ -10,8 +10,8 @@
 import { TokenModule } from './token/token.module';
 import { UserModule } from './user/user.module';
 import { InitModule } from './init/init.module';
 import { RolesGuard } from './guard/roles.guard';
 import { MenuGuard } from './guard/menu.guard';
 import { User } from './user/user.model';
 import { AppResolver } from './app.resolver';
 
@@ -20,7 +20,7 @@
     ConfigModule.forRoot({ isGlobal: true }),
     GraphQLModule.forRoot<ApolloDriverConfig>({
       driver: ApolloDriver,
-      autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
+      autoSchemaFile: join(process.cwd(), '../frontend/src/graphql/schema.gql'),
       sortSchema: true,
       playground: true,
       installSubscriptionHandlers: true,
@@ -30,7 +30,6 @@
       type: 'sqlite',
       database: join(process.cwd(), 'src/database.sqlite'),
       synchronize: true,
-      logging: true,
       entities: [__dirname + '/**/*.model{.ts,.js}'],
     }),
     InitModule,

backend/src/auth/auth.service.ts

@@ -55,7 +55,7 @@
 
   async login(
     loginUserInput: LoginUserInput,
-  ): Promise<{ access_token: string }> {
+  ): Promise<{ accessToken: string }> {
     const { username, password } = loginUserInput;
 
     const user = await this.userRepository.findOne({
@@ -73,10 +73,10 @@
     }
 
     const payload = { userId: user.id, username: user.username };
-    const access_token = this.jwtService.sign(payload);
-    this.jwtCacheService.storeToken(access_token);
+    const accessToken = this.jwtService.sign(payload);
+    this.jwtCacheService.storeToken(accessToken);
 
-    return { access_token };
+    return { accessToken };
   }
 
   async validateToken(params: CheckTokenInput): Promise<boolean> {
@@ -84,7 +84,7 @@
       await this.jwtService.verifyAsync(params.token);
       return this.jwtCacheService.isTokenStored(params.token);
     } catch (error) {
       console.log(error);
       return false;
     }
   }
@@ -92,7 +92,7 @@
     Logger.log('logout token', token);
     try {
       await this.jwtService.verifyAsync(token);
     } catch (error) {
       return false;
     }
 

backend/src/chat/chat.model.ts

@@ -59,7 +59,7 @@ export class ChatCompletionChunk {
   model: string;
 
   @Field({ nullable: true })
-  system_fingerprint: string | null;
+  systemFingerprint: string | null;
 
   @Field(() => [ChatCompletionChoice])
   choices: ChatCompletionChoice[];
@@ -74,5 +74,5 @@ class ChatCompletionChoice {
   delta: ChatCompletionDelta;
 
   @Field({ nullable: true })
-  finish_reason: string | null;
+  finishReason: string | null;
 }

backend/src/chat/chat.resolver.ts

@@ -1,21 +1,24 @@
-import { Resolver, Subscription, Args, Query, Mutation } from '@nestjs/graphql';
-import { ChatCompletionChunk } from './chat.model';
+import {
+  Resolver,
+  Subscription,
+  Args,
+  Field,
+  ObjectType,
+  Query,
+  Mutation,
+} from '@nestjs/graphql';
+import { Chat, ChatCompletionChunk } from './chat.model';
 import { ChatProxyService, ChatService } from './chat.service';
 import { UserService } from 'src/user/user.service';
-import { Chat } from './chat.model';
-import { Message, MessageRole } from 'src/chat/message.model';
+import { Message, MessageRole } from './message.model';
 import {
+  ChatInput,
   NewChatInput,
   UpdateChatTitleInput,
-  ChatInput,
-} from 'src/chat/dto/chat.input';
+} from './dto/chat.input';
+import { GetUserIdFromToken } from 'src/decorator/get-auth-token';
 import { UseGuards } from '@nestjs/common';
-import {
-  ChatGuard,
-  ChatSubscriptionGuard,
-  MessageGuard,
-} from '../guard/chat.guard';
-import { GetUserIdFromToken } from '../decorator/get-auth-token';
+import { ChatGuard, MessageGuard } from 'src/guard/chat.guard';
 
 @Resolver('Chat')
 export class ChatResolver {

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();

backend/src/user/user.resolver.ts

@@ -44,5 +44,5 @@ export class UserResolver {
 @ObjectType()
 class LoginResponse {
   @Field()
-  access_token: string;
+  accessToken: string;
 }

backend/src/user/user.service.ts

@@ -1,4 +1,7 @@
 import { Injectable } from '@nestjs/common';
+import { User } from './user.model';
+import { Repository } from 'typeorm';
+import { InjectRepository } from '@nestjs/typeorm';
 
 @Injectable()
 export class UserService {

frontend/.eslintrc.json

@@ -1,3 +1,4 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "ignorePatterns": ["src/graphql/type.ts", "src/graphql/**/*"]
 }

frontend/.tmuxinator/build.yml

@@ -0,0 +1,11 @@
+name: frontend-dev
+root: ./
+
+windows:
+  - editor:
+      layout: even-horizontal
+      panes:
+        - next:
+            - pnpm dev
+        - codegen:
+            - pnpm generate:watch

frontend/README.md

@@ -1,134 +1,43 @@
-<div align="center">
-  <img src="ollama-nextjs-ui.gif">
-</div>
+- we are using tmuxinator if you want to watch both codegen and dev server
+
+struct for now
+
+```plain
+
+src/
+├── app/
+│   ├── hooks/                      # React Hooks
+│   │   ├── useAuth.ts             # 认证相关 hook
+│   │   ├── useChatStore.ts        # 聊天状态管理
+│   │   ├── useLocalStorageData.ts # 本地存储数据管理
+│   │   ├── useModels.ts           # AI模型选择和缓存管理
+│   │   └── useSpeechRecognition.ts # 语音识别功能
+│   ├── login/                     # 登录页面
+│   ├── register/                  # 注册页面
+│   └── components/                # 共享组件
+│
+├── graphql/
+│   ├── request.ts                 # GraphQL 查询/变更定义
+│   │   ├── auth.ts               # 认证相关查询
+│   │   ├── chat.ts               # 聊天相关查询
+│   │   └── models.ts             # 模型相关查询
+│   ├── schema.graphql            # GraphQL Schema定义
+│   └── type.tsx                  # 由 schema 生成的 TypeScript 类型
+│
+├── lib/
+│   ├── client.ts                 # Apollo Client 配置
+│   │   ├── apolloClient.ts      # Apollo Client 实例设置
+│   │   └── errorHandling.ts     # 错误处理中间件
+│   ├── storage.ts                # 存储相关枚举和常量
+│   │   ├── LocalStore.ts        # localStorage keys
+│   │   └── SessionStore.ts      # sessionStorage keys
+│   └── utils.ts                  # 通用工具函数
+│
+└── test/
+    ├── utils/                    # 测试工具函数
+    │   ├── client.ts            # 测试用 Apollo Client
+    │   └── requests.ts          # 测试用请求方法
+    └── __tests__/               # 测试用例
+        └── hooks/               # Hooks 测试
 
-<h1 align="center">
-  Fully-featured & beautiful web interface for Ollama LLMs
-</h1>
-
-<div align="center">
-
-![GitHub Repo stars](https://img.shields.io/github/stars/jakobhoeg/nextjs-ollama-llm-ui)
-
-</div>
-
-Get up and running with Large Language Models **quickly**, **locally** and even **offline**.
-This project aims to be the easiest way for you to get started with LLMs. No tedious and annoying setup required!
-
-# Features ✨
-
-- **Beautiful & intuitive UI:** Inspired by ChatGPT, to enhance similarity in the user experience.
-- **Fully local:** Stores chats in localstorage for convenience. No need to run a database.
-- **Fully responsive:** Use your phone to chat, with the same ease as on desktop.
-- **Easy setup:** No tedious and annoying setup required. Just clone the repo and you're good to go!
-- **Code syntax highligting:** Messages that include code, will be highlighted for easy access.
-- **Copy codeblocks easily:** Easily copy the highlighted code with one click.
-- **Download/Pull & Delete models:** Easily download and delete models directly from the interface.
-- **Switch between models:** Switch between models fast with a click.
-- **Chat history:** Chats are saved and easily accessed.
-- **Light & Dark mode:** Switch between light & dark mode.
-
-# Preview
-
-https://github.com/jakobhoeg/nextjs-ollama-llm-ui/assets/114422072/08eaed4f-9deb-4e1b-b87a-ba17d81b9a02
-
-# Requisites ⚙️
-
-To use the web interface, these requisites must be met:
-
-1. Download [Ollama](https://ollama.com/download) and have it running. Or run it in a Docker container. Check the [docs](https://github.com/ollama/ollama) for instructions.
-2. Node.js (18+) and npm is required. [Download](https://nodejs.org/en/download)
-
-# Deploy your own to Vercel or Netlify in one click ✨
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fjakobhoeg%2Fnextjs-ollama-llm-ui&env=NEXT_PUBLIC_OLLAMA_URL&envDescription=Your%20Ollama%20URL) [![Deploy to Netlify Button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/jakobhoeg/nextjs-ollama-llm-ui)
-
-You'll need to set your [OLLAMA_ORIGINS](https://github.com/ollama/ollama/blob/main/docs/faq.md) environment variable on your machine that is running Ollama:
-
-```
-OLLAMA_ORIGINS="https://your-app.vercel.app/"
 ```
-
-# Installation 📖
-
-[![Packaging status](https://repology.org/badge/vertical-allrepos/nextjs-ollama-llm-ui.svg?columns=3)](https://repology.org/project/nextjs-ollama-llm-ui/versions)
-
-Use a pre-build package from one of the supported package managers to run a local environment of the web interface.
-Alternatively you can install from source with the instructions below.
-
-> [!NOTE]  
-> If your frontend runs on something other than `http://localhost` or `http://127.0.0.1`, you'll need to set the OLLAMA_ORIGINS to your frontend url.
->
-> This is also stated in the [documentation](https://github.com/ollama/ollama/blob/main/docs/faq.md#how-do-i-configure-ollama-server):
->
-> `Ollama allows cross-origin requests from 127.0.0.1 and 0.0.0.0 by default. Additional origins can be configured with OLLAMA_ORIGINS`
-
-## Install from source
-
-**1. Clone the repository to a directory on your pc via command prompt:**
-
-```
-git clone https://github.com/jakobhoeg/nextjs-ollama-llm-ui
-```
-
-**2. Open the folder:**
-
-```
-cd nextjs-ollama-llm-ui
-```
-
-**3. Rename the `.example.env` to `.env`:**
-
-```
-mv .example.env .env
-```
-
-**4. If your instance of Ollama is NOT running on the default ip-address and port, change the variable in the .env file to fit your usecase:**
-
-```
-NEXT_PUBLIC_OLLAMA_URL="http://localhost:11434"
-```
-
-**5. Install dependencies:**
-
-```
-npm install
-```
-
-**6. Start the development server:**
-
-```
-npm run dev
-```
-
-**5. Go to [localhost:3000](http://localhost:3000) and start chatting with your favourite model!**
-
-# Upcoming features
-
-This is a to-do list consisting of upcoming features.
-
-- ✅ Voice input support
-- ✅ Code syntax highlighting
-- ✅ Ability to send an image in the prompt to utilize vision language models.
-- ✅ Ability to regenerate responses
-- ⬜️ Import and export chats
-
-# Tech stack
-
-[NextJS](https://nextjs.org/) - React Framework for the Web
-
-[TailwindCSS](https://tailwindcss.com/) - Utility-first CSS framework
-
-[shadcn-ui](https://ui.shadcn.com/) - UI component built using Radix UI and Tailwind CSS
-
-[shadcn-chat](https://github.com/jakobhoeg/shadcn-chat) - Chat components for NextJS/React projects
-
-[Framer Motion](https://www.framer.com/motion/) - Motion/animation library for React
-
-[Lucide Icons](https://lucide.dev/) - Icon library
-
-# Helpful links
-
-[Medium Article](https://medium.com/@bartek.lewicz/launch-your-own-chatgpt-clone-for-free-on-colab-shareable-and-online-in-less-than-10-minutes-da19e44be5eb) - How to launch your own ChatGPT clone for free on Google Colab. By Bartek Lewicz.
-
-[Lobehub mention](https://lobehub.com/blog/5-ollama-web-ui-recommendation#5-next-js-ollama-llm-ui) - Five Excellent Free Ollama WebUI Client Recommendations