feat(add): updated docs and stuff

Author: CodeMeAPixel

CHANGELOG.md

@@ -5,6 +5,49 @@ All notable changes to FixFX will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.4.0] - 2026-03-10
+
+### Added
+
+#### Fixie AI Chat
+
+- **Chat Page** (`/chat`) — New full-screen AI assistant "Fixie" for the CitizenFX ecosystem with real-time streaming responses, message history, and persistent saved chats (localStorage)
+- **Chat API Route** (`/api/chat`) — Streaming AI endpoint supporting 8 models across three providers (OpenAI, Anthropic, Google) with model allowlisting and max 4096 token responses
+- **BYOK (Bring Your Own Key)** — Users can supply their own API keys for Anthropic and Google to unlock Claude and Gemini models; keys stored in localStorage and never sent to the server unless used for that provider's request
+- **8 AI Models** — GPT-4o, GPT-4o Mini, GPT-4 Turbo, GPT-3.5 Turbo (OpenAI); Claude 3.5 Sonnet, Claude 3 Haiku (Anthropic, BYOK); Gemini 2.0 Flash, Gemini 1.5 Flash (Google, BYOK)
+- **ChatInterface Component** — Auto-growing textarea, Enter-to-send / Shift+Enter for newline, markdown rendering with syntax-highlighted code blocks, copy-to-clipboard, typing indicator, and message timestamps
+- **Chat Sidebar** — Collapsible desktop sidebar (`w-72` / `w-14`) with two-tab layout (Chats / Settings), navigation links, recent chat history (up to 12), model selector, temperature slider, and BYOK key management
+- **Mobile Chat Header** — Fixed top bar with menu button, Fixie branding, and active model badge
+- **Mobile Chat Drawer** — Sheet-based mobile drawer mirroring the desktop sidebar's two-tab structure
+- **Chat Layout & SEO** — Dedicated layout with metadata, Open Graph tags, Twitter image, and canonical URL for `/chat`
+- **Chat Persistence** — Chats auto-save to localStorage with deduplication, active chat restoration on page load, and custom events (`chatsUpdated`, `activeChatChanged`, `byokChanged`) for cross-component sync
+
+#### Game References
+
+- **Vehicle Models** (`/game-references/vehicle-models`) — Searchable reference page for all GTA V vehicle models with category filtering and pagination
+- **Vehicle Colours** (`/game-references/vehicle-colours`) — Searchable reference page for vehicle colours with type filtering and pagination
+- **Vehicle Flags** (`/game-references/vehicle-flags`) — Searchable reference page for vehicle flags with pagination
+
+#### Navigation
+
+- **NAV_LINKS Consistency** — Added Game References, Validator, Hosting, and Chat to the global `NAV_LINKS` constant so all sidebars and navigation menus share the same link set
+
+### Changed
+
+#### Fixie AI Chat
+
+- **Tabbed Sidebar Layout** — Desktop sidebar uses a two-tab design (Chats / Settings) to separate navigation and chat history from model configuration and API keys, preventing clutter as chat history grows
+- **Wider Chat Area** — Message area and input widened from `max-w-5xl` to `max-w-7xl` so conversations use more screen real estate on large displays
+- **Collapsed Sidebar** — Collapsed state shows icon-only navigation links with tooltips, plus History and Settings expand buttons separated by a divider
+
+### Fixed
+
+#### Fixie AI Chat
+
+- **Encoding Artifacts** — Fixed garbled text in sidebar (`·` → `·`, `â€"` → `—`) caused by previous encoding issue
+
+---
+
 ## [1.3.0] - 2026-03-04
 
 ### Added

app/api/chat/route.ts

@@ -1,20 +1,59 @@
-import { anthropic } from "@ai-sdk/anthropic";
-import { google } from "@ai-sdk/google";
-import { openai } from "@ai-sdk/openai";
+import { createAnthropic } from "@ai-sdk/anthropic";
+import { createGoogleGenerativeAI } from "@ai-sdk/google";
+import { createOpenAI, openai } from "@ai-sdk/openai";
 import { geolocation, ipAddress } from "@vercel/functions";
 import { convertToCoreMessages, streamText } from "ai";
 import { z } from "zod";
 
 export const maxDuration = 30;
 
+const ALLOWED_MODELS = new Set([
+  "gpt-4o",
+  "gpt-4o-mini",
+  "gpt-4-turbo",
+  "gpt-3.5-turbo",
+  "gemini-2.0-flash",
+  "gemini-1.5-flash",
+  "claude-3-5-sonnet",
+  "claude-3-haiku",
+]);
+
+interface ByokKeys {
+  openai?: string;
+  anthropic?: string;
+  google?: string;
+}
+
 export async function POST(req: Request) {
   const {
     messages,
     model = "gpt-4o-mini",
     temperature = 0.7,
-  } = await req.json();
+    byok,
+  }: { messages: any[]; model: string; temperature: number; byok?: ByokKeys } =
+    await req.json();
+
+  // Validate model to prevent arbitrary model injection
+  if (!ALLOWED_MODELS.has(model)) {
+    return new Response(JSON.stringify({ error: "Invalid model" }), {
+      status: 400,
+    });
+  }
+
   const { city, latitude, longitude } = geolocation(req);
