Feat frontend api refactor (#24)

#9 
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
	- Introduced a `LoginPage` component for user authentication.
- Added a multi-step registration component with enhanced user
experience.
- Implemented a new `AuthProvider` for managing authentication state
across the application.
- Added `RootProvider` to wrap components with necessary context
providers.
	- Enhanced `ChatBottombar` with voice input functionality.
	- Introduced `useModels` hook for fetching model tags with caching.
	- Added `LocalStore` enum for consistent local storage references.

- **Bug Fixes**
- Improved error handling in various components and services for better
user feedback.

- **Documentation**
- Updated README and other documentation files to reflect recent
changes.

- **Style**
- Modified CSS variables for improved UI consistency and updated
scrollbar styles.

- **Tests**
- Adjusted project API tests to maintain functionality after recent
changes.

- **Chores**
- Updated dependencies and configuration files for better performance
and compatibility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

.eslintrc.js

@@ -19,5 +19,6 @@ module.exports = {
     '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,33 @@
+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();
+    let variables = '';
+    try {
+      variables = ctx.getContext().req.body.variables;
+    } catch (error) {
+      variables = '';
+    }
+
+    this.logger.log(
+      `${operation.operation.toUpperCase()} \x1B[33m${fieldName}\x1B[39m${
+        variables ? ` Variables: ${JSON.stringify(variables)}` : ''
+      }`,
+    );
+
+    return next.handle();
+  }
+}

backend/package.json

@@ -40,9 +40,12 @@
     "class-validator": "^0.14.1",
     "fs-extra": "^11.2.0",
     "graphql": "^16.9.0",
+    "graphql-subscriptions": "^2.0.0",
+    "graphql-ws": "^5.16.0",
     "reflect-metadata": "^0.2.2",
     "rxjs": "^7.8.1",
     "sqlite3": "^5.1.7",
+    "subscriptions-transport-ws": "^0.11.0",
     "typeorm": "^0.3.20"
   },
   "devDependencies": {

backend/src/app.module.ts

@@ -14,23 +14,27 @@ import { RolesGuard } from './guard/roles.guard';
 import { MenuGuard } from './guard/menu.guard';
 import { User } from './user/user.model';
 import { AppResolver } from './app.resolver';
+import { APP_INTERCEPTOR } from '@nestjs/core';
+import { LoggingInterceptor } from 'interceptor/LoggingInterceptor';
 
 @Module({
   imports: [
     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,
+      subscriptions: {
+        'graphql-ws': true,
+        'subscriptions-transport-ws': true,
+      },
       context: ({ req, res }) => ({ req, res }),
     }),
     TypeOrmModule.forRoot({
       type: 'sqlite',
       database: join(process.cwd(), 'src/database.sqlite'),
       synchronize: true,
-      logging: true,
       entities: [__dirname + '/**/*.model{.ts,.js}'],
     }),
     InitModule,
@@ -41,6 +45,12 @@ import { AppResolver } from './app.resolver';
     ChatModule,
     TypeOrmModule.forFeature([User]),
   ],
-  providers: [AppResolver],
+  providers: [
+    AppResolver,
+    {
+      provide: APP_INTERCEPTOR,
+      useClass: LoggingInterceptor,
+    },
+  ],
 })
 export class AppModule {}

backend/src/auth/auth.service.ts

@@ -55,7 +55,7 @@ export class AuthService {
 
   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 @@ export class AuthService {
     }
 
     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> {

backend/src/chat/chat.model.ts

@@ -18,6 +18,15 @@ import { Message } from 'src/chat/message.model';
 import { SystemBaseModel } from 'src/system-base-model/system-base.model';
 import { User } from 'src/user/user.model';
 
+export enum StreamStatus {
+  STREAMING = 'streaming',
+  DONE = 'done',
+}
+
+registerEnumType(StreamStatus, {
+  name: 'StreamStatus',
+});
+
 @Entity()
 @ObjectType()
 export class Chat extends SystemBaseModel {
@@ -44,6 +53,18 @@ class ChatCompletionDelta {
   content?: string;
 }
 
+@ObjectType('ChatCompletionChoiceType')
+class ChatCompletionChoice {
+  @Field()
+  index: number;
+
+  @Field(() => ChatCompletionDelta)
+  delta: ChatCompletionDelta;
+
+  @Field({ nullable: true })
+  finishReason: string | null;
+}
+
 @ObjectType('ChatCompletionChunkType')
 export class ChatCompletionChunk {
   @Field()
@@ -59,20 +80,15 @@ export class ChatCompletionChunk {
   model: string;
 
   @Field({ nullable: true })
-  system_fingerprint: string | null;
+  systemFingerprint: string | null;
 
   @Field(() => [ChatCompletionChoice])
   choices: ChatCompletionChoice[];
-}
-
-@ObjectType('ChatCompletionChoiceType')
-class ChatCompletionChoice {
-  @Field()
-  index: number;
 
-  @Field(() => ChatCompletionDelta)
-  delta: ChatCompletionDelta;
+  @Field(() => StreamStatus)
+  status: StreamStatus;
+}
 
-  @Field({ nullable: true })
-  finish_reason: string | null;
+export function isDoneStatus(chunk: ChatCompletionChunk): boolean {
+  return chunk.status === StreamStatus.DONE;
 }

backend/src/chat/chat.module.ts

@@ -11,6 +11,7 @@ import { Message } from 'src/chat/message.model';
 import { ChatGuard } from '../guard/chat.guard';
 import { AuthModule } from '../auth/auth.module';
 import { UserService } from 'src/user/user.service';
+import { PubSub } from 'graphql-subscriptions';
 
 @Module({
   imports: [
@@ -24,6 +25,10 @@ import { UserService } from 'src/user/user.service';
     ChatService,
     ChatGuard,
     UserService,
+    {
+      provide: 'PUB_SUB',
+      useValue: new PubSub(),
+    },
   ],
   exports: [ChatService, ChatGuard],
 })