Upload 122 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+OpenAIChatAssistant/generated-icon.png filter=lfs diff=lfs merge=lfs -text

OpenAIChatAssistant/.config/configstore/firebase-tools.json

@@ -0,0 +1,15 @@
+{
+	"motd": {
+		"cloudBuildErrorAfter": 1594252800000,
+		"cloudBuildWarnAfter": 1590019200000,
+		"defaultNode10After": 1594252800000,
+		"minVersion": "3.0.5",
+		"node8DeploysDisabledAfter": 1613390400000,
+		"node8RuntimeDisabledAfter": 1615809600000,
+		"node8WarnAfter": 1600128000000,
+		"fetched": 1746200259916
+	},
+	"usage": true,
+	"analytics-uuid": "39420299-5030-4806-bca2-b74705ec958b",
+	"lastError": 1746202219061
+}

OpenAIChatAssistant/.config/configstore/update-notifier-firebase-tools.json

@@ -0,0 +1,4 @@
+{
+	"optOut": false,
+	"lastUpdateCheck": 1746200259769
+}

OpenAIChatAssistant/.config/gh/config.yml

@@ -0,0 +1,17 @@
+# The current version of the config schema
+version: 1
+# What protocol to use when performing git operations. Supported values: ssh, https
+git_protocol: https
+# What editor gh should run when creating issues, pull requests, etc. If blank, will refer to environment.
+editor:
+# When to interactively prompt. This is a global config that cannot be overridden by hostname. Supported values: enabled, disabled
+prompt: enabled
+# A pager program to send command output to, e.g. "less". If blank, will refer to environment. Set the value to "cat" to disable the pager.
+pager:
+# Aliases allow you to create nicknames for gh commands
+aliases:
+    co: pr checkout
+# The path to a unix socket through which send HTTP connections. If blank, HTTP traffic will be handled by net/http.DefaultTransport.
+http_unix_socket:
+# What web browser gh should use when opening URLs. If blank, will refer to environment.
+browser:

OpenAIChatAssistant/.config/gh/hosts.yml

@@ -0,0 +1,7 @@
+github.com:
+    users:
+        Bella288:
+            oauth_token: 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
+    git_protocol: https
+    oauth_token: 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
+    user: Bella288

OpenAIChatAssistant/.github/workflows/static.yml

@@ -0,0 +1,43 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: '.'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

OpenAIChatAssistant/.gitignore

@@ -0,0 +1,38 @@
+
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Production
+dist
+build
+
+# Testing
+coverage
+
+# Environment
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor/IDE
+.vscode
+.idea
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Replit specific
+.replit
+.config

OpenAIChatAssistant/.replit

@@ -0,0 +1,45 @@
+modules = ["nodejs-20", "web", "postgresql-16", "python-3.11"]
+run = "npm run dev"
+hidden = [".config", ".git", "generated-icon.png", "node_modules", "dist"]
+
+[nix]
+channel = "stable-24_05"
+packages = ["gh"]
+
+[deployment]
+deploymentTarget = "autoscale"
+build = ["sh", "-c", "npm run build"]
+run = ["sh", "-c", "NODE_ENV=production tsx server/index.ts"]
+
+[[ports]]
+localPort = 5000
+externalPort = 80
+
+[[ports]]
+localPort = 9005
+externalPort = 3000
+
+[[ports]]
+localPort = 9006
+externalPort = 3001
+
+[workflows]
+runButton = "Project"
+
+[[workflows.workflow]]
+name = "Project"
+mode = "parallel"
+author = "agent"
+
+[[workflows.workflow.tasks]]
+task = "workflow.run"
+args = "Start application"
+
+[[workflows.workflow]]
+name = "Start application"
+author = "agent"
+
+[[workflows.workflow.tasks]]
+task = "shell.exec"
+args = "npm run dev"
+waitForPort = 5000

OpenAIChatAssistant/OpenChat/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Bella Lawrence
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

OpenAIChatAssistant/OpenChatAI/.gitattributes

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

OpenAIChatAssistant/OpenChatAI/README.md

@@ -0,0 +1,10 @@
+---
+title: OpenChatAI
+emoji: 🦀
+colorFrom: purple
+colorTo: blue
+sdk: static
+pinned: false
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

OpenAIChatAssistant/OpenChatAI/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<title>My static Space</title>
+		<link rel="stylesheet" href="style.css" />
+	</head>
+	<body>
+		<div class="card">
+			<h1>Welcome to your static Space!</h1>
+			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
+			<p>
+				Also don't forget to check the
+				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
+			</p>
+		</div>
+	</body>
+</html>

OpenAIChatAssistant/OpenChatAI/style.css

@@ -0,0 +1,28 @@
+body {
+	padding: 2rem;
+	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+}
+
+h1 {
+	font-size: 16px;
+	margin-top: 0;
+}
+
+p {
+	color: rgb(107, 114, 128);
+	font-size: 15px;
+	margin-bottom: 10px;
+	margin-top: 5px;
+}
+
+.card {
+	max-width: 620px;
+	margin: 0 auto;
+	padding: 16px;
+	border: 1px solid lightgray;
+	border-radius: 16px;
+}
+
+.card p:last-child {
+	margin-bottom: 0;
+}

OpenAIChatAssistant/README.md

@@ -0,0 +1 @@
+# OpenChat

OpenAIChatAssistant/attached_assets/content-1746193714894.md