-  const ip = ipAddress(req);
+  // NOTE: byok keys are intentionally never logged
+  void ipAddress(req);
+
+  // Build provider instances — use BYOK key if provided, fall back to server env key
+  const openaiProvider = (byok?.openai?.trim())
+    ? createOpenAI({ apiKey: byok.openai.trim() })
+    : openai;
+  const anthropicProvider = createAnthropic({
+    apiKey: byok?.anthropic?.trim() || process.env.ANTHROPIC_API_KEY || "",
+  });
+  const googleProvider = createGoogleGenerativeAI({
+    apiKey: byok?.google?.trim() || process.env.GOOGLE_GENERATIVE_AI_API_KEY || "",
+  });
 
   const system = `You are Fixie, a specialized assistant for everything CitizenFX.
 
@@ -87,51 +126,46 @@ You should NOT:
 The user's current location is ${city} at latitude ${latitude} and longitude ${longitude}.
 Today's date and day is ${new Date().toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" })}.`;
 
-  console.log({ messages, model, temperature });
+  console.log({ model, temperature });
+
+  const geminiSafetySettings = [
+    { category: "HARM_CATEGORY_HARASSMENT", threshold: "BLOCK_NONE" },
+    { category: "HARM_CATEGORY_HATE_SPEECH", threshold: "BLOCK_NONE" },
+    { category: "HARM_CATEGORY_SEXUALLY_EXPLICIT", threshold: "BLOCK_NONE" },
+    { category: "HARM_CATEGORY_DANGEROUS_CONTENT", threshold: "BLOCK_NONE" },
+  ] as const;
 
   let selectedModel;
   if (model === "gpt-4o") {
-    selectedModel = openai("gpt-4o");
+    selectedModel = openaiProvider("gpt-4o");
   } else if (model === "gpt-4o-mini") {
-    selectedModel = openai("gpt-4o-mini");
+    selectedModel = openaiProvider("gpt-4o-mini");
   } else if (model === "gpt-4-turbo") {
-    selectedModel = openai("gpt-4-turbo");
+    selectedModel = openaiProvider("gpt-4-turbo");
   } else if (model === "gpt-3.5-turbo") {
-    selectedModel = openai("gpt-3.5-turbo");
+    selectedModel = openaiProvider("gpt-3.5-turbo");
+  } else if (model === "gemini-2.0-flash") {
+    selectedModel = googleProvider("gemini-2.0-flash", {
+      safetySettings: geminiSafetySettings,
+    });
   } else if (model === "gemini-1.5-flash") {
-    selectedModel = google("models/gemini-1.5-flash-latest", {
-      safetySettings: [
-        {
-          category: "HARM_CATEGORY_HARASSMENT",
-          threshold: "BLOCK_NONE",
-        },
-        {
-          category: "HARM_CATEGORY_HATE_SPEECH",
-          threshold: "BLOCK_NONE",
-        },
-        {
-          category: "HARM_CATEGORY_SEXUALLY_EXPLICIT",
-          threshold: "BLOCK_NONE",
-        },
-        {
-          category: "HARM_CATEGORY_DANGEROUS_CONTENT",
-          threshold: "BLOCK_NONE",
-        },
-      ],
+    selectedModel = googleProvider("gemini-1.5-flash-latest", {
+      safetySettings: geminiSafetySettings,
     });
+  } else if (model === "claude-3-5-sonnet") {
+    selectedModel = anthropicProvider("claude-3-5-sonnet-20241022");
   } else if (model === "claude-3-haiku") {
-    selectedModel = anthropic("claude-3-haiku-20240307");
+    selectedModel = anthropicProvider("claude-3-haiku-20240307");
   } else {
-    // Default to GPT-4o mini as fallback
-    selectedModel = openai("gpt-4o-mini");
+    selectedModel = openaiProvider("gpt-4o-mini");
   }
 
   const result = await streamText({
     model: selectedModel,
     messages: convertToCoreMessages(messages),
     temperature,
     system,
-    maxTokens: 1000,
+    maxTokens: 4096,
     experimental_toolCallStreaming: true,
     tools: {
       weatherTool: {
@@ -155,12 +189,10 @@ Today's date and day is ${new Date().toLocaleDateString("en-US", { weekday: "lon
           latitude: number;
           longitude: number;
         }) => {
-          console.log(latitude, longitude);
           const response = await fetch(
             `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current=temperature_2m,apparent_temperature,rain`,
           );
           const data = await response.json();
-          console.log(data);
           return {
             temperature: data.current.temperature_2m,
             apparentTemperature: data.current.apparent_temperature,
@@ -197,9 +229,7 @@ Today's date and day is ${new Date().toLocaleDateString("en-US", { weekday: "lon
           const apiKey = process.env.TAVILY_API_KEY;
           const response = await fetch("https://api.tavily.com/search", {
             method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
+            headers: { "Content-Type": "application/json" },
             body: JSON.stringify({
               api_key: apiKey,
               query,
@@ -210,12 +240,12 @@ Today's date and day is ${new Date().toLocaleDateString("en-US", { weekday: "lon
             }),
           });
           const data = await response.json();
-          let context = data.results.map(
+          const context = data.results.map(
             (obj: {
-              url: any;
-              content: any;
-              title: any;
-              raw_content: any;
+              url: string;
+              content: string;
+              title: string;
+              raw_content: string;
             }) => ({
               url: obj.url,
               title: obj.title,
@@ -238,16 +268,12 @@ Today's date and day is ${new Date().toLocaleDateString("en-US", { weekday: "lon
         }),
         execute: async ({ code }) => {
           code = code.replace(/\\n/g, "\n").replace(/\\/g, "");
-          console.log(code);
           const response = await fetch("https://interpreter.za16.co", {
             method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
+            headers: { "Content-Type": "application/json" },
             body: JSON.stringify({ code }),
           });
           const data = await response.json();
-          console.log(data.std_out);
           return {
             output: data.std_out,
             error: data.error,
@@ -263,3 +289,4 @@ Today's date and day is ${new Date().toLocaleDateString("en-US", { weekday: "lon
 
   return result.toAIStreamResponse();
 }
+

app/chat/page.tsx

@@ -125,14 +125,6 @@ export default function AskPage() {
 
   return (
     <div className="relative flex min-h-screen h-screen bg-fd-background overflow-hidden">
-      {/* Ambient background */}
-      <div className="absolute inset-0 -z-10 pointer-events-none overflow-hidden">
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(88,101,242,0.08),rgba(255,255,255,0))]" />
-        <div className="absolute -left-20 -top-20 h-64 w-64 animate-pulse rounded-full bg-[#5865F2]/10 blur-[100px]" />
-        <div className="absolute -bottom-20 -right-20 h-64 w-64 animate-pulse rounded-full bg-[#10B981]/10 blur-[100px]" />
-        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-96 w-96 rounded-full bg-[#5865F2]/5 blur-[150px]" />
-      </div>
-
       {/* Desktop layout */}
       <div className="hidden md:flex w-full h-full">
         <ChatSidebar

app/game-references/_components/page-shell.tsx

@@ -182,13 +182,15 @@ interface ReferenceFilterChipsProps {
     options: string[];
     value: string;
     onChange: (v: string) => void;
+    formatLabel?: (opt: string) => string;
 }
 
 export function ReferenceFilterChips({
     allLabel = "All",
     options,
     value,
     onChange,
+    formatLabel,
 }: ReferenceFilterChipsProps) {
     if (options.length === 0) return null;
     return (
@@ -207,7 +209,7 @@ export function ReferenceFilterChips({
                     size="sm"
                     onClick={() => onChange(opt)}
                 >
-                    {opt}
+                    {formatLabel ? formatLabel(opt) : opt}
                 </Button>
             ))}
         </div>

app/game-references/page.tsx

@@ -17,6 +17,9 @@ import {
     ArrowRight,
     BookOpen,
     Database,
+    Car,
+    PaintBucket,
+    Flag,
 } from "lucide-react";
 import { useFetch } from "@core/useFetch";
 import { API_URL } from "@/packages/utils/src/constants/link";
@@ -130,6 +133,33 @@ const REFERENCES = [
         iconColor: "text-teal-500",
         tag: "zones",
     },
+    {
+        slug: "vehicle-models",
+        label: "Vehicle Models",
+        description: "All GTA V / FiveM vehicle model names with hashes, organised by category.",
+        icon: Car,
+        color: "from-blue-500/20 to-blue-600/5 border-blue-500/20",
+        iconColor: "text-blue-500",
+        tag: "vehicle-models",
+    },
+    {
+        slug: "vehicle-colours",
+        label: "Vehicle Colours",
+        description: "All vehicle paint colour indices grouped by type — metallic, matte, metals, and unnamed.",
+        icon: PaintBucket,
+        color: "from-orange-500/20 to-orange-600/5 border-orange-500/20",
+        iconColor: "text-orange-500",
+        tag: "vehicle-colours",
+    },
+    {
+        slug: "vehicle-flags",
+        label: "Vehicle Flags",
+        description: "All vehicle flag definitions with descriptions and the build version they were introduced in.",
+        icon: Flag,
+        color: "from-red-500/20 to-red-600/5 border-red-500/20",
+        iconColor: "text-red-500",
+        tag: "vehicle-flags",
+    },
 ];
 
 interface SummaryData {