chore(frontend): fix some fd UI styling (#136)

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

- **New Features**
  - Enabled loading of remote images for a smoother media experience.
- Introduced an animated, floating navigation bar alongside interactive
components like a project showcase and an improved prompt form featuring
a typewriter effect and file upload.
- Added a new "About" page for additional information about the
application.
  - Introduced a modal component for enhanced user interaction.
- Expanded project management capabilities with new features for forking
projects, updating visibility, and subscribing to projects.
- Implemented a project status monitoring hook to enhance user
experience.
- Added enhanced error handling and user feedback mechanisms through
toast notifications.

- **Style**
- Refreshed the UI with a cohesive indigo color theme, enhanced
animations (blink and subtle pulse), and refined visuals for sign-in
error displays and animated borders.

- **Chores**
- Updated routing for cleaner URLs and optimized dependency management
for smoother performance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

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

Author: 4 people

backend/.env

@@ -2,3 +2,4 @@ PORT=8080
 JWT_SECRET="JACKSONCHENNAHEULALLENPENGYU"
 JWT_REFRESH_SECRET="JACKSONCHENNAHEULALLENPENGYUREFRESH"
 SALT_ROUNDS=123
+NODE_ENV="DEV"

backend/src/app.module.ts

@@ -16,6 +16,10 @@ import { APP_INTERCEPTOR } from '@nestjs/core';
 import { LoggingInterceptor } from 'src/interceptor/LoggingInterceptor';
 import { PromptToolModule } from './prompt-tool/prompt-tool.module';
 
+// TODO(Sma1lboy): move to a separate file
+function isProduction(): boolean {
+  return process.env.NODE_ENV === 'production';
+}
 @Module({
   imports: [
     ConfigModule.forRoot({ isGlobal: true }),
@@ -33,7 +37,7 @@ import { PromptToolModule } from './prompt-tool/prompt-tool.module';
     TypeOrmModule.forRoot({
       type: 'sqlite',
       database: join(process.cwd(), './database.db'),
-      synchronize: true,
+      synchronize: !isProduction(),
       entities: [__dirname + '/**/*.model{.ts,.js}'],
     }),
     InitModule,

backend/src/chat/chat.model.ts

@@ -5,6 +5,7 @@ import {
   Column,
   ManyToOne,
   JoinColumn,
+  RelationId,
 } from 'typeorm';
 import { Message } from 'src/chat/message.model';
 import { SystemBaseModel } from 'src/system-base-model/system-base.model';
@@ -56,6 +57,11 @@ export class Chat extends SystemBaseModel {
   @Field(() => User)
   user: User;
 
+  // Adding relation id to easily access the user id
+  @RelationId((chat: Chat) => chat.user)
+  @Field(() => ID)
+  userId: string;
+
   @ManyToOne(() => Project, (project) => project.chats)
   @Field(() => Project, { nullable: true })
   project: Project;

backend/src/chat/chat.resolver.ts

@@ -78,10 +78,7 @@ export class ChatResolver {
   }
 
   @Query(() => [String], { nullable: true })
-  async getAvailableModelTags(
-    @GetUserIdFromToken() userId: string,
-  ): Promise<string[]> {
-    this.logger.log('Fetching model tags for user:', userId);
+  async getAvailableModelTags(): Promise<string[]> {
     try {
       const response = await this.chatProxyService.fetchModelTags();
       this.logger.log('Loaded model tags:', response);

backend/src/common/model-provider/openai-model-provider.ts

@@ -37,7 +37,7 @@ export class OpenAIModelProvider implements IModelProvider {
 
     for (const model of chatModels) {
       if (model.default) {
-        this.defaultModel = model.model;
+        this.defaultModel = model.alias || model.model;
       }
       if (!model.endpoint || !model.token) continue;
 
@@ -95,7 +95,7 @@ export class OpenAIModelProvider implements IModelProvider {
       const completion = await queue.add(async () => {
         const result = await this.openai.chat.completions.create({
           messages: input.messages,
-          model: input.model,
+          model: input.model || this.baseModel,
           stream: false,
         });
         if (!result) throw new Error('No completion result received');
@@ -255,4 +255,8 @@ export class OpenAIModelProvider implements IModelProvider {
     // OpenAI SDK handles its own request management
     return [];
   }
+
+  get baseModel(): string {
+    return this.defaultModel;
+  }
 }

backend/src/project/build-system-utils.ts

@@ -87,29 +87,37 @@ export function buildProjectSequenceByProject(
  * Generates a project name prompt based on the provided description.
  */
 export function generateProjectNamePrompt(description: string): string {
-  return `You are a project name generator. Based on the following project description, generate a concise, memorable, and meaningful project name.
+  return `You are a project name generator specializing in creating clear, descriptive titles for technical projects. Based on the provided description, generate a concise yet comprehensive project title.
 
 Input Description: ${description}
 
-Requirements for the project name:
-1. Must be 1-3 words maximum
-2. Should be clear and professional
-3. Avoid generic terms like "project" or "system"
-4. Use camelCase or kebab-case format
-5. Should reflect the core functionality or purpose
-6. Must be unique and memorable
-7. Should be easy to pronounce
-8. Avoid acronyms unless they're very intuitive
+Project Title Guidelines:
+1. Create a descriptive title (not exceeding 20 words)
+2. Format as a standard phrase that clearly identifies the project purpose
+3. Include specific details about:
+   - The type of application (e.g., Backend, Frontend, Mobile App)
+   - The industry or organization it serves
+   - Key functionality or purpose
+4. Ensure the title is:
+   - Clear and descriptive
+   - Professional and straightforward
+   - Easy to understand for stakeholders
+   - Specific enough to differentiate from other projects
+5. Acceptable formatting examples:
+   - "Backend System for Financial Reporting"
+   - "Mobile App for Patient Monitoring"
+   - "Data Analytics Platform for Retail Inventory"
+6. Include organization names when relevant (e.g., "Backend App for Chinese Sakura Bank")
 
-Please respond ONLY with the project name, without any explanation or additional text.
+Please respond ONLY with the project title. Do not include explanations or additional text.
 
-Example inputs and outputs:
-Description: "A task management system with real-time collaboration features"
-Output: taskFlow
+Example high-quality outputs:
+Description: "A task management system with real-time collaboration features for marketing teams"
+Output: Collaboration Platform for Marketing Task Management
 
-Description: "An AI-powered document analysis and extraction system"
-Output: docMind
+Description: "An AI-powered document analysis system for legal departments"
+Output: AI Document Analysis Tool for Legal Departments
 
-Description: "A microservice-based e-commerce platform with advanced inventory management"
-Output: tradeCore`;
+Description: "A microservice-based e-commerce platform with advanced inventory management for a furniture retailer"
+Output: E-commerce System for Furniture Inventory Management`;
 }

backend/src/project/dto/project.input.ts

@@ -1,6 +1,7 @@
 // DTOs for Project APIs
-import { InputType, Field, ID } from '@nestjs/graphql';
+import { InputType, Field, ID, ObjectType } from '@nestjs/graphql';
 import { IsNotEmpty, IsString, IsUUID, IsOptional } from 'class-validator';
+import { Project } from '../project.model';
 
 /**
  * @deprecated We don't need project upsert
@@ -41,6 +42,12 @@ export class CreateProjectInput {
 
   @Field(() => String, { nullable: true })
   databaseType?: string;
+
+  @Field(() => Boolean, { nullable: true })
+  public: boolean;
+
+  @Field(() => String, { nullable: true, defaultValue: 'gpt-4o-mini' })
+  model: string;
 }
 
 @InputType()
@@ -60,3 +67,54 @@ export class IsValidProjectInput {
   @Field(() => String, { nullable: true })
   projectPath: string;
 }
+
+@InputType()
+export class UpdateProjectPublicStatusInput {
+  @Field(() => ID)
+  projectId: string;
+
+  @Field()
+  isPublic: boolean;
+}
+
+@InputType()
+export class UpdateProjectPhotoUrlInput {
+  @Field(() => ID)
+  projectId: string;
+
+  @Field()
+  photoUrl: string;
+}
+
+@InputType()
+export class SubscribeToProjectInput {
+  @Field(() => ID)
+  projectId: string;
+}
+
+@InputType()
+export class ForkProjectInput {
+  @Field(() => ID)
+  projectId: string;
+}
+
+@ObjectType()
+export class ProjectSubscriptionResult {
+  @Field()
+  success: boolean;
+
+  @Field({ nullable: true })
+  message?: string;
+
+  @Field(() => Project, { nullable: true })
+  project?: Project;
+}
+
+@InputType()
+export class FetchPublicProjectsInputs {
+  @Field()
+  strategy: 'trending' | 'latest';
+
+  @Field()
+  size: number;
+}

backend/src/project/project.model.ts

@@ -65,7 +65,71 @@ export class Project extends SystemBaseModel {
   @OneToMany(() => Chat, (chat) => chat.project, {
     cascade: true, // Automatically save related chats
     lazy: true, // Load chats only when accessed
-    onDelete: 'CASCADE', // Delete chats when user is deleted
+    onDelete: 'CASCADE', // Delete chats when project is deleted
   })
   chats: Promise<Chat[]>;
+
+  /**
+   * Represents whether the project is public or private
+   */
+  @Field()
+  @Column({ default: false })
+  isPublic: boolean;
+
+  /**
+   * Counts the number of times this project has been subscribed to (copied)
+   */
+  @Field()
+  @Column({ default: 0 })
+  subNumber: number;
+
+  /**
+   * The URL to the project's screenshot or thumbnail
+   */
+  @Field({ nullable: true })
+  @Column({ nullable: true })
+  photoUrl: string;
+
+  /**
+   * Unique identifier for tracking project lineage
+   * Used to track which projects are copies of others
+   */
+  @Field()
+  @Column({ unique: true, default: () => 'uuid_generate_v4()' })
+  uniqueProjectId: string;
+
+  /**
+   * If this project is a copy/fork, stores the uniqueProjectId of the original project.
+   * Projects with forkedFromId are fully editable by their new owner while maintaining
+   * a reference to the original project they were copied from.
+   */
+  @Field({ nullable: true })
+  @Column({ nullable: true })
+  forkedFromId: string;
+
+  /**
+   * Reference to the original project if this is a copy/fork
+   */
+  @Field(() => Project, { nullable: true })
+  @ManyToOne(() => Project, (project) => project.forks, { nullable: true })
+  @JoinColumn({ name: 'forkedFromId', referencedColumnName: 'uniqueProjectId' })
+  forkedFrom: Project;
+
+  /**
+   * Projects that were copied from this project
+   */
+  @Field(() => [Project], { nullable: true })
+  @OneToMany(() => Project, (project) => project.forkedFrom)
+  forks: Project[];
+
+  /**
+   * Projects copied from this one
+   * Maintained for backwards compatibility, same as forks
+   */
+  @Field(() => [Project], {
+    nullable: true,
+    description: 'Projects that are copies of this project',
+  })
+  @OneToMany(() => Project, (project) => project.forkedFrom)
+  subscribers: Project[];
 }