@@ -0,0 +1,7 @@
+[Skip to content](https://vercel.com/login?next=%2Fbella288s-projects%2Fchatopen%2FE9m12YJ7cJYv5DZawZpXn98haWBJ#geist-skip-nav)
+
+# Log in to Vercel
+
+Continue withGitHubContinue withGitLabContinue withBitbucket
+
+[Don't have an account? Sign Up](https://vercel.com/signup?next=%2Fbella288s-projects%2Fchatopen%2FE9m12YJ7cJYv5DZawZpXn98haWBJ)

OpenAIChatAssistant/attached_assets/content-1746193784985.md

@@ -0,0 +1,1467 @@
+```
+var __defProp = Object.defineProperty;
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// server/index.ts
+import express2 from "express";
+
+// server/routes.ts
+import { createServer } from "http";
+
+// shared/schema.ts
+var schema_exports = {};
+__export(schema_exports, {
+  conversationSchema: () => conversationSchema,
+  conversations: () => conversations,
+  insertConversationSchema: () => insertConversationSchema,
+  insertMessageSchema: () => insertMessageSchema,
+  insertUserSchema: () => insertUserSchema,
+  messageRoleSchema: () => messageRoleSchema,
+  messageSchema: () => messageSchema,
+  messages: () => messages,
+  personalityTypeSchema: () => personalityTypeSchema,
+  updateUserProfileSchema: () => updateUserProfileSchema,
+  users: () => users
+});
+import { pgTable, text, serial, integer, timestamp } from "drizzle-orm/pg-core";
+import { createInsertSchema } from "drizzle-zod";
+import { z } from "zod";
+var users = pgTable("users", {
+  id: serial("id").primaryKey(),
+  username: text("username").notNull().unique(),
+  password: text("password").notNull(),
+  fullName: text("full_name"),
+  location: text("location"),
+  interests: text("interests").array(),
+  profession: text("profession"),
+  pets: text("pets"),
+  additionalInfo: text("additional_info"),
+  systemContext: text("system_context")
+});
+var insertUserSchema = createInsertSchema(users).pick({
+  username: true,
+  password: true
+});
+var updateUserProfileSchema = createInsertSchema(users).pick({
+  fullName: true,
+  location: true,
+  interests: true,
+  profession: true,
+  pets: true,
+  additionalInfo: true,
+  systemContext: true
+}).partial();
+var messages = pgTable("messages", {
+  id: serial("id").primaryKey(),
+  content: text("content").notNull(),
+  role: text("role").notNull(),
+  // 'user' or 'assistant'
+  conversationId: text("conversation_id").notNull(),
+  createdAt: timestamp("created_at").defaultNow().notNull()
+});
+var insertMessageSchema = createInsertSchema(messages).pick({
+  content: true,
+  role: true,
+  conversationId: true
+});
+var personalityTypeSchema = z.enum([\
+  "default",\
+  "professional",\
+  "friendly",\
+  "expert",\
+  "poetic",\
+  "concise"\
+]);
+var conversations = pgTable("conversations", {
+  id: text("id").primaryKey(),
+  title: text("title").notNull(),
+  createdAt: timestamp("created_at").defaultNow().notNull(),
+  personality: text("personality").default("default").notNull(),
+  userId: integer("user_id").references(() => users.id)
+});
+var insertConversationSchema = createInsertSchema(conversations).pick({
+  id: true,
+  title: true,
+  personality: true,
+  userId: true
+});
+var messageRoleSchema = z.enum(["user", "assistant", "system"]);
+var messageSchema = z.object({
+  content: z.string(),
+  role: messageRoleSchema
+});
+var conversationSchema = z.object({
+  messages: z.array(messageSchema),
+  personality: personalityTypeSchema.optional().default("default"),
+  conversationId: z.string().optional(),
+  userId: z.number().optional()
+});
+
+// server/db.ts
+import { Pool, neonConfig } from "@neondatabase/serverless";
+import { drizzle } from "drizzle-orm/neon-serverless";
+import ws from "ws";
+neonConfig.webSocketConstructor = ws;
+if (!process.env.DATABASE_URL) {
+  throw new Error(
+    "DATABASE_URL must be set. Did you forget to provision a database?"
+  );
+}
+var pool = new Pool({ connectionString: process.env.DATABASE_URL });
+var db = drizzle({ client: pool, schema: schema_exports });
+
+// server/storage.ts
+import { eq, desc, asc } from "drizzle-orm";
+import { nanoid } from "nanoid";
+import session from "express-session";
+import connectPgSimple from "connect-pg-simple";
+var DatabaseStorage = class {
+  sessionStore;
+  constructor() {
+    const PgStore = connectPgSimple(session);
+    this.sessionStore = new PgStore({
+      pool,
+      createTableIfMissing: true
+    });
+    this.initializeDefaultConversation();
+  }
+  async initializeDefaultConversation() {
+    try {
+      const defaultConversation = await this.getConversation("default");
+      if (!defaultConversation) {
+        await this.createConversation({
+          id: "default",
+          title: "New Conversation",
+          personality: "general"
+        });
+      }
+    } catch (error) {
+      console.error("Error initializing default conversation:", error);
+    }
+  }
+  // Message operations
+  async getMessages(conversationId) {
+    return db.select().from(messages).where(eq(messages.conversationId, conversationId)).orderBy(asc(messages.createdAt));
+  }
+  async createMessage(insertMessage) {
+    const [newMessage] = await db.insert(messages).values({
+      ...insertMessage,
+      createdAt: /* @__PURE__ */ new Date()
+    }).returning();
+    return newMessage;
+  }
+  async deleteMessages(conversationId) {
+    await db.delete(messages).where(eq(messages.conversationId, conversationId));
+  }
+  // Conversation operations
+  async getConversation(id) {
+    const [conversation] = await db.select().from(conversations).where(eq(conversations.id, id));
+    return conversation;
+  }
+  async getConversations() {
+    return db.select().from(conversations).orderBy(desc(conversations.createdAt));
+  }
+  async createConversation(conversation) {
+    if (conversation.id) {
+      const existingConversation = await this.getConversation(conversation.id);
+      if (existingConversation) {
+        const [updatedConversation] = await db.update(conversations).set({
+          title: conversation.title,
+          personality: conversation.personality || "general",
+          // Only update userId if provided
+          ...conversation.userId && { userId: conversation.userId }
+        }).where(eq(conversations.id, conversation.id)).returning();
+        return updatedConversation;
+      }
+    }
+    const [newConversation] = await db.insert(conversations).values({
+      id: conversation.id || nanoid(),
+      title: conversation.title,
+      personality: conversation.personality || "general",
+      userId: conversation.userId,
+      // Include the user ID (can be null for unassociated conversations)
+      createdAt: /* @__PURE__ */ new Date()
+    }).returning();
+    return newConversation;
+  }
+  async deleteConversation(id) {
+    if (id === "default") {
+      return false;
+    }
+    try {
+      await this.deleteMessages(id);
+      const [deletedConversation] = await db.delete(conversations).where(eq(conversations.id, id)).returning();
+      return !!deletedConversation;
+    } catch (error) {
+      console.error("Error deleting conversation:", error);
+      return false;
+    }
+  }
+  async updateConversationPersonality(id, personality) {
+    const [updatedConversation] = await db.update(conversations).set({ personality }).where(eq(conversations.id, id)).returning();
+    return updatedConversation;
+  }
+  async updateConversationTitle(id, title) {
+    const [updatedConversation] = await db.update(conversations).set({ title }).where(eq(conversations.id, id)).returning();
+    return updatedConversation;
+  }
+  // User operations
+  async getUserProfile(id) {
+    const [user] = await db.select().from(users).where(eq(users.id, id));
+    return user;
+  }
+  async getUserByUsername(username) {
+    const [user] = await db.select().from(users).where(eq(users.username, username));
+    return user;
+  }
+  async createUser(userData) {
+    const [user] = await db.insert(users).values(userData).returning();
+    return user;
+  }
+  async updateUserProfile(id, profile) {
+    const { password, ...updateData } = profile;
+    const [updatedUser] = await db.update(users).set(updateData).where(eq(users.id, id)).returning();
+    return updatedUser;
+  }
+  // Filter conversations by user ID
+  async getUserConversations(userId) {
+    return db.select().from(conversations).where(eq(conversations.userId, userId)).orderBy(desc(conversations.createdAt));
+  }
+};
+var storage = new DatabaseStorage();
+
+// server/auth.ts
+import passport from "passport";
+
+// server/session.ts
+import session2 from "express-session";
+import connectPg from "connect-pg-simple";
+var PostgresSessionStore = connectPg(session2);
+var sessionStore = new PostgresSessionStore({
+  pool,
+  createTableIfMissing: true,
+  tableName: "session"
+  // Default table name
+});
+function setupSession(app2) {
+  const sessionSecret = process.env.SESSION_SECRET || __require("crypto").randomBytes(32).toString("hex");
+  if (!process.env.SESSION_SECRET) {
+    console.warn("SESSION_SECRET not set in environment, using a random value");
+    process.env.SESSION_SECRET = sessionSecret;
+  }
+  const sessionConfig = {
+    store: sessionStore,
+    secret: sessionSecret,
+    resave: false,
+    saveUninitialized: false,
+    cookie: {
+      secure: process.env.NODE_ENV === "production",
+      // Use secure cookies in production
+      httpOnly: true,
+      maxAge: 1e3 * 60 * 60 * 24 * 7
+      // 1 week
+    }
+  };
+  if (process.env.NODE_ENV === "production") {
+    app2.set("trust proxy", 1);
+    if (sessionConfig.cookie) {
+      sessionConfig.cookie.secure = true;
+      sessionConfig.cookie.sameSite = "none";
+    }
+  }
+  app2.use(session2(sessionConfig));
+}
+
+// server/auth.ts
+function setupAuth(app2) {
+  setupSession(app2);
+  app2.use(passport.initialize());
+  app2.use(passport.session());
+  passport.serializeUser((user, done) => {
+    done(null, user.id);
+  });
+  passport.deserializeUser(async (id, done) => {
+    try {
+      const user = await storage.getUserProfile(id);
+      done(null, user);
+    } catch (error) {
+      done(error);
+    }
+  });
+  app2.get("/api/auth/replit", async (req, res) => {
+    try {
+      const userId = req.headers["x-replit-user-id"];
+      const username = req.headers["x-replit-user-name"];
+      const profileImage = req.headers["x-replit-user-profile-image"];
+      const roles = req.headers["x-replit-user-roles"];
+      const teams = req.headers["x-replit-user-teams"];
+      if (!userId || !username) {
+        return res.status(401).json({ message: "Not authenticated with Replit" });
+      }
+      let user = await storage.getUserByUsername(username);
+      if (!user) {
+        user = await storage.createUser({
+          username,
+          password: userId,
+          system_context: `A chat with ${username}. User roles: ${roles || "none"}. Teams: ${teams || "none"}.`,
+          full_name: username,
+          interests: roles ? roles.split(",") : [],
+          location: "",
+          // Add default empty values for profile fields
+          profession: "",
+          pets: ""
+        });
+      } else {
+        user = await storage.updateUserProfile(user.id, {
+          full_name: username,
+          interests: roles ? roles.split(",") : [],
+          system_context: `A chat with ${username}. User roles: ${roles || "none"}. Teams: ${teams || "none"}.`
+        });
+      }
+      req.login(user, (err) => {
+        if (err) {
+          return res.status(500).json({ message: "Failed to login" });
+        }
+        const { password, ...userWithoutPassword } = user;
+        res.json(userWithoutPassword);
+      });
+    } catch (error) {
+      console.error("Replit auth error:", error);
+      res.status(500).json({ message: "Authentication failed" });
+    }
+  });
+  app2.get("/api/user", (req, res) => {
+    if (!req.isAuthenticated()) {
+      return res.status(401).json({ message: "Not authenticated" });
+    }
+    const { password, ...userWithoutPassword } = req.user;
+    res.json(userWithoutPassword);
+  });
+  app2.post("/api/logout", (req, res) => {
+    if (req.session) {
+      req.session.destroy((err) => {
+        if (err) {
+          console.error("Session destruction error:", err);
+        }
+        res.clearCookie("connect.sid");
+        res.status(200).json({ success: true });
+      });
+    } else {
+      res.status(200).json({ success: true });
+    }
+  });
+  app2.patch("/api/user/profile", async (req, res, next) => {
+    if (!req.isAuthenticated()) {
+      return res.status(401).json({ message: "Not authenticated" });
+    }
+    try {
+      const userId = req.user.id;
+      const updatedUser = await storage.updateUserProfile(userId, req.body);
+      if (!updatedUser) {
+        return res.status(404).json({ message: "User not found" });
+      }
+      const { password, ...userWithoutPassword } = updatedUser;
+      res.json(userWithoutPassword);
+    } catch (error) {
+      next(error);
+    }
+  });
+}
+
+// server/openai.ts
+import OpenAI from "openai";
+
+// server/fallbackChat.ts
+import { InferenceClient } from "@huggingface/inference";
+var novitaApiKey = process.env.NOVITA_API_KEY || "";
+var huggingFaceClient = new InferenceClient(novitaApiKey);
+var QWEN_MODEL = "Qwen/Qwen3-235B-A22B";
+var MAX_TOKENS = 512;
+var QWEN_SYSTEM_MESSAGE = `You are a helpful AI assistant. Provide clear, concise responses without showing your thinking process.
+Do not use XML tags like <think> or </think> in your responses.
+Keep your responses informative, friendly, and to the point.`;
+function convertMessages(messages2, userSystemContext) {
+  let systemContent = QWEN_SYSTEM_MESSAGE;
+  if (userSystemContext) {
+    const getMatchValue = (match) => {
+      if (match && match[1]) {
+        return match[1].trim();
+      }
+      return null;
+    };
+    const nameMatches = [\
+      getMatchValue(userSystemContext.match(/name(?:\s+is)?(?:\s*:\s*|\s+)([\w\s.']+)/i)),\
+      getMatchValue(userSystemContext.match(/My name is ([\w\s.']+)/i)),\
+      getMatchValue(userSystemContext.match(/I am ([\w\s.']+)/i)),\
+      getMatchValue(userSystemContext.match(/I'm ([\w\s.']+)/i))\
+    ].filter(Boolean);
+    const locationMatches = [\
+      getMatchValue(userSystemContext.match(/location(?:\s+is)?(?:\s*:\s*|\s+)([\w\s.,]+)/i)),\
+      getMatchValue(userSystemContext.match(/(?:I live|I'm from|I reside) in ([\w\s.,]+)/i)),\
+      getMatchValue(userSystemContext.match(/from ([\w\s.,]+)/i))\
+    ].filter(Boolean);
+    const interestsMatches = [\
+      getMatchValue(userSystemContext.match(/interests(?:\s+are)?(?:\s*:\s*|\s+)([\w\s,.;{}]+)/i)),\
+      getMatchValue(userSystemContext.match(/(?:I like|I enjoy|I love) ([\w\s,.;]+)/i))\
+    ].filter(Boolean);
+    const professionMatches = [\
+      getMatchValue(userSystemContext.match(/profession(?:\s+is)?(?:\s*:\s*|\s+)([\w\s&,.-]+)/i)),\
+      getMatchValue(userSystemContext.match(/(?:I work as|I am a|I'm a) ([\w\s&,.-]+)/i)),\
+      getMatchValue(userSystemContext.match(/(?:I'm|I am) (?:a|an) ([\w\s&,.-]+)/i))\
+    ].filter(Boolean);
+    const petsMatches = [\
+      getMatchValue(userSystemContext.match(/pets?(?:\s+are)?(?:\s*:\s*|\s+)([\w\s,.()]+)/i)),\
+      getMatchValue(userSystemContext.match(/(?:I have|I own) (?:a pet|pets|a) ([\w\s,.()]+)/i))\
+    ].filter(Boolean);
+    const userName = nameMatches.length > 0 ? nameMatches[0] : null;
+    const userLocation = locationMatches.length > 0 ? locationMatches[0] : null;
+    const userInterests = interestsMatches.length > 0 ? interestsMatches[0] : null;
+    const userProfession = professionMatches.length > 0 ? professionMatches[0] : null;
+    const userPets = petsMatches.length > 0 ? petsMatches[0] : null;
+    let bellaInfo = "";
+    if (userSystemContext.includes("Bella Lawrence") || userName && userName.includes("Bella")) {
+      bellaInfo = `
+- Your name is Bella Lawrence
+- You live in Fort Wayne, Indiana
+- Your interests include Python
+- Your profession is Student
+- You have pets named Barley (cat), Pebbles (dog), and Buttercup (rabbit)
+`;
+      console.log("Using Bella's profile information directly");
+    }
+    let userInfo = "";
+    if (userName) userInfo += `- Your name is ${userName}
+`;
+    if (userLocation) userInfo += `- You live in ${userLocation}
+`;
+    if (userInterests) userInfo += `- Your interests include ${userInterests}
+`;
+    if (userProfession) userInfo += `- Your profession is ${userProfession}
+`;
+    if (userPets) userInfo += `- You have pets: ${userPets}
+`;
+    const profileInfo = bellaInfo || userInfo || userSystemContext;
+    systemContent = `${QWEN_SYSTEM_MESSAGE}
+
+IMPORTANT: The following is personal information about the user you are talking with.
+You MUST remember these details and use them in your responses:
+
+${profileInfo}
+
+INSTRUCTIONS:
+1. When asked "What's my name?" respond with the name listed above.
+2. When asked about name, location, interests, profession, or pets, use EXACTLY the information above.
+3. NEVER say you don't know or can't access this information - it's right above!
+4. Answer as if you've always known this information - don't say "according to your profile" or similar phrases.
+
+REMEMBER: You already know the user's name and details. ALWAYS use this information when asked.`;
+    const hasNameQuestion = messages2.some((msg) => {
+      const content = msg.content.toLowerCase();
+      return content.includes("what's my name") || content.includes("what is my name") || content.includes("do you know my name") || content.includes("who am i");
+    });
+    if (hasNameQuestion) {
+      console.log("Detected name question - ensuring proper response");
+      systemContent += `
+
+IMPORTANT REMINDER: The user has asked about their name. Their name is ${userName || "Bella Lawrence"}. DO NOT say you don't know their name.`;
+    }
+    console.log("Including enhanced user system context in fallback chat");
+    if (userName) console.log(`Extracted user name: ${userName}`);
+    if (userLocation) console.log(`Extracted user location: ${userLocation}`);
+  }
+  const formattedMessages = [{\
+    role: "system",\
+    content: systemContent\
+  }];
+  const compatibleMessages = messages2.filter((msg) => msg.role !== "system");
+  if (compatibleMessages.length === 0) {
+    formattedMessages.push({
+      role: "user",
+      content: "Hello, can you introduce yourself?"
+    });
+    return formattedMessages;
+  }
+  const lastMessage = compatibleMessages[compatibleMessages.length - 1];
+  if (lastMessage.role !== "user") {
+    compatibleMessages.push({
+      role: "user",
+      content: "Can you help me with this?"
+    });
+  }
+  formattedMessages.push(...compatibleMessages.map((msg) => ({
+    role: msg.role,
+    content: msg.content
+  })));
+  return formattedMessages;
+}
+async function generateFallbackResponse(messages2, userSystemContext) {
+  try {
+    console.log("Generating fallback response using Qwen model");
+    const formattedMessages = convertMessages(messages2, userSystemContext);
+    const response = await huggingFaceClient.chatCompletion({
+      provider: "novita",
+      model: QWEN_MODEL,
+      messages: formattedMessages,
+      max_tokens: MAX_TOKENS
+    });
+    if (response.choices && response.choices.length > 0 && response.choices[0].message) {
+      let content = response.choices[0].message.content || "";
+      content = content.replace(/<think>[\s\S]*?<\/think>/g, "");
+      content = content.replace(/<[^>]*>/g, "");
+      content = content.replace(/^\s+|\s+$/g, "");
+      content = content.replace(/\n{3,}/g, "\n\n");
+      if (!content.trim()) {
+        content = "I'm sorry, I couldn't generate a proper response.";
+      }
+      return `${content}
+
+(Note: I'm currently operating in fallback mode using the Qwen model because the OpenAI API is unavailable)`;
+    } else {
+      throw new Error("No valid response from Qwen model");
+    }
+  } catch (error) {
+    console.error("Error generating response with Qwen model:", error);
+    return "I apologize, but I'm currently experiencing technical difficulties with both primary and fallback AI services. Please try again later.";
+  }
+}
+async function canUseOpenAI() {
+  try {
+    const apiKey = process.env.OPENAI_API_KEY;
+    return Boolean(apiKey && apiKey.startsWith("sk-") && apiKey.length > 20);
+  } catch (error) {
+    console.error("Error checking OpenAI API availability:", error);
+    return false;
+  }
+}
+async function canUseQwen() {
+  try {
+    return Boolean(novitaApiKey && novitaApiKey.length > 0);
+  } catch (error) {
+    console.error("Error checking Qwen availability:", error);
+    return false;
+  }
+}
+
+// server/openai.ts
+var OPENAI_MODEL = "gpt-4o";
+var openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY
+});
+var systemMessage = {
+  role: "system",
+  content: `You are a helpful AI assistant. Provide concise and accurate responses to user queries.
+  Your goal is to be informative and educational. Use clear language and provide examples where appropriate.
+  Always be respectful and considerate in your responses.`
+};
+var currentModel = "openai";
+async function generateChatResponse(messages2, userSystemContext) {
+  try {
+    const openAIAvailable = await canUseOpenAI();
+    if (!openAIAvailable) {
+      const qwenAvailable = await canUseQwen();
+      if (qwenAvailable) {
+        if (currentModel !== "qwen") {
+          console.log("Switching to Qwen model as fallback");
+          currentModel = "qwen";
+        }
+        return await generateFallbackResponse(messages2, userSystemContext);
+      } else {
+        currentModel = "unavailable";
+        throw new Error("Both OpenAI and Qwen models are unavailable. Please check your API keys.");
+      }
+    }
+    if (currentModel !== "openai") {
+      console.log("Using OpenAI model");
+      currentModel = "openai";
+    }
+    let enhancedSystemMessage = { ...systemMessage };
+    if (userSystemContext) {
+      const nameMatch = userSystemContext.match(/name(?:\s+is)?(?:\s*:\s*|\s+)([\w\s.']+)/i);
+      const locationMatch = userSystemContext.match(/location(?:\s+is)?(?:\s*:\s*|\s+)([\w\s.,]+)/i);
+      const interestsMatch = userSystemContext.match(/interests(?:\s+are)?(?:\s*:\s*|\s+)([\w\s,.;]+)/i);
+      const professionMatch = userSystemContext.match(/profession(?:\s+is)?(?:\s*:\s*|\s+)([\w\s&,.-]+)/i);
+      const petsMatch = userSystemContext.match(/pets?(?:\s+are)?(?:\s*:\s*|\s+)([\w\s,.]+)/i);
+      let userInfo = "";
+      if (nameMatch) userInfo += `- Name: ${nameMatch[1].trim()}
+`;
+      if (locationMatch) userInfo += `- Location: ${locationMatch[1].trim()}
+`;
+      if (interestsMatch) userInfo += `- Interests: ${interestsMatch[1].trim()}
+`;
+      if (professionMatch) userInfo += `- Profession: ${professionMatch[1].trim()}
+`;
+      if (petsMatch) userInfo += `- Pets: ${petsMatch[1].trim()}
+`;
+      enhancedSystemMessage.content = `${systemMessage.content}
+
+USER PROFILE INFORMATION:
+${userInfo || userSystemContext}
+
+IMPORTANT: You must remember these user details and incorporate them naturally in your responses when relevant.
+When the user asks about their name, location, interests, profession, or pets, always answer using the information above.
+Never say you don't know their personal details if they're listed above. Answer as if you already know this information.
+
+Original system context provided by user:
+${userSystemContext}`;
+      console.log("Including enhanced user system context in OpenAI chat");
+    }
+    const conversationWithSystem = [enhancedSystemMessage, ...messages2];
+    const response = await openai.chat.completions.create({
+      model: OPENAI_MODEL,
+      messages: conversationWithSystem,
+      temperature: 0.7,
+      max_tokens: 1e3
+    });
+    return response.choices[0].message.content || "I'm sorry, I couldn't generate a response.";
+  } catch (error) {
+    console.error("AI Model error:", error);
+    if (currentModel === "openai") {
+      console.log("OpenAI API error, attempting to use Qwen fallback");
+      try {
+        const qwenAvailable = await canUseQwen();
+        if (qwenAvailable) {
+          currentModel = "qwen";
+          return await generateFallbackResponse(messages2, userSystemContext);
+        } else {
+          currentModel = "unavailable";
+        }
+      } catch (fallbackError) {
+        console.error("Qwen fallback also failed:", fallbackError);
+        currentModel = "unavailable";
+      }
+    }
+    if (error.response) {
+      const status = error.response.status;
+      if (status === 429) {
+        if (error.code === "insufficient_quota") {
+          throw new Error("OpenAI API quota exceeded. Your account may need a valid payment method or has reached its limit.");
+        } else {
+          throw new Error("Rate limit exceeded. Please try again later.");
+        }
+      } else if (status === 401) {
+        throw new Error("API key is invalid or expired.");
+      } else {
+        throw new Error(`OpenAI API error: ${error.response?.data?.error?.message || "Unknown error"}`);
+      }
+    } else if (error.request) {
+      throw new Error("No response received from AI service. Please check your internet connection.");
+    } else {
+      throw new Error(`Error: ${error.message}`);
+    }
+  }
+}
+
+// server/personalities.ts
+var personalityConfigs = {
+  default: {
+    name: "Balanced",
+    description: "A helpful, balanced AI assistant that provides informative responses.",
+    systemPrompt: `You are a helpful AI assistant. Provide concise and accurate responses to user queries.
+    Your goal is to be informative and educational. Use clear language and provide examples where appropriate.
+    Always be respectful and considerate in your responses.`,
+    temperature: 0.7,
+    emoji: "\u{1F916}"
+  },
+  professional: {
+    name: "Professional",
+    description: "Formal and business-oriented with precise, structured responses.",
+    systemPrompt: `You are a professional AI assistant with expertise in business communication.
+    Provide well-structured, formal responses that are precise and to the point.
+    Use professional terminology where appropriate, but remain accessible.
+    Organize complex information in a clear, logical manner.
+    Maintain a courteous and professional tone at all times.`,
+    temperature: 0.5,
+    emoji: "\u{1F454}"
+  },
+  friendly: {
+    name: "Friendly",
+    description: "Casual, warm and conversational with a touch of humor.",
+    systemPrompt: `You are a friendly and approachable AI assistant.
+    Communicate in a warm, conversational tone as if chatting with a friend.
+    Feel free to use casual language, contractions, and the occasional appropriate humor.
+    Be encouraging and positive in your responses.
+    Make complex topics feel accessible and less intimidating.`,
+    temperature: 0.8,
+    emoji: "\u{1F60A}"
+  },
+  expert: {
+    name: "Expert",
+    description: "Technical and detailed with in-depth knowledge and explanations.",
+    systemPrompt: `You are an expert-level AI assistant with comprehensive technical knowledge.
+    Provide detailed, nuanced responses that demonstrate expert-level understanding.
+    Don't hesitate to use technical terminology and include background context where helpful.
+    When appropriate, explain underlying principles and concepts.
+    Present multiple perspectives or approaches when relevant.`,
+    temperature: 0.4,
+    emoji: "\u{1F468}\u200D\u{1F52C}"
+  },
+  poetic: {
+    name: "Poetic",
+    description: "Creative and eloquent with a focus on beautiful language.",
+    systemPrompt: `You are a poetic and creative AI assistant with a love for beautiful language.
+    Express ideas with eloquence, metaphor, and creative flair.
+    Draw connections to literature, art, and the human experience.
+    Use rich imagery and evocative language in your responses.
+    Even when explaining factual information, find ways to make your language sing.`,
+    temperature: 0.9,
+    emoji: "\u{1F3AD}"
+  },
+  concise: {
+    name: "Concise",
+    description: "Brief and to-the-point with no unnecessary words.",
+    systemPrompt: `You are a concise AI assistant that values brevity and clarity.
+    Provide the shortest possible response that fully answers the query.
+    Use bullet points where appropriate.
+    Eliminate unnecessary words, phrases, and preambles.
+    Focus only on the most essential information.`,
+    temperature: 0.5,
+    emoji: "\u{1F4CB}"
+  }
+};
+function getPersonalityConfig(personality) {
+  return personalityConfigs[personality] || personalityConfigs.default;
+}
+
+// server/flux.ts
+import { z as z2 } from "zod";
+var imageGenerationSchema = z2.object({
+  prompt: z2.string().min(1).max(1e3),
+  seed: z2.number().optional().default(0),
+  randomize_seed: z2.boolean().optional().default(true),
+  width: z2.number().min(256).max(1024).optional().default(512),
+  height: z2.number().min(256).max(1024).optional().default(512),
+  guidance_scale: z2.number().min(0).max(20).optional().default(7.5),
+  num_inference_steps: z2.number().min(1).max(50).optional().default(20)
+});
+async function generateImage(params) {
+  try {
+    const apiKey = process.env.REPLICATE_API_KEY;
+    if (!apiKey) {
+      throw new Error("REPLICATE_API_KEY is not set in environment variables");
+    }
+    const inputData = {
+      input: {
+        prompt: params.prompt,
+        width: params.width,
+        height: params.height,
+        seed: params.randomize_seed ? Math.floor(Math.random() * 1e6) : params.seed,
+        guidance_scale: params.guidance_scale,
+        num_inference_steps: params.num_inference_steps
+      }
+    };
+    const startResponse = await fetch(
+      "https://api.replicate.com/v1/models/black-forest-labs/flux-dev/predictions",
+      {
+        method: "POST",
+        headers: {
+          "Authorization": `Bearer ${apiKey}`,
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(inputData)
+      }
+    );
+    if (!startResponse.ok) {
+      const errorData = await startResponse.json();
+      throw new Error(`Replicate API error: ${JSON.stringify(errorData)}`);
+    }
+    const prediction = await startResponse.json();
+    const predictionId = prediction.id;
+    let imageUrl = null;
+    let attempts = 0;
+    const maxAttempts = 30;
+    while (!imageUrl && attempts < maxAttempts) {
+      await new Promise((resolve) => setTimeout(resolve, 1e3));
+      const statusResponse = await fetch(
+        `https://api.replicate.com/v1/predictions/${predictionId}`,
+        {
+          headers: {
+            "Authorization": `Bearer ${apiKey}`
+          }
+        }
+      );
+      if (!statusResponse.ok) {
+        const errorData = await statusResponse.json();
+        throw new Error(`Replicate API status error: ${JSON.stringify(errorData)}`);
+      }
+      const status = await statusResponse.json();
+      if (status.status === "succeeded") {
+        if (status.output && typeof status.output === "string") {
+          imageUrl = status.output;
+        } else if (Array.isArray(status.output) && status.output.length > 0) {
+          imageUrl = status.output[0];
+        }
+      } else if (status.status === "failed") {
+        throw new Error(`Image generation failed: ${status.error || "Unknown error"}`);
+      }
+      attempts++;
+    }
+    if (!imageUrl) {
+      throw new Error("Timed out waiting for image generation");
+    }
+    return imageUrl;
+  } catch (error) {
+    console.error("Error generating image:", error);
+    throw new Error(`Failed to generate image: ${error instanceof Error ? error.message : String(error)}`);
+  }
+}
+async function isFluxAvailable() {
+  try {
+    const apiKey = process.env.REPLICATE_API_KEY;
+    if (!apiKey) {
+      return false;
+    }
+    const response = await fetch(
+      "https://api.replicate.com/v1/models/black-forest-labs/flux-dev",
+      {
+        headers: {
+          "Authorization": `Bearer ${apiKey}`
+        }
+      }
+    );
+    return response.ok;
+  } catch (error) {
+    console.error("Error checking FLUX availability:", error);
+    return false;
+  }
+}
+
+// server/video.ts
+import { InferenceClient as InferenceClient2 } from "@huggingface/inference";
+import { z as z3 } from "zod";
+var videoGenerationSchema = z3.object({
+  prompt: z3.string().min(1).max(1e3),
+  model: z3.enum(["Wan-AI/Wan2.1-T2V-14B"]).default("Wan-AI/Wan2.1-T2V-14B")
+});
+async function generateVideo(params) {
+  try {
+    const replicateApiKey = process.env.REPLICATE_API_KEY;
+    if (!replicateApiKey) {
+      throw new Error("REPLICATE_API_KEY is not set in environment variables");
+    }
+    const client = new InferenceClient2(replicateApiKey);
+    const result = await client.textToVideo({
+      provider: "replicate",
+      model: params.model,
+      inputs: params.prompt
+    });
+    if (!result) {
+      throw new Error("Failed to generate video: No result returned");
+    }
+    const videoBuffer = await result.arrayBuffer();
+    const videoBase64 = Buffer.from(videoBuffer).toString("base64");
+    const videoUrl = `data:video/mp4;base64,${videoBase64}`;
+    return videoUrl;
+  } catch (error) {
+    console.error("Error generating video:", error);
+    throw new Error(`Failed to generate video: ${error instanceof Error ? error.message : String(error)}`);
+  }
+}
+async function isVideoGenerationAvailable() {
+  try {
+    const replicateApiKey = process.env.REPLICATE_API_KEY;
+    if (!replicateApiKey) {
+      return false;
+    }
+    const client = new InferenceClient2(replicateApiKey);
+    return !!client;
+  } catch (error) {
+    console.error("Error checking video generation availability:", error);
+    return false;
+  }
+}
+
+// server/routes.ts
+import OpenAI2 from "openai";
+import { nanoid as nanoid2 } from "nanoid";
+var currentModelStatus = {
+  model: "openai",
+  isOpenAIAvailable: true,
+  isQwenAvailable: true,
+  lastChecked: /* @__PURE__ */ new Date()
+};
+async function updateModelStatus() {
+  try {
+    const isOpenAIAvailable = await canUseOpenAI();
+    const isQwenAvailable = await canUseQwen();
+    let model = "unavailable";
+    if (isOpenAIAvailable) {
+      model = "openai";
+    } else if (isQwenAvailable) {
+      model = "qwen";
+    }
+    currentModelStatus = {
+      model,
+      isOpenAIAvailable,
+      isQwenAvailable,
+      lastChecked: /* @__PURE__ */ new Date()
+    };
+    console.log(`Updated model status: ${model} (OpenAI: ${isOpenAIAvailable}, Qwen: ${isQwenAvailable})`);
+    return currentModelStatus;
+  } catch (error) {
+    console.error("Error updating model status:", error);
+    return currentModelStatus;
+  }
+}
+updateModelStatus();
+async function registerRoutes(app2) {
+  setupAuth(app2);
+  app2.get("/api/conversations", async (req, res) => {
+    try {
+      let conversations2;
+      if (req.isAuthenticated() && req.user) {
+        const userId = req.user.id;
+        conversations2 = await storage.getUserConversations(userId);
+      } else {
+        conversations2 = await storage.getConversations();
+        conversations2 = conversations2.filter((conv) => !conv.userId);
+      }
+      res.json(conversations2);
+    } catch (error) {
+      console.error("Error fetching conversations:", error);
+      res.status(500).json({ message: "Failed to fetch conversations." });
+    }
+  });
+  app2.post("/api/conversations", async (req, res) => {
+    try {
+      const conversationId = nanoid2();
+      let title = req.body.title;
+      if ((!title || title === "New Conversation") && req.body.firstMessage) {
+        try {
+          const openaiClient = new OpenAI2();
+          const response = await openaiClient.chat.completions.create({
+            model: "gpt-3.5-turbo",
+            messages: [\
+              {\
+                role: "system",\
+                content: "Generate a brief, descriptive title (3-5 words) for a conversation that starts with this message. Respond with just the title."\
+              },\
+              {\
+                role: "user",\
+                content: req.body.firstMessage\
+              }\
+            ],
+            max_tokens: 20,
+            temperature: 0.7
+          });
+          title = response.choices[0].message.content?.trim() || "New Conversation";
+        } catch (err) {
+          console.error("Error generating AI title:", err);
+          title = "New Conversation";
+        }
+      }
+      const conversationData = {
+        id: conversationId,
+        title,
+        personality: req.body.personality || "general"
+      };
+      if (req.isAuthenticated() && req.user) {
+        conversationData.userId = req.user.id;
+      }
+      const result = insertConversationSchema.safeParse(conversationData);
+      if (!result.success) {
+        return res.status(400).json({ message: "Invalid conversation data." });
+      }
+      const conversation = await storage.createConversation(result.data);
+      res.status(201).json(conversation);
+    } catch (error) {
+      console.error("Error creating conversation:", error);
+      res.status(500).json({ message: "Failed to create conversation." });
+    }
+  });
+  app2.post("/api/conversations/:id/generate-title", async (req, res) => {
+    try {
+      const { id } = req.params;
+      const messages2 = await storage.getMessages(id);
+      if (messages2.length < 2) {
+        return res.status(400).json({ message: "Need at least one exchange to generate a title" });
+      }
+      const contextMessages = messages2.slice(0, Math.min(4, messages2.length)).map((msg) => `${msg.role}: ${msg.content}`).join("\n");
+      let title;
+      try {
+        const openaiClient = new OpenAI2();
+        const response = await openaiClient.chat.completions.create({
+          model: "gpt-3.5-turbo",
+          messages: [\
+            {\
+              role: "system",\
+              content: "You are a helpful assistant that generates short, descriptive titles (max 6 words) for conversations based on their content. Respond with just the title."\
+            },\
+            {\
+              role: "user",\
+              content: `Generate a short, descriptive title (maximum 6 words) for this conversation:\
+${contextMessages}`\
+            }\
+          ],
+          max_tokens: 20,
+          temperature: 0.7
+        });
+        title = response.choices[0].message.content?.trim();
+        if (!title) {
+          title = `Chat ${(/* @__PURE__ */ new Date()).toLocaleDateString()}`;
+        }
+      } catch (err) {
+        console.error("Error generating AI title:", err);
+        title = `Chat ${(/* @__PURE__ */ new Date()).toLocaleDateString()}`;
+      }
+      const updatedConversation = await storage.updateConversationTitle(id, title);
+      if (!updatedConversation) {
+        return res.status(404).json({ message: "Conversation not found" });
+      }
+      res.json(updatedConversation);
+    } catch (error) {
+      console.error("Error generating title:", error);
+      res.status(500).json({ message: "Failed to generate title." });
+    }
+  });
+  app2.get("/api/conversations/:id/messages", async (req, res) => {
+    try {
+      const { id } = req.params;
+      const conversation = await storage.getConversation(id);
+      if (!conversation) {
+        return res.status(404).json({ message: "Conversation not found." });
+      }
+      if (conversation.userId && req.isAuthenticated() && req.user) {
+        if (conversation.userId !== req.user.id) {
+          return res.status(403).json({ message: "You don't have permission to access this conversation." });
+        }
+      }
+      const messages2 = await storage.getMessages(id);
+      if (req.isAuthenticated() && req.user) {
+        const userContext = {
+          role: "system",
+          content: req.user.systemContext || `Chat with ${req.user.username}`,
+          conversationId: id,
+          createdAt: /* @__PURE__ */ new Date()
+        };
+        messages2.unshift(userContext);
+      }
+      res.json(messages2);
+    } catch (error) {
+      console.error("Error fetching messages:", error);
+      res.status(500).json({ message: "Failed to fetch messages." });
+    }
+  });
+  app2.post("/api/chat", async (req, res) => {
+    try {
+      await updateModelStatus();
+      if (currentModelStatus.model === "unavailable") {
+        return res.status(503).json({
+          message: "All AI models are currently unavailable. Please check your API keys."
+        });
+      }
+      const result = conversationSchema.safeParse(req.body);
+      if (!result.success) {
+        return res.status(400).json({ message: "Invalid chat data format." });
+      }
+      const { messages: messages2 } = result.data;
+      const conversationId = req.body.conversationId || "default";
+      const conversation = await storage.getConversation(conversationId);
+      if (!conversation && conversationId !== "default") {
+        return res.status(404).json({ message: "Conversation not found." });
+      }
+      if (conversation && conversation.userId) {
+        if (!req.isAuthenticated() || !req.user || conversation.userId !== req.user.id) {
+          return res.status(403).json({ message: "You don't have permission to access this conversation." });
+        }
+      }
+      const userMessage = messages2[messages2.length - 1];
+      if (userMessage.role !== "user") {
+        return res.status(400).json({ message: "Last message must be from the user." });
+      }
+      await storage.createMessage({
+        content: userMessage.content,
+        role: userMessage.role,
+        conversationId
+      });
+      let userSystemContext = void 0;
+      if (req.isAuthenticated() && req.user && req.user.systemContext) {
+        userSystemContext = req.user.systemContext;
+        console.log(
+          "Including user system context in conversation:",
+          userSystemContext ? "Yes" : "None available"
+        );
+      }
+      const aiResponse = await generateChatResponse(messages2, userSystemContext);
+      const savedMessage = await storage.createMessage({
+        content: aiResponse,
+        role: "assistant",
+        conversationId
+      });
+      res.json({
+        message: savedMessage,
+        conversationId,
+        modelInfo: {
+          model: currentModelStatus.model,
+          isFallback: currentModelStatus.model !== "openai"
+        }
+      });
+    } catch (error) {
+      console.error("Chat API error:", error);
+      res.status(500).json({
+        message: error.message || "Failed to process chat message."
+      });
+    }
+  });
+  app2.get("/api/model-status", async (_req, res) => {
+    try {
+      const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1e3);
+      if (currentModelStatus.lastChecked < fiveMinutesAgo) {
+        await updateModelStatus();
+      }
+      return res.json(currentModelStatus);
+    } catch (error) {
+      console.error("Error getting model status:", error);
+      return res.status(500).json({ message: "Failed to get model status" });
+    }
+  });
+  app2.delete("/api/conversations/:id", async (req, res) => {
+    try {
+      const { id } = req.params;
+      if (id === "default") {
+        return res.status(400).json({ message: "Cannot delete the default conversation" });
+      }
+      const conversation = await storage.getConversation(id);
+      if (!conversation) {
+        return res.status(404).json({ message: "Conversation not found" });
+      }
+      if (conversation.userId && req.isAuthenticated() && req.user) {
+        if (conversation.userId !== req.user.id) {
+          return res.status(403).json({ message: "You don't have permission to delete this conversation." });
+        }
+      }
+      const success = await storage.deleteConversation(id);
+      if (success) {
+        res.status(200).json({ message: "Conversation deleted successfully" });
+      } else {
+        res.status(500).json({ message: "Failed to delete conversation" });
+      }
+    } catch (error) {
+      console.error("Error deleting conversation:", error);
+      res.status(500).json({ message: "Server error deleting conversation" });
+    }
+  });
+  app2.patch("/api/conversations/:id/title", async (req, res) => {
+    try {
+      const { id } = req.params;
+      const { title } = req.body;
+      if (!title || typeof title !== "string" || title.trim().length === 0) {
+        return res.status(400).json({ message: "Valid title is required" });
+      }
+      const conversation = await storage.getConversation(id);
+      if (!conversation) {
+        return res.status(404).json({ message: "Conversation not found" });
+      }
+      if (conversation.userId && req.isAuthenticated() && req.user) {
+        if (conversation.userId !== req.user.id) {
+          return res.status(403).json({ message: "You don't have permission to update this conversation." });
+        }
+      }
+      const updatedConversation = await storage.createConversation({
+        ...conversation,
+        title: title.trim()
+      });
+      res.json(updatedConversation);
+    } catch (error) {
+      console.error("Error updating conversation title:", error);
+      res.status(500).json({ message: "Failed to update conversation title" });
+    }
+  });
+  app2.patch("/api/conversations/:id/personality", async (req, res) => {
+    try {
+      const { id } = req.params;
+      const { personality } = req.body;
+      const result = personalityTypeSchema.safeParse(personality);
+      if (!result.success) {
+        return res.status(400).json({
+          message: "Invalid personality type",
+          validOptions: personalityTypeSchema.options
+        });
+      }
+      const conversation = await storage.getConversation(id);
+      if (!conversation) {
+        return res.status(404).json({ message: "Conversation not found" });
+      }
+      if (conversation.userId && req.isAuthenticated() && req.user) {
+        if (conversation.userId !== req.user.id) {
+          return res.status(403).json({ message: "You don't have permission to update this conversation." });
+        }
+      }
+      const updatedConversation = await storage.updateConversationPersonality(id, result.data);
+      const personalityConfig = getPersonalityConfig(result.data);
+      res.json({
+        ...updatedConversation,
+        personalityConfig: {
+          name: personalityConfig.name,
+          description: personalityConfig.description,
+          emoji: personalityConfig.emoji
+        }
+      });
+    } catch (error) {
+      console.error("Error updating conversation personality:", error);
+      res.status(500).json({ message: "Failed to update conversation personality" });
+    }
+  });
+  app2.get("/api/personalities", async (_req, res) => {
+    try {
+      const personalityTypes = personalityTypeSchema.options;
+      const personalities = personalityTypes.map((type) => {
+        const config = getPersonalityConfig(type);
+        return {
+          id: type,
+          name: config.name,
+          description: config.description,
+          emoji: config.emoji
+        };
+      });
+      res.json(personalities);
+    } catch (error) {
+      console.error("Error fetching personalities:", error);
+      res.status(500).json({ message: "Failed to fetch personalities" });
+    }
+  });
+  app2.post("/api/generate-image", async (req, res) => {
+    try {
+      const result = imageGenerationSchema.safeParse(req.body);
+      if (!result.success) {
+        return res.status(400).json({
+          message: "Invalid image generation parameters",
+          errors: result.error.format()
+        });
+      }
+      const imageUrl = await generateImage(result.data);
+      return res.json({
+        success: true,
+        imageUrl,
+        params: result.data
+      });
+    } catch (error) {
+      console.error("Error generating image:", error);
+      return res.status(500).json({
+        success: false,
+        message: error.message || "Failed to generate image"
+      });
+    }
+  });
+  app2.get("/api/flux-status", async (_req, res) => {
+    try {
+      const isAvailable = await isFluxAvailable();
+      return res.json({
+        isAvailable,
+        model: "FLUX.1-dev"
+      });
+    } catch (error) {
+      console.error("Error checking FLUX availability:", error);
+      return res.status(500).json({
+        isAvailable: false,
+        message: "Error checking FLUX availability"
+      });
+    }
+  });
+  app2.post("/api/generate-video", async (req, res) => {
+    try {
+      const result = videoGenerationSchema.safeParse(req.body);
+      if (!result.success) {
+        return res.status(400).json({
+          message: "Invalid video generation parameters",
+          errors: result.error.format()
+        });
+      }
+      const videoUrl = await generateVideo(result.data);
+      return res.json({
+        success: true,
+        videoUrl,
+        params: result.data
+      });
+    } catch (error) {
+      console.error("Error generating video:", error);
+      return res.status(500).json({
+        success: false,
+        message: error.message || "Failed to generate video"
+      });
+    }
+  });
+  app2.get("/api/video-status", async (_req, res) => {
+    try {
+      const isAvailable = await isVideoGenerationAvailable();
+      return res.json({
+        isAvailable,
+        model: "Wan-AI/Wan2.1-T2V-14B"
+      });
+    } catch (error) {
+      console.error("Error checking video generation availability:", error);
+      return res.status(500).json({
+        isAvailable: false,
+        message: "Error checking video generation availability"
+      });
+    }
+  });
+  app2.get("/api/health", (_req, res) => {
+    return res.json({ status: "ok" });
+  });
+  const httpServer = createServer(app2);
+  return httpServer;
+}
+
+// server/vite.ts
+import express from "express";
+import fs from "fs";
+import path2 from "path";
+import { createServer as createViteServer, createLogger } from "vite";
+
+// vite.config.ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+import runtimeErrorOverlay from "@replit/vite-plugin-runtime-error-modal";
+var vite_config_default = defineConfig({
+  plugins: [\
+    react(),\
+    runtimeErrorOverlay(),\
+    ...process.env.NODE_ENV !== "production" && process.env.REPL_ID !== void 0 ? [\
+      await import("@replit/vite-plugin-cartographer").then(\
+        (m) => m.cartographer()\
+      )\
+    ] : []\
+  ],
+  resolve: {
+    alias: {
+      "@": path.resolve(import.meta.dirname, "client", "src"),
+      "@shared": path.resolve(import.meta.dirname, "shared"),
+      "@assets": path.resolve(import.meta.dirname, "attached_assets")
+    }
+  },
+  root: path.resolve(import.meta.dirname, "client"),
+  build: {
+    outDir: path.resolve(import.meta.dirname, "dist/public"),
+    emptyOutDir: true
+  }
+});
+
+// server/vite.ts
+import { nanoid as nanoid3 } from "nanoid";
+var viteLogger = createLogger();
+function log(message, source = "express") {
+  const formattedTime = (/* @__PURE__ */ new Date()).toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: true
+  });
+  console.log(`${formattedTime} [${source}] ${message}`);
+}
+async function setupVite(app2, server) {
+  const serverOptions = {
+    middlewareMode: true,
+    hmr: { server },
+    allowedHosts: true
+  };
+  const vite = await createViteServer({
+    ...vite_config_default,
+    configFile: false,
+    customLogger: {
+      ...viteLogger,
+      error: (msg, options) => {
+        viteLogger.error(msg, options);
+        process.exit(1);
+      }
+    },
+    server: serverOptions,
+    appType: "custom"
+  });
+  app2.use(vite.middlewares);
+  app2.use("*", async (req, res, next) => {
+    const url = req.originalUrl;
+    try {
+      const clientTemplate = path2.resolve(
+        import.meta.dirname,
+        "..",
+        "client",
+        "index.html"
+      );
+      let template = await fs.promises.readFile(clientTemplate, "utf-8");
+      template = template.replace(
+        `src="/src/main.tsx"`,
+        `src="/src/main.tsx?v=${nanoid3()}"`
+      );
+      const page = await vite.transformIndexHtml(url, template);
+      res.status(200).set({ "Content-Type": "text/html" }).end(page);
+    } catch (e) {
+      vite.ssrFixStacktrace(e);
+      next(e);
+    }
+  });
+}
+function serveStatic(app2) {
+  const distPath = path2.resolve(import.meta.dirname, "public");
+  if (!fs.existsSync(distPath)) {
+    throw new Error(
+      `Could not find the build directory: ${distPath}, make sure to build the client first`
+    );
+  }
+  app2.use(express.static(distPath));
+  app2.use("*", (_req, res) => {
+    res.sendFile(path2.resolve(distPath, "index.html"));
+  });
+}
+
+// server/index.ts
+var app = express2();
+app.use(express2.json());
+app.use(express2.urlencoded({ extended: false }));
+app.use((req, res, next) => {
+  const start = Date.now();
+  const path3 = req.path;
+  let capturedJsonResponse = void 0;
+  const originalResJson = res.json;
+  res.json = function(bodyJson, ...args) {
+    capturedJsonResponse = bodyJson;
+    return originalResJson.apply(res, [bodyJson, ...args]);
+  };
+  res.on("finish", () => {
+    const duration = Date.now() - start;
+    if (path3.startsWith("/api")) {
+      let logLine = `${req.method} ${path3} ${res.statusCode} in ${duration}ms`;
+      if (capturedJsonResponse) {
+        logLine += ` :: ${JSON.stringify(capturedJsonResponse)}`;
+      }
+      if (logLine.length > 80) {
+        logLine = logLine.slice(0, 79) + "\u2026";
+      }
+      log(logLine);
+    }
+  });
+  next();
+});
+(async () => {
+  const server = await registerRoutes(app);
+  app.use((err, _req, res, _next) => {
+    const status = err.status || err.statusCode || 500;
+    const message = err.message || "Internal Server Error";
+    res.status(status).json({ message });
+    throw err;
+  });
+  if (app.get("env") === "development") {
+    await setupVite(app, server);
+  } else {
+    serveStatic(app);
+  }
+  const port = 5e3;
+  server.listen({
+    port,
+    host: "0.0.0.0",
+    reusePort: true
+  }, () => {
+    log(`serving on port ${port}`);
+  });
+})();
+
+```

OpenAIChatAssistant/attached_assets/content-1746448603342.md

@@ -0,0 +1,23 @@
+# 404
+
+**File not found**
+
+The site configured at this address does not
+contain the requested file.
+
+
+If this is your site, make sure that the filename case matches the URL
+as well as any file permissions.
+
+For root URLs (like `http://example.com/`) you must provide an
+`index.html` file.
+
+
+[Read the full documentation](https://help.github.com/pages/)
+for more information about using **GitHub Pages**.
+
+
+[GitHub Status](https://githubstatus.com/) —
+[@githubstatus](https://twitter.com/githubstatus)
+
+[![](<Base64-Image-Removed>)](https://bella288.github.io/)[![](<Base64-Image-Removed>)](https://bella288.github.io/)

OpenAIChatAssistant/client/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+    <!-- This is a replit script which adds a banner on the top of the page when opened in development mode outside the replit environment -->
+    <script type="text/javascript" src="https://replit.com/public/js/replit-dev-banner.js"></script>
+  </body>
+</html>

OpenAIChatAssistant/client/src/App.tsx

@@ -0,0 +1,43 @@
+import { Switch, Route } from "wouter";
+import { queryClient } from "./lib/queryClient";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { Toaster } from "@/components/ui/toaster";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import NotFound from "@/pages/not-found";
+import Home from "@/pages/Home";
+import AuthPage from "@/pages/auth-page";
+import ImageGenPage from "@/pages/ImageGenPage";
+import VideoGenPage from "@/pages/VideoGenPage";
+import { AuthProvider } from "@/hooks/use-auth";
+import { ProtectedRoute } from "@/lib/protected-route";
+import LogoutPage from "@/pages/logout-page";
+import RegisterPage from "@/pages/register-page";
+
+function Router() {
+  return (
+    <Switch>
+      <Route path="/auth" component={AuthPage} />
+      <Route path="/register" component={RegisterPage} />
+      <Route path="/logout" component={LogoutPage} />
+      <ProtectedRoute path="/" component={Home} />
+      <ProtectedRoute path="/image-generator" component={ImageGenPage} />
+      <ProtectedRoute path="/video-generator" component={VideoGenPage} />
+      <Route component={NotFound} />
+    </Switch>
+  );
+}
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AuthProvider>
+        <TooltipProvider>
+          <Toaster />
+          <Router />
+        </TooltipProvider>
+      </AuthProvider>
+    </QueryClientProvider>
+  );
+}
+
+export default App;

OpenAIChatAssistant/client/src/components/ChatHistory.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { ChatHistoryProps } from '@/lib/types';
+import TypingIndicator from './TypingIndicator';
+import { useScrollToBottom } from '@/lib/hooks';
+import { AlertTriangle } from 'lucide-react';
+
+const ChatHistory: React.FC<ChatHistoryProps> = ({ 
+  messages, 
+  isLoading,
+  currentModel = 'openai'
+}) => {
+  const scrollRef = useScrollToBottom([messages, isLoading]);
+  
+  // Check if we're in fallback mode by looking at the model or fallback indicator in messages
+  const isFallbackMode = currentModel === 'qwen' ||
+    messages.some(message => 
+      message.role === 'assistant' && 
+      message.content.includes('fallback mode')
+    );
+
+  return (
+    <div 
+      ref={scrollRef}
+      className="chat-container overflow-y-auto pb-4 px-2"
+      style={{ height: 'calc(100vh - 180px)' }}
+    >
+      {/* Fallback mode indicator */}
+      {isFallbackMode && (
+        <div className="bg-amber-50 border-l-4 border-amber-400 p-4 mb-4 rounded-md">
+          <div className="flex items-center">
+            <div className="flex-shrink-0">
+              <AlertTriangle className="h-5 w-5 text-amber-400" />
+            </div>
+            <div className="ml-3">
+              <p className="text-sm text-amber-700">
+                <strong>Qwen Fallback Mode Active:</strong> The OpenAI API is currently unavailable.
+                Responses are being generated by the Qwen model instead.
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {messages.map((message, index) => {
+        // Check if this is a fallback message directly from the content
+        const isMessageFallback = message.role === 'assistant' && 
+          (message.content.includes('fallback mode') || 
+           message.content.includes('Qwen model'));
+        
+        // Determine if this message appears to be a fallback response
+        const isAssistantFallbackMessage = message.role === 'assistant' && 
+          (currentModel === 'qwen' || isMessageFallback);
+        
+        // Clean up fallback message for display
+        let displayContent = isAssistantFallbackMessage 
+          ? message.content.replace(/\n\n\(Note: I'm currently operating in fallback mode.*\)$/, '') 
+          : message.content;
+          
+        // Remove any thinking process sections for Qwen responses
+        if (isAssistantFallbackMessage) {
+          // Remove <think> tags and their content
+          displayContent = displayContent.replace(/<think>[\s\S]*?<\/think>/g, '');
+          
+          // Remove any other XML-like tags
+          displayContent = displayContent.replace(/<[^>]*>/g, '');
+          
+          // Clean up any excessive whitespace
+          displayContent = displayContent.replace(/^\s+|\s+$/g, '');
+          displayContent = displayContent.replace(/\n{3,}/g, '\n\n');
+        }
+          
+        return (
+          <div 
+            key={index}
+            className={`flex items-start ${message.role === 'user' ? 'justify-end' : ''} mb-4`}
+          >
+            {message.role !== 'user' && (
+              <div className="flex-shrink-0 mr-3">
+                <div className={`h-8 w-8 rounded-full ${
+                  isAssistantFallbackMessage ? 'bg-amber-500' : 'bg-primary'
+                } flex items-center justify-center text-white`}>
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                    <path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
+                    <path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z" />
+                  </svg>
+                </div>
+              </div>
+            )}
+            
+            <div 
+              className={`${
+                message.role === 'user' 
+                  ? 'bg-primary text-white' 
+                  : isAssistantFallbackMessage 
+                    ? 'bg-amber-50 border border-amber-200 text-gray-800' 
+                    : 'bg-white text-gray-800'
+              } rounded-lg p-4 shadow-sm max-w-[85%]`}
+            >
+              <p className="whitespace-pre-wrap">{displayContent}</p>
+              
+              {isAssistantFallbackMessage && isMessageFallback && (
+                <p className="mt-2 text-xs text-amber-600 italic">
+                  (This response was generated using the Qwen fallback model)
+                </p>
+              )}
+            </div>
+            
+            {message.role === 'user' && (
+              <div className="flex-shrink-0 ml-3">
+                <div className="h-8 w-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-600">
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                    <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
+                  </svg>
+                </div>
+              </div>
+            )}
+          </div>
+        );
+      })}
+      
+      <TypingIndicator isVisible={isLoading} />
+    </div>
+  );
+};
+
+export default ChatHistory;

OpenAIChatAssistant/client/src/components/ChatInputForm.tsx

@@ -0,0 +1,72 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { ChatInputFormProps } from '@/lib/types';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+
+const ChatInputForm: React.FC<ChatInputFormProps> = ({ onSendMessage, isLoading }) => {
+  const [input, setInput] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+  
+  // Focus input on component mount
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    const message = input.trim();
+    if (!message || isLoading) return;
+    
+    onSendMessage(message);
+    setInput('');
+  };
+
+  const handleClear = () => {
+    setInput('');
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="flex items-center space-x-2">
+      <div className="relative flex-1">
+        <Input
+          ref={inputRef}
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="Type your message here..."
+          className="w-full py-3 px-4 bg-gray-100 rounded-full focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white"
+          disabled={isLoading}
+        />
+        {input && (
+          <button
+            type="button"
+            onClick={handleClear}
+            className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+            aria-label="Clear input"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+            </svg>
+          </button>
+        )}
+      </div>
+      <Button
+        type="submit"
+        disabled={isLoading || !input.trim()}
+        className="bg-primary text-white p-3 rounded-full hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-colors duration-200"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+          <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
+        </svg>
+      </Button>
+    </form>
+  );
+};
+
+export default ChatInputForm;

OpenAIChatAssistant/client/src/components/ConnectionStatus.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { ConnectionStatusProps } from '@/lib/types';
+import { Badge } from '@/components/ui/badge';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+
+const ConnectionStatus: React.FC<ConnectionStatusProps> = ({ isConnected, currentModel = 'openai' }) => {
+  // Get model status details
+  const getModelBadge = () => {
+    switch (currentModel) {
+      case 'openai':
+        return (
+          <Badge variant="outline" className="ml-2 bg-blue-50 text-blue-800 border-blue-300">
+            OpenAI
+          </Badge>
+        );
+      case 'qwen':
+        return (
+          <Badge variant="outline" className="ml-2 bg-amber-50 text-amber-800 border-amber-300">
+            Qwen (Fallback)
+          </Badge>
+        );
+      case 'unavailable':
+        return (
+          <Badge variant="outline" className="ml-2 bg-red-50 text-red-800 border-red-300">
+            No AI Available
+          </Badge>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="flex items-center">
+      <span 
+        className={`inline-block h-2 w-2 rounded-full mr-2 ${
+          isConnected ? 'bg-green-500' : 'bg-red-500'
+        }`}
+      ></span>
+      <span className="text-sm text-gray-600 mr-2">
+        {isConnected ? 'Connected' : 'Disconnected'}
+      </span>
+      
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            {getModelBadge()}
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>
+              {currentModel === 'openai' 
+                ? 'Using OpenAI GPT-4o model' 
+                : currentModel === 'qwen' 
+                  ? 'Using Qwen fallback model due to OpenAI unavailability' 
+                  : 'All AI models are currently unavailable'}
+            </p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+  );
+};
+
+export default ConnectionStatus;

OpenAIChatAssistant/client/src/components/ConversationSidebar.tsx

@@ -0,0 +1,315 @@
+import React, { useState, useEffect } from 'react';
+import { PlusCircle, MessageSquare, Trash2, Edit2, Save, X, User, LogOut } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { apiRequest } from '@/lib/queryClient';
+import { Conversation } from '@/lib/types';
+import { useAuth } from '@/hooks/use-auth';
+import { useLocation } from 'wouter';
+
+interface ConversationSidebarProps {
+  isOpen: boolean;
+  onClose: () => void;
+  selectedConversationId: string;
+  onSelectConversation: (conversationId: string) => void;
+  onNewConversation: () => void;
+}
+
+const ConversationSidebar: React.FC<ConversationSidebarProps> = ({
+  isOpen,
+  onClose,
+  selectedConversationId,
+  onSelectConversation,
+  onNewConversation
+}) => {
+  const [conversations, setConversations] = useState<Conversation[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editingTitle, setEditingTitle] = useState('');
+  const { user, logoutMutation } = useAuth();
+  const [, setLocation] = useLocation();
+  
+  const isSignedIn = !!user;
+  
+  // Fetch conversations
+  useEffect(() => {
+    const fetchConversations = async () => {
+      setIsLoading(true);
+      try {
+        const response = await fetch('/api/conversations');
+        if (response.ok) {
+          const data = await response.json();
+          setConversations(data);
+        } else {
+          console.error('Failed to fetch conversations');
+        }
+      } catch (error) {
+        console.error('Error fetching conversations:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    
+    fetchConversations();
+    
+    // Set up interval to refresh conversations (every 30 seconds)
+    const interval = setInterval(fetchConversations, 30000);
+    return () => clearInterval(interval);
+  }, [isSignedIn]);
+  
+  // Navigate to auth page
+  const handleSignIn = () => {
+    setLocation('/auth');
+  };
+  
+  // Sign out
+  const handleSignOut = () => {
+    setLocation('/logout');
+  };
+  
+  // Start editing a conversation title
+  const handleEditStart = (conversation: Conversation) => {
+    setEditingId(conversation.id);
+    setEditingTitle(conversation.title);
+  };
+  
+  // Cancel editing
+  const handleEditCancel = () => {
+    setEditingId(null);
+    setEditingTitle('');
+  };
+  
+  // Save edited title
+  const handleEditSave = async (conversationId: string) => {
+    try {
+      const response = await apiRequest('PATCH', `/api/conversations/${conversationId}/title`, {
+        title: editingTitle
+      });
+      
+      if (response.ok) {
+        const updatedConversation = await response.json();
+        setConversations(conversations.map(conv => 
+          conv.id === conversationId ? updatedConversation : conv
+        ));
+        setEditingId(null);
+      } else {
+        console.error('Failed to update conversation title');
+      }
+    } catch (error) {
+      console.error('Error updating conversation title:', error);
+    }
+  };
+  
+  // Delete a conversation
+  const handleDelete = async (conversationId: string) => {
+    // Confirm delete
+    if (!window.confirm('Are you sure you want to delete this conversation?')) {
+      return;
+    }
+    
+    try {
+      const response = await apiRequest('DELETE', `/api/conversations/${conversationId}`);
+      
+      if (response.ok) {
+        setConversations(conversations.filter(conv => conv.id !== conversationId));
+        
+        // If we deleted the selected conversation, switch to a new one
+        if (conversationId === selectedConversationId) {
+          const nextConv = conversations.find(conv => conv.id !== conversationId);
+          if (nextConv) {
+            onSelectConversation(nextConv.id);
+          } else {
+            onNewConversation();
+          }
+        }
+      } else {
+        console.error('Failed to delete conversation');
+      }
+    } catch (error) {
+      console.error('Error deleting conversation:', error);
+    }
+  };
+  
+  return (
+    <aside 
+      className={`fixed inset-y-0 left-0 w-64 bg-white border-r border-gray-200 shadow-md transform ${
+        isOpen ? 'translate-x-0' : '-translate-x-full'
+      } transition-transform duration-300 ease-in-out z-10 flex flex-col`}
+    >
+      <div className="flex items-center justify-between p-4 border-b border-gray-200">
+        <h2 className="text-lg font-semibold">Conversations</h2>
+        <button
+          onClick={onClose}
+          className="p-1 rounded-full hover:bg-gray-100"
+          aria-label="Close sidebar"
+        >
+          <X className="h-5 w-5 text-gray-500" />
+        </button>
+      </div>
+      
+      <div className="p-4 border-b border-gray-200">
+        <Button 
+          onClick={onNewConversation}
+          className="w-full flex items-center justify-center"
+          variant="outline"
+        >
+          <PlusCircle className="mr-2 h-4 w-4" />
+          New Chat
+        </Button>
+      </div>
+
+      {/* Sign in/out section */}
+      <div className="p-4 border-b border-gray-200">
+        {isSignedIn ? (
+          <Button 
+            onClick={handleSignOut} 
+            variant="ghost" 
+            className="w-full flex items-center justify-center text-red-500 hover:text-red-700 hover:bg-red-50"
+          >
+            <LogOut className="mr-2 h-4 w-4" />
+            Sign Out
+          </Button>
+        ) : (
+          <Button 
+            onClick={handleSignIn} 
+            variant="default" 
+            className="w-full flex items-center justify-center"
+          >
+            <User className="mr-2 h-4 w-4" />
+            Sign In to Save Chats
+          </Button>
+        )}
+        {!isSignedIn && (
+          <p className="text-xs text-gray-500 mt-2 text-center">
+            Create an account to save your conversations
+          </p>
+        )}
+      </div>
+      
+      {/* Conversations list */}
+      <div className="flex-1 overflow-y-auto p-2">
+        {isLoading ? (
+          <div className="flex items-center justify-center h-20">
+            <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-primary"></div>
+          </div>
+        ) : (
+          conversations.length === 0 ? (
+            isSignedIn ? (
+              <div className="text-center text-gray-500 py-8">
+                <MessageSquare className="mx-auto h-12 w-12 text-gray-300 mb-2" />
+                <p>No conversations yet</p>
+                <p className="text-sm">Start a new chat to get started</p>
+              </div>
+            ) : (
+              <div className="text-center text-gray-500 py-8">
+                <p className="text-sm">Sign in to view your saved conversations</p>
+              </div>
+            )
+          ) : (
+            <ul className="space-y-1">
+              {conversations.map(conversation => (
+                <li key={conversation.id} className="relative">
+                  {editingId === conversation.id ? (
+                    <div className="flex items-center p-2 rounded-md bg-gray-100">
+                      <Input
+                        value={editingTitle}
+                        onChange={(e) => setEditingTitle(e.target.value)}
+                        className="flex-1 mr-1"
+                        autoFocus
+                      />
+                      <div className="flex">
+                        <Button 
+                          onClick={() => handleEditSave(conversation.id)}
+                          size="sm" 
+                          variant="ghost" 
+                          className="p-1 h-8 w-8"
+                        >
+                          <Save className="h-4 w-4 text-green-500" />
+                        </Button>
+                        <Button 
+                          onClick={handleEditCancel}
+                          size="sm" 
+                          variant="ghost" 
+                          className="p-1 h-8 w-8"
+                        >
+                          <X className="h-4 w-4 text-red-500" />
+                        </Button>
+                      </div>
+                    </div>
+                  ) : (
+                    <div 
+                      className={`flex items-center p-2 rounded-md cursor-pointer group ${
+                        conversation.id === selectedConversationId 
+                          ? 'bg-primary text-white' 
+                          : 'hover:bg-gray-100'
+                      }`}
+                      onClick={() => onSelectConversation(conversation.id)}
+                    >
+                      <MessageSquare className={`h-4 w-4 mr-2 ${
+                        conversation.id === selectedConversationId ? 'text-white' : 'text-gray-500'
+                      }`} />
+                      <span className="flex-1 truncate">{conversation.title}</span>
+                      
+                      <div className={`flex space-x-1 ${
+                        conversation.id === selectedConversationId ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+                      } transition-opacity`}>
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button 
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleEditStart(conversation);
+                                }}
+                                size="sm" 
+                                variant="ghost" 
+                                className={`p-1 h-6 w-6 ${
+                                  conversation.id === selectedConversationId ? 'text-white hover:bg-primary-dark' : ''
+                                }`}
+                              >
+                                <Edit2 className="h-3 w-3" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              <p>Edit title</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                        
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button 
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleDelete(conversation.id);
+                                }}
+                                size="sm" 
+                                variant="ghost" 
+                                className={`p-1 h-6 w-6 ${
+                                  conversation.id === selectedConversationId ? 'text-white hover:bg-primary-dark' : ''
+                                }`}
+                              >
+                                <Trash2 className="h-3 w-3" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              <p>Delete conversation</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                      </div>
+                    </div>
+                  )}
+                </li>
+              ))}
+            </ul>
+          )
+        )}
+      </div>
+    </aside>
+  );
+};
+
+export default ConversationSidebar;

OpenAIChatAssistant/client/src/components/ImageGenerator.tsx

@@ -0,0 +1,319 @@
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Button } from './ui/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from './ui/form';
+import { Input } from './ui/input';
+import { Slider } from './ui/slider';
+import { Switch } from './ui/switch';
+import { cn } from '@/lib/utils';
+import { Card } from './ui/card';
+import { Loader2 } from 'lucide-react';
+
+// Define form schema
+const formSchema = z.object({
+  prompt: z.string().min(1, {
+    message: 'Prompt is required',
+  }).max(1000, {
+    message: 'Prompt must be less than 1000 characters',
+  }),
+  width: z.number().min(256).max(1024).default(512),
+  height: z.number().min(256).max(1024).default(512),
+  seed: z.number().default(0),
+  randomize_seed: z.boolean().default(true),
+  guidance_scale: z.number().min(0).max(20).default(7.5),
+  num_inference_steps: z.number().min(1).max(50).default(20),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+export default function ImageGenerator() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+
+  // Default form values
+  const defaultValues: FormValues = {
+    prompt: '',
+    width: 512,
+    height: 512,
+    seed: 0,
+    randomize_seed: true,
+    guidance_scale: 7.5,
+    num_inference_steps: 20,
+  };
+
+  // Initialize form
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues,
+  });
+
+  // Handle form submission
+  const onSubmit = async (data: FormValues) => {
+    setIsLoading(true);
+    setError(null);
+    
+    try {
+      const response = await fetch('/api/generate-image', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || 'Failed to generate image');
+      }
+
+      const result = await response.json();
+      setImageUrl(result.imageUrl);
+    } catch (err: any) {
+      setError(err.message || 'An error occurred while generating the image');
+      console.error('Error generating image:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <h2 className="text-3xl font-bold">Image Generator</h2>
+        {isLoading && <div className="flex items-center"><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Generating...</div>}
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+              <FormField
+                control={form.control}
+                name="prompt"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Prompt</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Enter your prompt..." {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      Describe the image you want to generate
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <FormField
+                  control={form.control}
+                  name="width"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Width: {field.value}px</FormLabel>
+                      <FormControl>
+                        <Slider
+                          min={256}
+                          max={1024}
+                          step={64}
+                          defaultValue={[field.value]}
+                          onValueChange={(value) => field.onChange(value[0])}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="height"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Height: {field.value}px</FormLabel>
+                      <FormControl>
+                        <Slider
+                          min={256}
+                          max={1024}
+                          step={64}
+                          defaultValue={[field.value]}
+                          onValueChange={(value) => field.onChange(value[0])}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <FormField
+                control={form.control}
+                name="randomize_seed"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                    <div className="space-y-0.5">
+                      <FormLabel className="text-base">Randomize Seed</FormLabel>
+                      <FormDescription>
+                        Use a random seed for each generation
+                      </FormDescription>
+                    </div>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+
+              {!form.watch("randomize_seed") && (
+                <FormField
+                  control={form.control}
+                  name="seed"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Seed: {field.value}</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="number"
+                          {...field}
+                          onChange={(e) => field.onChange(parseInt(e.target.value) || 0)}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        Specific seed for reproducible results
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+              <FormField
+                control={form.control}
+                name="guidance_scale"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Guidance Scale: {field.value}</FormLabel>
+                    <FormControl>
+                      <Slider
+                        min={0}
+                        max={20}
+                        step={0.1}
+                        defaultValue={[field.value]}
+                        onValueChange={(value) => field.onChange(value[0])}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      How closely to follow the prompt (higher = more faithful)
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="num_inference_steps"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Inference Steps: {field.value}</FormLabel>
+                    <FormControl>
+                      <Slider
+                        min={1}
+                        max={50}
+                        step={1}
+                        defaultValue={[field.value]}
+                        onValueChange={(value) => field.onChange(value[0])}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      Number of denoising steps (higher = better quality but slower)
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {error && (
+                <div className="bg-red-50 text-red-500 p-3 rounded-md text-sm">
+                  {error}
+                </div>
+              )}
+
+              <Button 
+                type="submit" 
+                className="w-full" 
+                disabled={isLoading}
+              >
+                {isLoading ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Generating...
+                  </>
+                ) : (
+                  'Generate Image'
+                )}
+              </Button>
+            </form>
+          </Form>
+        </div>
+
+        <div className={cn("flex flex-col items-center justify-center", 
+          imageUrl ? "bg-gray-50 dark:bg-gray-900" : "bg-gray-100 dark:bg-gray-800")}>
+          {imageUrl ? (
+            <div className="relative w-full">
+              <img 
+                src={imageUrl} 
+                alt="Generated" 
+                className="rounded-md object-contain max-h-[600px] mx-auto"
+              />
+              <div className="mt-4 flex justify-center">
+                <Button
+                  variant="outline"
+                  onClick={() => window.open(imageUrl, '_blank')}
+                  className="mr-2"
+                >
+                  Open in New Tab
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() => {
+                    const a = document.createElement('a');
+                    a.href = imageUrl;
+                    a.download = 'generated-image.png';
+                    document.body.appendChild(a);
+                    a.click();
+                    document.body.removeChild(a);
+                  }}
+                >
+                  Download
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <Card className="w-full h-full flex items-center justify-center p-8 border-dashed">
+              <div className="text-center">
+                <p className="text-muted-foreground">
+                  Your generated image will appear here
+                </p>
+              </div>
+            </Card>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

OpenAIChatAssistant/client/src/components/TypingIndicator.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { TypingIndicatorProps } from '@/lib/types';
+
+const TypingIndicator: React.FC<TypingIndicatorProps> = ({ isVisible }) => {
+  if (!isVisible) return null;
+
+  return (
+    <div className="flex items-start mb-4">
+      <div className="flex-shrink-0 mr-3">
+        <div className="h-8 w-8 rounded-full bg-primary flex items-center justify-center text-white">
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
+            <path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z" />
+          </svg>
+        </div>
+      </div>
+      <div className="bg-white rounded-lg shadow-sm">
+        <div className="flex items-center p-2">
+          <div className="flex space-x-1">
+            <span className="h-2 w-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: '0s' }}></span>
+            <span className="h-2 w-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></span>
+            <span className="h-2 w-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: '0.4s' }}></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TypingIndicator;

OpenAIChatAssistant/client/src/components/UserSettingsModal.tsx

@@ -0,0 +1,348 @@
+import React, { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { useMutation } from "@tanstack/react-query";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import { useAuth } from "@/hooks/use-auth";
+import { useToast } from "@/hooks/use-toast";
+import { updateUserProfileSchema } from "@shared/schema";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { Loader2 } from "lucide-react";
+
+// Create a form schema
+const profileFormSchema = z.object({
+  fullName: z.string().optional(),
+  location: z.string().optional(),
+  interests: z.array(z.string()).optional(),
+  interestsInput: z.string().optional(), // For input field value only, not submitted
+  profession: z.string().optional(),
+  pets: z.string().optional(),
+  systemContext: z.string().optional(),
+});
+
+type ProfileFormValues = z.infer<typeof profileFormSchema>;
+
+interface UserSettingsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function UserSettingsModal({
+  isOpen,
+  onClose,
+}: UserSettingsModalProps) {
+  const { user } = useAuth();
+  const { toast } = useToast();
+  
+  // Create form with default values
+  const form = useForm<ProfileFormValues>({
+    resolver: zodResolver(profileFormSchema),
+    defaultValues: {
+      fullName: "",
+      location: "",
+      interests: [],
+      interestsInput: "",
+      profession: "",
+      pets: "",
+      systemContext: "",
+    },
+  });
+
+  // Update form when user data changes
+  useEffect(() => {
+    if (user) {
+      // Convert interests array to comma-separated string for display
+      const interestsString = user.interests?.join(", ") || "";
+      
+      form.reset({
+        fullName: user.fullName || "",
+        location: user.location || "",
+        interests: user.interests || [],
+        interestsInput: interestsString,
+        profession: user.profession || "",
+        pets: user.pets || "",
+        systemContext: user.systemContext || "",
+      });
+    }
+  }, [user, form]);
+
+  const updateProfileMutation = useMutation({
+    mutationFn: async (data: ProfileFormValues) => {
+      const res = await apiRequest("PATCH", "/api/user/profile", data);
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.message || "Failed to update profile");
+      }
+      return await res.json();
+    },
+    onSuccess: (updatedUser) => {
+      queryClient.setQueryData(["/api/user"], updatedUser);
+      toast({
+        title: "Profile updated",
+        description: "Your profile has been updated successfully.",
+      });
+      onClose();
+    },
+    onError: (error: Error) => {
+      toast({
+        title: "Update failed",
+        description: error.message,
+        variant: "destructive",
+      });
+    },
+  });
+
+  const onSubmit = async (data: ProfileFormValues) => {
+    // Create a copy of the data object without interestsInput
+    const { interestsInput, ...submitData } = data;
+    
+    // Submit data without the temporary interestsInput field
+    await updateProfileMutation.mutateAsync(submitData);
+  };
+
+  // Convert string to array for interests field if needed
+  const handleInterestsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    // Just store the input value as is, don't process it yet
+    form.setValue("interestsInput", value);
+    
+    // Process for the actual interests field that gets submitted
+    const interestsArray = value
+      .split(",")
+      .map((item) => item.trim())
+      .filter((item) => item !== "");
+    form.setValue("interests", interestsArray);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-[525px] max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>User Settings</DialogTitle>
+          <DialogDescription>
+            Update your profile information and AI assistant preferences
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <div className="space-y-4">
+              {/* Profile Information Section */}
+              <div className="border-b pb-2">
+                <h3 className="text-lg font-medium">Profile Information</h3>
+              </div>
+              
+              <FormField
+                control={form.control}
+                name="fullName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Full Name</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Your full name" {...field} value={field.value || ""} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="location"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Location</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Your location" {...field} value={field.value || ""} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="profession"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Profession</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Your profession" {...field} value={field.value || ""} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="interestsInput"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Interests</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Interests (comma-separated)"
+                        {...field}
+                        onChange={handleInterestsChange}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      Enter your interests separated by commas
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="pets"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Pets</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Your pets" {...field} value={field.value || ""} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* AI Assistant Preferences Section */}
+              <div className="border-b pb-2 pt-4">
+                <h3 className="text-lg font-medium">AI Assistant Preferences</h3>
+              </div>
+
+              <FormField
+                control={form.control}
+                name="additionalInfo"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Additional Information</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="Add any additional information about yourself that you'd like the AI to know"
+                        className="min-h-[100px]"
+                        {...field}
+                        value={field.value || ""}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      This information will be included in your AI context
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="space-y-4">
+                <div className="flex justify-between items-center">
+                  <FormLabel className="text-base">System Context</FormLabel>
+                  <Button 
+                    type="button" 
+                    variant="outline" 
+                    size="sm"
+                    onClick={() => {
+                      // Generate structured context from profile fields
+                      const fullName = form.getValues("fullName");
+                      const location = form.getValues("location");
+                      const interests = form.getValues("interests");
+                      const profession = form.getValues("profession");
+                      const pets = form.getValues("pets");
+                      const additionalInfo = form.getValues("additionalInfo");
+                      
+                      // Format profile information in a structured way
+                      let profileInfo = "";
+                      if (fullName) profileInfo += `name: ${fullName}\n`;
+                      if (location) profileInfo += `location: ${location}\n`;
+                      if (interests && interests.length > 0) profileInfo += `interests: ${interests.join(", ")}\n`;
+                      if (profession) profileInfo += `profession: ${profession}\n`;
+                      if (pets) profileInfo += `pets: ${pets}\n`;
+                      if (additionalInfo) profileInfo += `additional_info: ${additionalInfo}\n`;
+                      
+                      // Get existing context
+                      const currentContext = form.getValues("systemContext") || "";
+                      
+                      // Set the new structured context
+                      form.setValue("systemContext", profileInfo + "\n" + currentContext);
+                    }}
+                  >
+                    Include Profile Info
+                  </Button>
+                </div>
+                
+                <FormField
+                  control={form.control}
+                  name="systemContext"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Textarea
+                          placeholder="Add custom context for the AI assistant to understand your requirements better"
+                          className="min-h-[150px]"
+                          {...field}
+                          value={field.value || ""}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        This context will be provided to the AI assistant for all your conversations. 
+                        Use key-value pairs like "name: Your Name" for best results.
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </div>
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={onClose}
+                disabled={updateProfileMutation.isPending}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={updateProfileMutation.isPending}
+              >
+                {updateProfileMutation.isPending ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Saving...
+                  </>
+                ) : (
+                  "Save Changes"
+                )}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

OpenAIChatAssistant/client/src/components/VideoGenerator.tsx

@@ -0,0 +1,169 @@
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Button } from './ui/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from './ui/form';
+import { Input } from './ui/input';
+import { cn } from '@/lib/utils';
+import { Card } from './ui/card';
+import { Loader2 } from 'lucide-react';
+
+// Define form schema
+const formSchema = z.object({
+  prompt: z.string().min(1, {
+    message: 'Prompt is required',
+  }).max(1000, {
+    message: 'Prompt must be less than 1000 characters',
+  }),
+  model: z.enum(["Wan-AI/Wan2.1-T2V-14B"]).default("Wan-AI/Wan2.1-T2V-14B"),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+export default function VideoGenerator() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [videoUrl, setVideoUrl] = useState<string | null>(null);
+
+  // Default form values
+  const defaultValues: FormValues = {
+    prompt: '',
+    model: "Wan-AI/Wan2.1-T2V-14B",
+  };
+
+  // Initialize form
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues,
+  });
+
+  // Handle form submission
+  const onSubmit = async (data: FormValues) => {
+    setIsLoading(true);
+    setError(null);
+    
+    try {
+      const response = await fetch('/api/generate-video', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || 'Failed to generate video');
+      }
+
+      const result = await response.json();
+      setVideoUrl(result.videoUrl);
+    } catch (err: any) {
+      setError(err.message || 'An error occurred while generating the video');
+      console.error('Error generating video:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="w-full space-y-8">
+      <Card className="p-6">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <FormField
+              control={form.control}
+              name="prompt"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Prompt</FormLabel>
+                  <FormControl>
+                    <Input 
+                      placeholder="A young man walking on the street"
+                      {...field} 
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    Describe the video you want to generate.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <Button 
+              type="submit" 
+              className="w-full"
+              disabled={isLoading}
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Generating video...
+                </>
+              ) : 'Generate Video'}
+            </Button>
+          </form>
+        </Form>
+      </Card>
+
+      {error && (
+        <div className="p-4 text-sm border border-red-200 bg-red-50 text-red-800 rounded-md">
+          {error}
+        </div>
+      )}
+      
+      <div className={cn("flex flex-col items-center justify-center", 
+        videoUrl ? "bg-gray-50 dark:bg-gray-900" : "bg-gray-100 dark:bg-gray-800")}>
+        {videoUrl ? (
+          <div className="relative w-full">
+            <video 
+              src={videoUrl} 
+              controls
+              className="rounded-md object-contain max-h-[600px] mx-auto"
+            />
+            <div className="mt-4 flex justify-center">
+              <Button
+                variant="outline"
+                onClick={() => window.open(videoUrl, '_blank')}
+                className="mr-2"
+              >
+                Open in New Tab
+              </Button>
+              <Button
+                variant="outline"
+                onClick={() => {
+                  const a = document.createElement('a');
+                  a.href = videoUrl;
+                  a.download = 'generated-video.mp4';
+                  document.body.appendChild(a);
+                  a.click();
+                  document.body.removeChild(a);
+                }}
+              >
+                Download
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <Card className="w-full h-full flex items-center justify-center p-8 border-dashed">
+            <div className="text-center">
+              <p className="text-muted-foreground">
+                Your generated video will appear here
+              </p>
+            </div>
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+}

OpenAIChatAssistant/client/src/components/ui/accordion.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

OpenAIChatAssistant/client/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,139 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

OpenAIChatAssistant/client/src/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

OpenAIChatAssistant/client/src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }

OpenAIChatAssistant/client/src/components/ui/avatar.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

OpenAIChatAssistant/client/src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

OpenAIChatAssistant/client/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,115 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className
+    )}
+    {...props}
+  />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

OpenAIChatAssistant/client/src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

OpenAIChatAssistant/client/src/components/ui/calendar.tsx

@@ -0,0 +1,68 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn("h-4 w-4", className)} {...props} />
+        ),
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }

OpenAIChatAssistant/client/src/components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

OpenAIChatAssistant/client/src/components/ui/carousel.tsx

@@ -0,0 +1,260 @@
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return
+      }
+
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault()
+          scrollPrev()
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault()
+          scrollNext()
+        }
+      },
+      [scrollPrev, scrollNext]
+    )
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return
+      }
+
+      setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      onSelect(api)
+      api.on("reInit", onSelect)
+      api.on("select", onSelect)
+
+      return () => {
+        api?.off("select", onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute  h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}

OpenAIChatAssistant/client/src/components/ui/chart.tsx

@@ -0,0 +1,365 @@
+"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"]
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+})
+ChartContainer.displayName = "Chart"
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean
+      hideIndicator?: boolean
+      indicator?: "line" | "dot" | "dashed"
+      nameKey?: string
+      labelKey?: string
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null
+      }
+
+      const [item] = payload
+      const key = `${labelKey || item?.dataKey || item?.name || "value"}`
+      const itemConfig = getPayloadConfigFromPayload(config, item, key)
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        )
+      }
+
+      if (!value) {
+        return null
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ])
+
+    if (!active || !payload?.length) {
+      return null
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot"
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color || item.payload.fill || item.color
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+)
+ChartTooltipContent.displayName = "ChartTooltip"
+
+const ChartLegend = RechartsPrimitive.Legend
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean
+      nameKey?: string
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    if (!payload?.length) {
+      return null
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+)
+ChartLegendContent.displayName = "ChartLegend"
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}

OpenAIChatAssistant/client/src/components/ui/checkbox.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

OpenAIChatAssistant/client/src/components/ui/collapsible.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

OpenAIChatAssistant/client/src/components/ui/command.tsx

@@ -0,0 +1,151 @@
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

OpenAIChatAssistant/client/src/components/ui/context-menu.tsx

@@ -0,0 +1,198 @@
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

OpenAIChatAssistant/client/src/components/ui/dialog.tsx

@@ -0,0 +1,120 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg max-h-[85vh] translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 overflow-y-auto data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

OpenAIChatAssistant/client/src/components/ui/drawer.tsx

@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

OpenAIChatAssistant/client/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,198 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

OpenAIChatAssistant/client/src/components/ui/form.tsx

@@ -0,0 +1,176 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

OpenAIChatAssistant/client/src/components/ui/hover-card.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }