12 | {/* Sidebar */}
13 | {sidebar}
14 |
15 | {/* Main Content - shifts left when sidebar collapses */}
16 |
20 | {children}
21 |
22 |
23 | );
24 | };
25 |
26 | export default MainLayout;
27 |
--------------------------------------------------------------------------------
/frontend/src/components/ui/ErrorBanner.jsx:
--------------------------------------------------------------------------------
1 | const ErrorBanner = ({ message, className = "" }) => {
2 | if (!message) return null;
3 |
4 | const getMessageText = (value) => {
5 | if (!value) return "";
6 | if (typeof value === "string") return value;
7 | if (value instanceof Error && typeof value.message === "string") return value.message;
8 | if (typeof value === "object") {
9 | if (typeof value.message === "string") return value.message;
10 | if (typeof value.error === "string") return value.error;
11 | if (value.error && typeof value.error.message === "string") return value.error.message;
12 | }
13 |
14 | try {
15 | return String(value);
16 | } catch {
17 | return "An unexpected error occurred.";
18 | }
19 | };
20 |
21 | const text = getMessageText(message);
22 | if (!text) return null;
23 |
24 | return (
25 |
26 | {text}
27 |
28 | );
29 | };
30 |
31 | export default ErrorBanner;
32 |
--------------------------------------------------------------------------------
/frontend/src/components/ui/ToolbarGroup.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * ToolbarGroup - Shared backdrop pill for grouping icon buttons
3 | *
4 | * Provides consistent visual styling for toolbar button clusters.
5 | * Children should be icon buttons with the toolbar button styling.
6 | */
7 | export const ToolbarGroup = ({ children, className = "" }) => (
8 |
9 |
10 | {children}
11 |
12 | );
13 |
14 | /**
15 | * ToolbarButton - Consistent icon button styling for use within ToolbarGroup
16 | */
17 | export const ToolbarButton = ({ onClick, title, children, className = "" }) => (
18 |
24 | );
25 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2025 1337 Hero, LLC
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/frontend/src/utils/voice/errorHandler.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Voice error handling utilities
3 | */
4 |
5 | const IGNORED_ERRORS = ["aborted", "no-speech"];
6 |
7 | export const ERROR_TYPES = {
8 | RECOGNITION: "recognition",
9 | SYNTHESIS: "synthesis",
10 | MICROPHONE: "microphone",
11 | BROWSER_SUPPORT: "browser_support",
12 | };
13 |
14 | export const ERROR_MESSAGES = {
15 | MICROPHONE_ERROR: (error) => `Microphone error: ${error}`,
16 | MICROPHONE_START_FAILED: "Failed to start microphone",
17 | BROWSER_NOT_SUPPORTED: "Voice not supported in this browser",
18 | RECOGNITION_RESTART_FAILED: "Failed to restart speech recognition",
19 | };
20 |
21 | export const shouldReportError = (error) => {
22 | return !IGNORED_ERRORS.includes(error);
23 | };
24 |
25 | export const handleVoiceError = (error, type, callback) => {
26 | console.error(`[Voice ${type}]`, error);
27 |
28 | if (callback && shouldReportError(error)) {
29 | const message =
30 | type === ERROR_TYPES.RECOGNITION || type === ERROR_TYPES.MICROPHONE
31 | ? ERROR_MESSAGES.MICROPHONE_ERROR(error)
32 | : error;
33 | callback(message);
34 | }
35 | };
36 |
--------------------------------------------------------------------------------
/packages/shared/src/constants/files.js:
--------------------------------------------------------------------------------
1 | export const FILE_CONSTANTS = {
2 | MAX_FILE_SIZE_BYTES: 10 * 1024 * 1024,
3 | BYTES_PER_KB: 1024,
4 | MAX_FILENAME_LENGTH: 255,
5 | DEFAULT_FILENAME: "unnamed_file",
6 | ERROR_DISPLAY_DURATION_MS: 5000,
7 |
8 | MIME_IMAGE_JPEG: "image/jpeg",
9 | MIME_IMAGE_PNG: "image/png",
10 | MIME_IMAGE_GIF: "image/gif",
11 | MIME_IMAGE_WEBP: "image/webp",
12 | MIME_IMAGE_SVG: "image/svg+xml",
13 |
14 | MIME_PDF: "application/pdf",
15 | MIME_TEXT_PLAIN: "text/plain",
16 | MIME_TEXT_MARKDOWN: "text/markdown",
17 | MIME_TEXT_CSV: "text/csv",
18 |
19 | MIME_DOCX: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
20 | MIME_XLSX: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
21 | MIME_PPTX: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
22 |
23 | MIME_JSON: "application/json",
24 | MIME_JAVASCRIPT: "application/javascript",
25 | MIME_HTML: "text/html",
26 | MIME_CSS: "text/css",
27 | MIME_XML: "application/xml",
28 |
29 | MIME_DEFAULT: "application/octet-stream",
30 |
31 | SIZE_UNITS: ["Bytes", "KB", "MB", "GB"],
32 | };
33 |
--------------------------------------------------------------------------------
/frontend/src/components/ui/text.jsx:
--------------------------------------------------------------------------------
1 | import { clsx } from "@/lib/clsx";
2 | import { Link } from "./link";
3 |
4 | export const Text = ({ className, ...props }) => {
5 | return (
6 |
11 | );
12 | };
13 |
14 | export const TextLink = ({ className, ...props }) => {
15 | return (
16 |
23 | );
24 | };
25 |
26 | export const Strong = ({ className, ...props }) => {
27 | return ;
28 | };
29 |
30 | export const Code = ({ className, ...props }) => {
31 | return (
32 |
34 | 
{
39 | e.target.parentElement.style.display = "none";
40 | }}
41 | />
42 |
43 | );
44 | };
45 |
46 | export default ProviderLogo;
47 |
--------------------------------------------------------------------------------
/frontend/src/components/ui/Avatar.jsx:
--------------------------------------------------------------------------------
1 | import { clsx } from "clsx";
2 |
3 | const borderVariants = {
4 | none: "border-0",
5 | visible: "border-2 border-theme-lavender",
6 | };
7 |
8 | const backgroundVariants = {
9 | strong: "bg-theme-canvas-strong",
10 | subtle: "bg-theme-canvas-alt",
11 | base: "bg-theme-canvas",
12 | };
13 |
14 | const sizeVariants = {
15 | small: "h-9 w-9 text-md",
16 | medium: "h-12 w-12 text-xl",
17 | large: "h-16 w-16 text-2xl",
18 | };
19 |
20 | export const Avatar = ({
21 | src,
22 | name,
23 | border = "visible",
24 | background = "subtle",
25 | size = "medium",
26 | ...props
27 | }) => {
28 | let initial = null;
29 | let last = null;
30 |
31 | if (name) {
32 | const split = name.split(" ");
33 | initial = split[0]?.slice(0, 1);
34 |
35 | if (split.length > 1) {
36 | last = split[split.length - 1]?.slice(0, 1);
37 | }
38 | }
39 |
40 | return (
41 |
49 | {src ? (
50 |
54 | ) : (
55 |
56 | {initial?.toUpperCase()}
57 | {last?.toUpperCase()}
58 |
59 | )}
60 |
61 | );
62 | };
63 |
--------------------------------------------------------------------------------
/frontend/src/components/chat/VoiceStatusIndicator.jsx:
--------------------------------------------------------------------------------
1 | import { Settings } from "lucide-preact";
2 | import { VOICE_STATE_CONFIG } from "@/constants/voiceStateConfig";
3 |
4 | /**
5 | * Voice Status Indicator
6 | *
7 | * Shows current voice conversation state with visual feedback.
8 | * Clickable to open voice settings modal.
9 | */
10 | const VoiceStatusIndicator = ({ voiceControls, onOpenSettings }) => {
11 | if (!voiceControls.isActive) return null;
12 |
13 | const stateInfo = VOICE_STATE_CONFIG[voiceControls.currentState];
14 | if (!stateInfo) return null;
15 |
16 | const Icon = stateInfo.icon;
17 |
18 | return (
19 |
39 | );
40 | };
41 |
42 | export default VoiceStatusIndicator;
43 |
--------------------------------------------------------------------------------
/frontend/vite.config.js:
--------------------------------------------------------------------------------
1 | import preact from "@preact/preset-vite";
2 | import tailwindcss from "@tailwindcss/vite";
3 | import path from "path";
4 | import { fileURLToPath } from "url";
5 | import { defineConfig } from "vite";
6 |
7 | const __dirname = path.dirname(fileURLToPath(import.meta.url));
8 |
9 | export default defineConfig({
10 | plugins: [
11 | preact(),
12 | tailwindcss({
13 | config: {
14 | theme: {
15 | extend: {
16 | fontFamily: {
17 | mono: ["JetBrains Mono", "monospace"],
18 | sans: ["Sora", "sans-serif"],
19 | },
20 | transitionTimingFunction: {
21 | // T3 Chat's snappy easing - fast start, quick settle
22 | snappy: "cubic-bezier(.2, .4, .1, .95)",
23 | },
24 | },
25 | },
26 | },
27 | }),
28 | ],
29 |
30 | // Custom CSS Configuration
31 | css: {
32 | devSourcemap: true,
33 | },
34 |
35 | // Custom Alias and Extensions
36 | resolve: {
37 | alias: {
38 | "@": path.resolve(__dirname, "./src"),
39 | // Map React to Preact for compatibility
40 | react: "@preact/compat",
41 | "react-dom": "@preact/compat",
42 | "react/jsx-runtime": "@preact/compat/jsx-runtime",
43 | },
44 | extensions: [".js", ".jsx"],
45 | },
46 |
47 | // Server Configuration
48 | server: {
49 | port: 3000,
50 | proxy: {
51 | "/api": {
52 | target: "http://localhost:3001",
53 | changeOrigin: true,
54 | },
55 | },
56 | },
57 | optimizeDeps: {
58 | include: ["@preact/compat"],
59 | },
60 | });
61 |
--------------------------------------------------------------------------------
/frontend/src/state/useUiState.js:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 | import { persist } from "zustand/middleware";
3 |
4 | export const useUiState = create(
5 | persist(
6 | (set) => ({
7 | sidebarOpen: true,
8 | sidebarCollapsed: false,
9 | preferredModel: "claude-sonnet-4-5",
10 | preferredImageModel: null,
11 | theme: "dark",
12 | autoScroll: true,
13 | imageMode: false,
14 |
15 | setSidebarOpen: (isOpen) => set({ sidebarOpen: isOpen }),
16 | toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
17 | setSidebarCollapsed: (isCollapsed) => set({ sidebarCollapsed: isCollapsed }),
18 | toggleSidebarCollapse: () => set((state) => ({ sidebarCollapsed: !state.sidebarCollapsed })),
19 | setPreferredModel: (modelId) => set({ preferredModel: modelId }),
20 | setPreferredImageModel: (modelId) => set({ preferredImageModel: modelId }),
21 | toggleTheme: () => set((state) => ({ theme: state.theme === "light" ? "dark" : "light" })),
22 | setAutoScroll: (enabled) => set({ autoScroll: enabled }),
23 | setImageMode: (enabled) => set({ imageMode: enabled }),
24 | toggleImageMode: () => set((state) => ({ imageMode: !state.imageMode })),
25 | }),
26 | {
27 | name: "ui-state",
28 | partialize: (state) => ({
29 | sidebarOpen: state.sidebarOpen,
30 | sidebarCollapsed: state.sidebarCollapsed,
31 | preferredModel: state.preferredModel,
32 | preferredImageModel: state.preferredImageModel,
33 | theme: state.theme,
34 | autoScroll: state.autoScroll,
35 | }),
36 | }
37 | )
38 | );
39 |
--------------------------------------------------------------------------------
/packages/shared/src/constants/settings.js:
--------------------------------------------------------------------------------
1 | /**
2 | * App Settings Constants
3 | *
4 | * Centralized definition of app settings defaults and logo icons.
5 | * Used across frontend (CustomizeTab, Sidebar) and backend (validation).
6 | */
7 |
8 | // Logo icon names in display order
9 | export const LOGO_ICON_NAMES = [
10 | "Zap",
11 | "Rocket",
12 | "Sparkles",
13 | "Bot",
14 | "Cpu",
15 | "Terminal",
16 | "Code",
17 | "Braces",
18 | "MessageSquare",
19 | "MessagesSquare",
20 | "Send",
21 | "Mail",
22 | "AtSign",
23 | "Circle",
24 | "Square",
25 | "Triangle",
26 | "Hexagon",
27 | "Star",
28 | "Heart",
29 | "Diamond",
30 | "Flame",
31 | "Sun",
32 | "Moon",
33 | "Cloud",
34 | "Leaf",
35 | "Mountain",
36 | "Ghost",
37 | "Smile",
38 | "Trophy",
39 | "ChessKnight",
40 | "ChessQueen",
41 | "Atom",
42 | "BadgeDollarSign",
43 | "Bookmark",
44 | "Cat",
45 | "Dog",
46 | "Fish",
47 | "Coffee",
48 | "Pizza",
49 | "IceCream",
50 | "Gem",
51 | "Command",
52 | "Hash",
53 | "Flag",
54 | "Pin",
55 | "Home",
56 | "Library",
57 | "Cherry",
58 | "Sprout",
59 | "Sword"
60 | ];
61 |
62 | // Default app settings
63 | export const DEFAULT_APP_SETTINGS = {
64 | appName: "Faster Chat",
65 | logoIcon: "Zap",
66 | };
67 |
68 | /**
69 | * Normalize settings with defaults
70 | * @param {Object} settings - Raw settings from API or DB
71 | * @returns {Object} Settings with defaults applied
72 | */
73 | export const normalizeAppSettings = (settings = {}) => ({
74 | appName: settings.appName || DEFAULT_APP_SETTINGS.appName,
75 | logoIcon: settings.logoIcon || DEFAULT_APP_SETTINGS.logoIcon,
76 | });
77 |
--------------------------------------------------------------------------------
/frontend/src/hooks/useImageGeneration.js:
--------------------------------------------------------------------------------
1 | import { IMAGE_GENERATION } from "@faster-chat/shared";
2 | import { useMutation, useQuery } from "@tanstack/react-query";
3 |
4 | const API_BASE = import.meta.env.DEV ? "http://localhost:3001" : "";
5 |
6 | async function generateImage({
7 | prompt,
8 | aspectRatio = IMAGE_GENERATION.DEFAULT_ASPECT_RATIO,
9 | chatId,
10 | model,
11 | }) {
12 | const response = await fetch(`${API_BASE}/api/images/generate`, {
13 | method: "POST",
14 | credentials: "include",
15 | headers: { "Content-Type": "application/json" },
16 | body: JSON.stringify({ prompt, aspectRatio, chatId, modelId: model }),
17 | });
18 |
19 | const data = await response.json();
20 |
21 | if (!response.ok) {
22 | throw new Error(data.error || "Image generation failed");
23 | }
24 |
25 | return data;
26 | }
27 |
28 | async function fetchImageStatus() {
29 | const response = await fetch(`${API_BASE}/api/images/status`, {
30 | credentials: "include",
31 | });
32 | return response.json();
33 | }
34 |
35 | export function useImageGeneration({ onSuccess, onError } = {}) {
36 | const mutation = useMutation({
37 | mutationFn: generateImage,
38 | onSuccess,
39 | onError,
40 | });
41 |
42 | return {
43 | generate: mutation.mutate,
44 | generateAsync: mutation.mutateAsync,
45 | isGenerating: mutation.isPending,
46 | error: mutation.error,
47 | data: mutation.data,
48 | reset: mutation.reset,
49 | };
50 | }
51 |
52 | export function useImageStatus() {
53 | return useQuery({
54 | queryKey: ["image-status"],
55 | queryFn: fetchImageStatus,
56 | staleTime: 5 * 60 * 1000,
57 | });
58 | }
59 |
--------------------------------------------------------------------------------
/frontend/src/components/ui/Radio.jsx:
--------------------------------------------------------------------------------
1 | import { useId } from "preact/hooks";
2 | import { clsx } from "clsx";
3 |
4 | export const Radio = ({ color = "blue", label, disabled = false, ...props }) => {
5 | const id = useId();
6 |
7 | return (
8 |
9 |
40 |
41 | {label && (
42 |
45 | )}
46 |
47 | );
48 | };
49 |
--------------------------------------------------------------------------------
/frontend/src/hooks/useChatVoice.js:
--------------------------------------------------------------------------------
1 | import { useVoice } from "@/hooks/useVoice";
2 | import { showErrorToast } from "@/lib/errorHandler";
3 | import { extractTextContent, hasTextContent } from "@/utils/message/messageUtils";
4 | import { useLayoutEffect, useRef } from "preact/hooks";
5 |
6 | const shouldSpeakMessage = (message, lastSpokenId) => {
7 | if (!message) return false;
8 | const isAssistantMessage = message.role === "assistant";
9 | const notAlreadySpoken = lastSpokenId !== message.id;
10 | return isAssistantMessage && hasTextContent(message) && notAlreadySpoken;
11 | };
12 |
13 | export function useChatVoice({ messages, isLoading, setInput, submitMessage }) {
14 | const lastSpokenMessageRef = useRef(null);
15 |
16 | const voice = useVoice({
17 | onSpeechResult: async (transcript) => {
18 | setInput(transcript);
19 | await submitMessage({ content: transcript });
20 | },
21 | onError: (error) => {
22 | console.error("Voice error:", error);
23 | showErrorToast(error);
24 | },
25 | });
26 |
27 | useLayoutEffect(() => {
28 | if (!voice.isActive || messages.length === 0 || isLoading) return;
29 |
30 | const lastMessage = messages[messages.length - 1];
31 | if (!shouldSpeakMessage(lastMessage, lastSpokenMessageRef.current)) return;
32 |
33 | const content = extractTextContent(lastMessage);
34 | lastSpokenMessageRef.current = lastMessage.id;
35 |
36 | // Check processing state but don't depend on it - we care about new messages, not state changes
37 | if (voice.isProcessing) {
38 | voice.completeProcessing();
39 | }
40 |
41 | voice.speakStream(content);
42 | }, [messages, voice.isActive, isLoading]);
43 |
44 | return { voice };
45 | }
46 |
--------------------------------------------------------------------------------
/frontend/src/hooks/voice/useVoiceSelection.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "preact/hooks";
2 | import { VOICE_CONSTANTS } from "@faster-chat/shared";
3 |
4 | const selectDefaultVoice = (voices, savedVoiceName) => {
5 | const savedVoice = voices.find((v) => v.name === savedVoiceName);
6 | if (savedVoice) return savedVoice;
7 |
8 | const englishVoice = voices.find((v) =>
9 | v.lang.startsWith(VOICE_CONSTANTS.DEFAULT_LANGUAGE_PREFIX)
10 | );
11 | if (englishVoice) return englishVoice;
12 |
13 | return voices[0]; // First available as fallback
14 | };
15 |
16 | export function useVoiceSelection() {
17 | const [availableVoices, setAvailableVoices] = useState([]);
18 | const [selectedVoice, setSelectedVoice] = useState(null);
19 |
20 | useEffect(() => {
21 | const loadVoices = () => {
22 | const voices = window.speechSynthesis.getVoices();
23 | if (voices.length === 0) return;
24 |
25 | setAvailableVoices(voices);
26 |
27 | const savedVoiceName = localStorage.getItem(VOICE_CONSTANTS.STORAGE_KEY_VOICE);
28 | setSelectedVoice(selectDefaultVoice(voices, savedVoiceName));
29 | };
30 |
31 | if (window.speechSynthesis.onvoiceschanged !== undefined) {
32 | window.speechSynthesis.onvoiceschanged = loadVoices;
33 | }
34 | loadVoices();
35 |
36 | return () => {
37 | window.speechSynthesis.onvoiceschanged = null;
38 | };
39 | }, []);
40 |
41 | const changeVoice = (voice) => {
42 | setSelectedVoice(voice);
43 | localStorage.setItem(VOICE_CONSTANTS.STORAGE_KEY_VOICE, voice.name);
44 | localStorage.setItem(VOICE_CONSTANTS.STORAGE_KEY_LANGUAGE, voice.lang);
45 | };
46 |
47 | return {
48 | availableVoices,
49 | selectedVoice,
50 | changeVoice,
51 | };
52 | }
53 |
--------------------------------------------------------------------------------
/frontend/src/hooks/useChatActions.js:
--------------------------------------------------------------------------------
1 | import { toast } from "sonner";
2 | import {
3 | usePinChatMutation,
4 | useUnpinChatMutation,
5 | useArchiveChatMutation,
6 | useDeleteChatMutation,
7 | useUpdateChatMutation,
8 | } from "@/hooks/useChatsQuery";
9 |
10 | export const useChatActions = () => {
11 | const pinChatMutation = usePinChatMutation();
12 | const unpinChatMutation = useUnpinChatMutation();
13 | const archiveChatMutation = useArchiveChatMutation();
14 | const deleteChatMutation = useDeleteChatMutation();
15 | const updateChatMutation = useUpdateChatMutation();
16 |
17 | const handlePin = async (chatId) => {
18 | await pinChatMutation.mutateAsync(chatId);
19 | toast.success("Chat pinned");
20 | };
21 |
22 | const handleUnpin = async (chatId) => {
23 | await unpinChatMutation.mutateAsync(chatId);
24 | toast.success("Chat unpinned");
25 | };
26 |
27 | const handleArchive = async (chatId) => {
28 | await archiveChatMutation.mutateAsync(chatId);
29 | toast.success("Chat archived");
30 | };
31 |
32 | const handleDelete = async (chatId) => {
33 | if (!confirm("Delete this chat?")) return;
34 | await deleteChatMutation.mutateAsync(chatId);
35 | toast.success("Chat deleted");
36 | };
37 |
38 | const handleRename = async (chatId, chats) => {
39 | const chat = chats?.find((c) => c.id === chatId);
40 | if (!chat) return;
41 |
42 | const newName = prompt("Rename chat:", chat.title || "");
43 | if (newName !== null && newName.trim() && newName.trim() !== chat.title) {
44 | await updateChatMutation.mutateAsync({ chatId, updates: { title: newName.trim() } });
45 | toast.success("Chat renamed");
46 | }
47 | };
48 |
49 | return {
50 | handlePin,
51 | handleUnpin,
52 | handleArchive,
53 | handleDelete,
54 | handleRename,
55 | };
56 | };
57 |
--------------------------------------------------------------------------------
/frontend/src/components/ui/Modal.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from "preact/hooks";
2 |
3 | const Modal = ({ isOpen, onClose, title, children }) => {
4 | useEffect(() => {
5 | if (!isOpen) return;
6 |
7 | const handleEscape = (e) => {
8 | if (e.key === "Escape") onClose();
9 | };
10 |
11 | document.addEventListener("keydown", handleEscape);
12 | // Prevent body scroll when modal is open
13 | document.body.style.overflow = "hidden";
14 |
15 | return () => {
16 | document.removeEventListener("keydown", handleEscape);
17 | document.body.style.overflow = "";
18 | };
19 | }, [isOpen]);
20 |
21 | if (!isOpen) return null;
22 |
23 | return (
24 |
25 | {/* Backdrop */}
26 |
27 |
28 | {/* Modal */}
29 |
51 | );
52 | };
53 |
54 | export default Modal;
55 |
--------------------------------------------------------------------------------
/frontend/src/lib/messageUtils.js:
--------------------------------------------------------------------------------
1 | import { MESSAGE_CONSTANTS } from "@faster-chat/shared";
2 |
3 | /**
4 | * Get timestamp from a message, handling both camelCase and snake_case formats
5 | * @param {object} message - Message object
6 | * @param {*} defaultValue - Default value if no timestamp found (default: Date.now())
7 | * @returns {number} Timestamp value
8 | */
9 | export function getMessageTimestamp(message, defaultValue = Date.now()) {
10 | return message.createdAt ?? message.created_at ?? defaultValue;
11 | }
12 |
13 | export function ensureTimestamp(message, timestampsRef) {
14 | const existing = getMessageTimestamp(message, null);
15 | if (existing) {
16 | if (message.id && timestampsRef) {
17 | timestampsRef.current.set(message.id, existing);
18 | }
19 | return { ...message, createdAt: existing };
20 | }
21 |
22 | if (message.id && timestampsRef?.current?.has(message.id)) {
23 | return { ...message, createdAt: timestampsRef.current.get(message.id) };
24 | }
25 |
26 | const now = Date.now();
27 | if (message.id && timestampsRef) {
28 | timestampsRef.current.set(message.id, now);
29 | }
30 | return { ...message, createdAt: now };
31 | }
32 |
33 | export function deduplicateMessages(messages) {
34 | const seenIds = new Set();
35 | const seenContentWindow = new Map();
36 |
37 | return messages.filter((msg) => {
38 | const content = msg.parts?.map((p) => p.text).join("") || "";
39 | const timestamp = getMessageTimestamp(msg);
40 | const bucket = Math.floor(timestamp / MESSAGE_CONSTANTS.DEDUPLICATION_WINDOW_MS);
41 | const contentKey = `${msg.role}:${content}:${bucket}`;
42 |
43 | if (msg.id && seenIds.has(msg.id)) return false;
44 | if (seenContentWindow.has(contentKey)) return false;
45 |
46 | if (msg.id) seenIds.add(msg.id);
47 | seenContentWindow.set(contentKey, true);
48 | return true;
49 | });
50 | }
51 |
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | # syntax=docker/dockerfile:1.7
2 |
3 | # Builder stage - use Bun (Alpine) to install and build
4 | FROM oven/bun:1.3-alpine AS builder
5 | WORKDIR /app
6 |
7 | COPY . .
8 |
9 | # Install dependencies and build frontend
10 | RUN bun install --frozen-lockfile && bun run build:frontend
11 |
12 | # Dependencies stage - install only production server deps
13 | FROM oven/bun:1.3-alpine AS deps
14 | WORKDIR /app
15 | ENV NODE_ENV=production
16 |
17 | COPY --from=builder /app/package.json ./package.json
18 | COPY --from=builder /app/bun.lock ./bun.lock
19 | COPY --from=builder /app/server ./server
20 | COPY --from=builder /app/packages ./packages
21 | COPY --from=builder /app/frontend/package.json ./frontend/package.json
22 |
23 | # Install only server + shared workspace production dependencies
24 | RUN bun install --frozen-lockfile --production --filter @faster-chat/server --filter @faster-chat/shared --no-save \
25 | && rm -rf /root/.bun/install/cache
26 |
27 | # Production image - lean Bun runtime on Alpine
28 | FROM oven/bun:1.3-alpine AS runner
29 | WORKDIR /app
30 |
31 | ENV NODE_ENV=production
32 | ENV PORT=1337
33 |
34 | # Copy built application
35 | COPY --from=deps /app/package.json ./package.json
36 | COPY --from=deps /app/bun.lock ./bun.lock
37 | COPY --from=deps /app/node_modules ./node_modules
38 | COPY --from=builder /app/packages ./packages
39 | COPY --from=builder /app/server ./server
40 | COPY --from=builder /app/frontend/dist ./frontend/dist
41 |
42 | # No native module rebuild needed - bun:sqlite is built-in! 🎉
43 |
44 | # Create data directory for SQLite database
45 | RUN mkdir -p /app/server/data
46 |
47 | # Persist SQLite data outside the container filesystem
48 | VOLUME /app/server/data
49 |
50 | EXPOSE 1337
51 |
52 | # Set working directory to server folder
53 | WORKDIR /app/server
54 |
55 | # Run with Bun runtime (native SQLite support)
56 | # Init script generates encryption key on first run
57 | CMD ["sh", "-c", "bun run src/init.js && bun run src/index.js"]
58 |
--------------------------------------------------------------------------------
/server/src/routes/settings.js:
--------------------------------------------------------------------------------
1 | import { Hono } from "hono";
2 | import { z } from "zod";
3 | import { dbUtils } from "../lib/db.js";
4 | import { ensureSession, requireRole } from "../middleware/auth.js";
5 | import { HTTP_STATUS } from "../lib/httpStatus.js";
6 | import { LOGO_ICON_NAMES, normalizeAppSettings, UI_CONSTANTS } from "@faster-chat/shared";
7 |
8 | export const settingsRouter = new Hono();
9 |
10 | // Validation schema for updating settings
11 | const UpdateSettingsSchema = z.object({
12 | appName: z.string().min(1).max(UI_CONSTANTS.APP_NAME_MAX_LENGTH).optional(),
13 | logoIcon: z.enum(LOGO_ICON_NAMES).optional(),
14 | });
15 |
16 | /**
17 | * GET /api/settings
18 | * Get all public settings (no auth required)
19 | */
20 | settingsRouter.get("/", async (c) => {
21 | try {
22 | const settings = dbUtils.getAllSettings();
23 | return c.json(normalizeAppSettings(settings));
24 | } catch (error) {
25 | console.error("Get settings error:", error);
26 | return c.json({ error: "Failed to get settings" }, HTTP_STATUS.INTERNAL_SERVER_ERROR);
27 | }
28 | });
29 |
30 | /**
31 | * PUT /api/settings
32 | * Update settings (admin only)
33 | */
34 | settingsRouter.put("/", ensureSession, requireRole("admin"), async (c) => {
35 | try {
36 | const body = await c.req.json();
37 | const updates = UpdateSettingsSchema.parse(body);
38 |
39 | if (Object.keys(updates).length === 0) {
40 | return c.json({ error: "No valid settings to update" }, HTTP_STATUS.BAD_REQUEST);
41 | }
42 |
43 | dbUtils.setSettings(updates);
44 |
45 | const settings = dbUtils.getAllSettings();
46 | return c.json(normalizeAppSettings(settings));
47 | } catch (error) {
48 | if (error instanceof z.ZodError) {
49 | return c.json({ error: "Invalid input", details: error.errors }, HTTP_STATUS.BAD_REQUEST);
50 | }
51 | console.error("Update settings error:", error);
52 | return c.json({ error: "Failed to update settings" }, HTTP_STATUS.INTERNAL_SERVER_ERROR);
53 | }
54 | });
55 |
--------------------------------------------------------------------------------
/frontend/public/themes/dracula.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "dracula",
3 | "name": "Dracula",
4 | "author": "Zeno Rocha",
5 | "colors": {
6 | "light": {
7 | "background": "#f8f8f2",
8 | "foreground": "#282a36",
9 | "primary": "#bd93f9",
10 | "secondary": "#e9e9e6",
11 | "accent": "#ff79c6",
12 | "muted": "#a0a0a0",
13 | "border": "#d4d4d0",
14 | "surface": "#f0f0ec",
15 | "surface-strong": "#e4e4e0",
16 | "surface-stronger": "#d4d4d0",
17 | "overlay": "#a0a0a0",
18 | "overlay-strong": "#888888",
19 | "text": "#282a36",
20 | "text-muted": "#44475a",
21 | "text-subtle": "#383a4a",
22 | "red": "#ff5555",
23 | "green": "#50fa7b",
24 | "yellow": "#f1fa8c",
25 | "blue": "#6272a4",
26 | "pink": "#ff79c6",
27 | "teal": "#8be9fd",
28 | "mauve": "#bd93f9",
29 | "peach": "#ffb86c",
30 | "sky": "#8be9fd",
31 | "lavender": "#bd93f9",
32 | "canvas": "#f8f8f2",
33 | "canvas-alt": "#f0f0ec",
34 | "canvas-strong": "#e4e4e0"
35 | },
36 | "dark": {
37 | "background": "#282a36",
38 | "foreground": "#f8f8f2",
39 | "primary": "#bd93f9",
40 | "secondary": "#44475a",
41 | "accent": "#ff79c6",
42 | "muted": "#6272a4",
43 | "border": "#44475a",
44 | "surface": "#343746",
45 | "surface-strong": "#44475a",
46 | "surface-stronger": "#545770",
47 | "overlay": "#6272a4",
48 | "overlay-strong": "#7c8aae",
49 | "text": "#f8f8f2",
50 | "text-muted": "#c0c0c0",
51 | "text-subtle": "#d8d8d8",
52 | "red": "#ff5555",
53 | "green": "#50fa7b",
54 | "yellow": "#f1fa8c",
55 | "blue": "#6272a4",
56 | "pink": "#ff79c6",
57 | "teal": "#8be9fd",
58 | "mauve": "#bd93f9",
59 | "peach": "#ffb86c",
60 | "sky": "#8be9fd",
61 | "lavender": "#bd93f9",
62 | "canvas": "#282a36",
63 | "canvas-alt": "#1e1f29",
64 | "canvas-strong": "#191a21"
65 | }
66 | }
67 | }
--------------------------------------------------------------------------------
/frontend/public/themes/gruvbox.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "gruvbox",
3 | "name": "Gruvbox",
4 | "author": "morhetz",
5 | "colors": {
6 | "light": {
7 | "background": "#fbf1c7",
8 | "foreground": "#3c3836",
9 | "primary": "#076678",
10 | "secondary": "#ebdbb2",
11 | "accent": "#b57614",
12 | "muted": "#7c6f64",
13 | "border": "#d5c4a1",
14 | "surface": "#ebdbb2",
15 | "surface-strong": "#d5c4a1",
16 | "surface-stronger": "#bdae93",
17 | "overlay": "#bdae93",
18 | "overlay-strong": "#a89984",
19 | "text": "#3c3836",
20 | "text-muted": "#504945",
21 | "text-subtle": "#665c54",
22 | "red": "#9d0006",
23 | "green": "#79740e",
24 | "yellow": "#b57614",
25 | "blue": "#076678",
26 | "pink": "#8f3f71",
27 | "teal": "#427b58",
28 | "mauve": "#8f3f71",
29 | "peach": "#af3a03",
30 | "sky": "#427b58",
31 | "lavender": "#076678",
32 | "canvas": "#fbf1c7",
33 | "canvas-alt": "#ebdbb2",
34 | "canvas-strong": "#ebdbb2"
35 | },
36 | "dark": {
37 | "background": "#282828",
38 | "foreground": "#fbf1c7",
39 | "primary": "#458588",
40 | "secondary": "#3c3836",
41 | "accent": "#d79921",
42 | "muted": "#928374",
43 | "border": "#504945",
44 | "surface": "#3c3836",
45 | "surface-strong": "#504945",
46 | "surface-stronger": "#665c54",
47 | "overlay": "#665c54",
48 | "overlay-strong": "#7c6f64",
49 | "text": "#fbf1c7",
50 | "text-muted": "#ebdbb2",
51 | "text-subtle": "#d5c4a1",
52 | "red": "#cc241d",
53 | "green": "#98971a",
54 | "yellow": "#d79921",
55 | "blue": "#458588",
56 | "pink": "#b16286",
57 | "teal": "#689d6a",
58 | "mauve": "#b16286",
59 | "peach": "#d65d0e",
60 | "sky": "#689d6a",
61 | "lavender": "#b16286",
62 | "canvas": "#282828",
63 | "canvas-alt": "#282828",
64 | "canvas-strong": "#282828"
65 | }
66 | }
67 | }
--------------------------------------------------------------------------------
/frontend/public/themes/kanagawa.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "kanagawa",
3 | "name": "Kanagawa",
4 | "author": "rebelot",
5 | "colors": {
6 | "light": {
7 | "background": "#dcd7ba",
8 | "foreground": "#545464",
9 | "primary": "#6a9589",
10 | "secondary": "#d8d2b7",
11 | "accent": "#836f9f",
12 | "muted": "#ada493",
13 | "border": "#d8d2b7",
14 | "surface": "#d8d2b7",
15 | "surface-strong": "#cecab4",
16 | "surface-stronger": "#c4c0ae",
17 | "overlay": "#ada493",
18 | "overlay-strong": "#9d9483",
19 | "text": "#545464",
20 | "text-muted": "#646474",
21 | "text-subtle": "#444454",
22 | "red": "#c54752",
23 | "green": "#6a9589",
24 | "yellow": "#a06e5c",
25 | "blue": "#5a7797",
26 | "pink": "#836f9f",
27 | "teal": "#6a9589",
28 | "mauve": "#836f9f",
29 | "peach": "#a06e5c",
30 | "sky": "#5a7797",
31 | "lavender": "#836f9f",
32 | "canvas": "#dcd7ba",
33 | "canvas-alt": "#dcd7ba",
34 | "canvas-strong": "#dcd7ba"
35 | },
36 | "dark": {
37 | "background": "#1f1f28",
38 | "foreground": "#dcd7ba",
39 | "primary": "#7e9cd8",
40 | "secondary": "#282832",
41 | "accent": "#957fb8",
42 | "muted": "#727169",
43 | "border": "#282832",
44 | "surface": "#282832",
45 | "surface-strong": "#3f3f4c",
46 | "surface-stronger": "#505064",
47 | "overlay": "#727169",
48 | "overlay-strong": "#9e9b90",
49 | "text": "#dcd7ba",
50 | "text-muted": "#c8c093",
51 | "text-subtle": "#b2a988",
52 | "red": "#c34043",
53 | "green": "#76946a",
54 | "yellow": "#c0a36e",
55 | "blue": "#7e9cd8",
56 | "pink": "#957fb8",
57 | "teal": "#6a9589",
58 | "mauve": "#957fb8",
59 | "peach": "#c0a36e",
60 | "sky": "#7e9cd8",
61 | "lavender": "#957fb8",
62 | "canvas": "#1f1f28",
63 | "canvas-alt": "#1f1f28",
64 | "canvas-strong": "#1f1f28"
65 | }
66 | }
67 | }
--------------------------------------------------------------------------------
/frontend/public/themes/nord.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "nord",
3 | "name": "Nord",
4 | "author": "Arctic Ice Studio",
5 | "colors": {
6 | "light": {
7 | "background": "#eceff4",
8 | "foreground": "#2e3440",
9 | "primary": "#5e81ac",
10 | "secondary": "#d8dee9",
11 | "accent": "#88c0d0",
12 | "muted": "#7b88a1",
13 | "border": "#d8dee9",
14 | "surface": "#e5e9f0",
15 | "surface-strong": "#d8dee9",
16 | "surface-stronger": "#c9d1dc",
17 | "overlay": "#9da5b4",
18 | "overlay-strong": "#8892a3",
19 | "text": "#2e3440",
20 | "text-muted": "#434c5e",
21 | "text-subtle": "#3b4252",
22 | "red": "#bf616a",
23 | "green": "#a3be8c",
24 | "yellow": "#ebcb8b",
25 | "blue": "#5e81ac",
26 | "pink": "#b48ead",
27 | "teal": "#8fbcbb",
28 | "mauve": "#b48ead",
29 | "peach": "#d08770",
30 | "sky": "#88c0d0",
31 | "lavender": "#81a1c1",
32 | "canvas": "#eceff4",
33 | "canvas-alt": "#e5e9f0",
34 | "canvas-strong": "#d8dee9"
35 | },
36 | "dark": {
37 | "background": "#2e3440",
38 | "foreground": "#eceff4",
39 | "primary": "#88c0d0",
40 | "secondary": "#3b4252",
41 | "accent": "#81a1c1",
42 | "muted": "#616e88",
43 | "border": "#434c5e",
44 | "surface": "#3b4252",
45 | "surface-strong": "#434c5e",
46 | "surface-stronger": "#4c566a",
47 | "overlay": "#616e88",
48 | "overlay-strong": "#7b88a1",
49 | "text": "#eceff4",
50 | "text-muted": "#d8dee9",
51 | "text-subtle": "#e5e9f0",
52 | "red": "#bf616a",
53 | "green": "#a3be8c",
54 | "yellow": "#ebcb8b",
55 | "blue": "#81a1c1",
56 | "pink": "#b48ead",
57 | "teal": "#8fbcbb",
58 | "mauve": "#b48ead",
59 | "peach": "#d08770",
60 | "sky": "#88c0d0",
61 | "lavender": "#5e81ac",
62 | "canvas": "#2e3440",
63 | "canvas-alt": "#292e39",
64 | "canvas-strong": "#242933"
65 | }
66 | }
67 | }
--------------------------------------------------------------------------------
/frontend/public/themes/one-dark.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "one-dark",
3 | "name": "One Dark",
4 | "author": "Atom",
5 | "colors": {
6 | "light": {
7 | "background": "#fafafa",
8 | "foreground": "#383a42",
9 | "primary": "#4078f2",
10 | "secondary": "#e5e5e6",
11 | "accent": "#a626a4",
12 | "muted": "#a0a1a7",
13 | "border": "#d4d4d4",
14 | "surface": "#f0f0f0",
15 | "surface-strong": "#e5e5e6",
16 | "surface-stronger": "#d4d4d4",
17 | "overlay": "#a0a1a7",
18 | "overlay-strong": "#8c8d91",
19 | "text": "#383a42",
20 | "text-muted": "#4f5156",
21 | "text-subtle": "#44464d",
22 | "red": "#e45649",
23 | "green": "#50a14f",
24 | "yellow": "#c18401",
25 | "blue": "#4078f2",
26 | "pink": "#a626a4",
27 | "teal": "#0184bc",
28 | "mauve": "#a626a4",
29 | "peach": "#d19a66",
30 | "sky": "#0997b3",
31 | "lavender": "#4078f2",
32 | "canvas": "#fafafa",
33 | "canvas-alt": "#f0f0f0",
34 | "canvas-strong": "#e5e5e6"
35 | },
36 | "dark": {
37 | "background": "#282c34",
38 | "foreground": "#abb2bf",
39 | "primary": "#61afef",
40 | "secondary": "#3e4452",
41 | "accent": "#c678dd",
42 | "muted": "#5c6370",
43 | "border": "#3e4452",
44 | "surface": "#31353f",
45 | "surface-strong": "#3e4452",
46 | "surface-stronger": "#4b5263",
47 | "overlay": "#5c6370",
48 | "overlay-strong": "#6b7280",
49 | "text": "#abb2bf",
50 | "text-muted": "#8b929e",
51 | "text-subtle": "#9da5b4",
52 | "red": "#e06c75",
53 | "green": "#98c379",
54 | "yellow": "#e5c07b",
55 | "blue": "#61afef",
56 | "pink": "#c678dd",
57 | "teal": "#56b6c2",
58 | "mauve": "#c678dd",
59 | "peach": "#d19a66",
60 | "sky": "#56b6c2",
61 | "lavender": "#61afef",
62 | "canvas": "#282c34",
63 | "canvas-alt": "#21252b",
64 | "canvas-strong": "#1b1f23"
65 | }
66 | }
67 | }
--------------------------------------------------------------------------------
/frontend/public/themes/monokai.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "monokai",
3 | "name": "Monokai",
4 | "author": "Wimer Hazenberg",
5 | "colors": {
6 | "light": {
7 | "background": "#fdfcfc",
8 | "foreground": "#383a42",
9 | "primary": "#526fff",
10 | "secondary": "#eaeaeb",
11 | "accent": "#e4005c",
12 | "muted": "#75715e",
13 | "border": "#eaeaeb",
14 | "surface": "#eaeaeb",
15 | "surface-strong": "#dcdbdd",
16 | "surface-stronger": "#d0d1d2",
17 | "overlay": "#75715e",
18 | "overlay-strong": "#5f5d4e",
19 | "text": "#383a42",
20 | "text-muted": "#4b4d55",
21 | "text-subtle": "#272822",
22 | "red": "#f92672",
23 | "green": "#94c42d",
24 | "yellow": "#f2d427",
25 | "blue": "#526fff",
26 | "pink": "#f92672",
27 | "teal": "#66d9ef",
28 | "mauve": "#9e62f0",
29 | "peach": "#f0901e",
30 | "sky": "#66d9ef",
31 | "lavender": "#9e62f0",
32 | "canvas": "#fdfcfc",
33 | "canvas-alt": "#fdfcfc",
34 | "canvas-strong": "#fdfcfc"
35 | },
36 | "dark": {
37 | "background": "#272822",
38 | "foreground": "#F8F8F2",
39 | "primary": "#66D9EF",
40 | "secondary": "#3E3D32",
41 | "accent": "#F92672",
42 | "muted": "#75715E",
43 | "border": "#3E3D32",
44 | "surface": "#3E3D32",
45 | "surface-strong": "#49483E",
46 | "surface-stronger": "#75715E",
47 | "overlay": "#75715E",
48 | "overlay-strong": "#94907E",
49 | "text": "#F8F8F2",
50 | "text-muted": "#E6E6E6",
51 | "text-subtle": "#CCCCCC",
52 | "red": "#F92672",
53 | "green": "#A6E22E",
54 | "yellow": "#E6DB74",
55 | "blue": "#66D9EF",
56 | "pink": "#F92672",
57 | "teal": "#66D9EF",
58 | "mauve": "#AE81FF",
59 | "peach": "#FD971F",
60 | "sky": "#66D9EF",
61 | "lavender": "#AE81FF",
62 | "canvas": "#272822",
63 | "canvas-alt": "#272822",
64 | "canvas-strong": "#272822"
65 | }
66 | }
67 | }
--------------------------------------------------------------------------------
/frontend/public/themes/rosepine.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "rosepine",
3 | "name": "Rosé Pine",
4 | "author": "Rosé Pine",
5 | "colors": {
6 | "light": {
7 | "background": "#faf4ed",
8 | "foreground": "#575279",
9 | "primary": "#907aa9",
10 | "secondary": "#f2e9e1",
11 | "accent": "#d7827e",
12 | "muted": "#9893a5",
13 | "border": "#dfdad9",
14 | "surface": "#f2e9e1",
15 | "surface-strong": "#ebe5df",
16 | "surface-stronger": "#dfdad9",
17 | "overlay": "#9893a5",
18 | "overlay-strong": "#797593",
19 | "text": "#575279",
20 | "text-muted": "#6e6a86",
21 | "text-subtle": "#625f7c",
22 | "red": "#b4637a",
23 | "green": "#286983",
24 | "yellow": "#ea9d34",
25 | "blue": "#56949f",
26 | "pink": "#d7827e",
27 | "teal": "#286983",
28 | "mauve": "#907aa9",
29 | "peach": "#ea9d34",
30 | "sky": "#56949f",
31 | "lavender": "#907aa9",
32 | "canvas": "#faf4ed",
33 | "canvas-alt": "#f4ede8",
34 | "canvas-strong": "#f2e9e1"
35 | },
36 | "dark": {
37 | "background": "#191724",
38 | "foreground": "#e0def4",
39 | "primary": "#c4a7e7",
40 | "secondary": "#26233a",
41 | "accent": "#ebbcba",
42 | "muted": "#6e6a86",
43 | "border": "#403d52",
44 | "surface": "#1f1d2e",
45 | "surface-strong": "#26233a",
46 | "surface-stronger": "#403d52",
47 | "overlay": "#524f67",
48 | "overlay-strong": "#6e6a86",
49 | "text": "#e0def4",
50 | "text-muted": "#908caa",
51 | "text-subtle": "#a6a2bb",
52 | "red": "#eb6f92",
53 | "green": "#31748f",
54 | "yellow": "#f6c177",
55 | "blue": "#9ccfd8",
56 | "pink": "#ebbcba",
57 | "teal": "#31748f",
58 | "mauve": "#c4a7e7",
59 | "peach": "#f6c177",
60 | "sky": "#9ccfd8",
61 | "lavender": "#c4a7e7",
62 | "canvas": "#191724",
63 | "canvas-alt": "#1a1726",
64 | "canvas-strong": "#11111b"
65 | }
66 | }
67 | }
--------------------------------------------------------------------------------
/frontend/public/themes/default.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "default",
3 | "name": "Default",
4 | "author": "Faster Chat",
5 | "colors": {
6 | "light": {
7 | "background": "#F9FAFB",
8 | "foreground": "#111827",
9 | "primary": "#4F46E5",
10 | "secondary": "#F3F4F6",
11 | "accent": "#6366F1",
12 | "muted": "#9CA3AF",
13 | "border": "#E5E7EB",
14 | "surface": "#F3F4F6",
15 | "surface-strong": "#E5E7EB",
16 | "surface-stronger": "#D1D5DB",
17 | "overlay": "#9CA3AF",
18 | "overlay-strong": "#6B7280",
19 | "text": "#111827",
20 | "text-muted": "#6B7280",
21 | "text-subtle": "#4B5563",
22 | "red": "#DC2626",
23 | "green": "#16A34A",
24 | "yellow": "#CA8A04",
25 | "blue": "#2563EB",
26 | "pink": "#DB2777",
27 | "teal": "#0D9488",
28 | "mauve": "#7C3AED",
29 | "peach": "#EA580C",
30 | "sky": "#0284C7",
31 | "lavender": "#818CF8",
32 | "canvas": "#F9FAFB",
33 | "canvas-alt": "#FFFFFF",
34 | "canvas-strong": "#F3F4F6"
35 | },
36 | "dark": {
37 | "background": "#09090b",
38 | "foreground": "#FAFAFA",
39 | "primary": "#6366F1",
40 | "secondary": "#18181b",
41 | "accent": "#818CF8",
42 | "muted": "#52525B",
43 | "border": "#27272a",
44 | "surface": "#18181b",
45 | "surface-strong": "#121215",
46 | "surface-stronger": "#1E1B4B",
47 | "overlay": "#27272a",
48 | "overlay-strong": "#3f3f46",
49 | "text": "#FAFAFA",
50 | "text-muted": "#A1A1AA",
51 | "text-subtle": "#D4D4D8",
52 | "red": "#F87171",
53 | "green": "#4ADE80",
54 | "yellow": "#FACC15",
55 | "blue": "#60A5FA",
56 | "pink": "#F472B6",
57 | "teal": "#2DD4BF",
58 | "mauve": "#A78BFA",
59 | "peach": "#FB923C",
60 | "sky": "#38BDF8",
61 | "lavender": "#A5B4FC",
62 | "canvas": "#121215",
63 | "canvas-alt": "#18181b",
64 | "canvas-strong": "#09090b"
65 | }
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/frontend/public/themes/everforest.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "everforest",
3 | "name": "Everforest",
4 | "author": "Sainnhe",
5 | "colors": {
6 | "light": {
7 | "background": "#fdf6e3",
8 | "foreground": "#5c6a72",
9 | "primary": "#7fbbb3",
10 | "secondary": "#f4eeda",
11 | "accent": "#8da101",
12 | "muted": "#939f86",
13 | "border": "#f4eeda",
14 | "surface": "#f4eeda",
15 | "surface-strong": "#e8deca",
16 | "surface-stronger": "#ddd3c1",
17 | "overlay": "#939f86",
18 | "overlay-strong": "#7c8670",
19 | "text": "#5c6a72",
20 | "text-muted": "#4a555b",
21 | "text-subtle": "#3a4246",
22 | "red": "#f85552",
23 | "green": "#8da101",
24 | "yellow": "#dfa000",
25 | "blue": "#3a94c5",
26 | "pink": "#df69ba",
27 | "teal": "#35a77c",
28 | "mauve": "#df69ba",
29 | "peach": "#f57d26",
30 | "sky": "#35a77c",
31 | "lavender": "#3a94c5",
32 | "canvas": "#fdf6e3",
33 | "canvas-alt": "#fdf6e3",
34 | "canvas-strong": "#fdf6e3"
35 | },
36 | "dark": {
37 | "background": "#2f383e",
38 | "foreground": "#d3c6aa",
39 | "primary": "#7fbbb3",
40 | "secondary": "#3a464c",
41 | "accent": "#a7c080",
42 | "muted": "#5c6a72",
43 | "border": "#4b565c",
44 | "surface": "#3a464c",
45 | "surface-strong": "#4b565c",
46 | "surface-stronger": "#5c6a72",
47 | "overlay": "#6b7b83",
48 | "overlay-strong": "#7fbbb3",
49 | "text": "#d3c6aa",
50 | "text-muted": "#b3a995",
51 | "text-subtle": "#a39a88",
52 | "red": "#e67e80",
53 | "green": "#a7c080",
54 | "yellow": "#dbbc7f",
55 | "blue": "#7fbbb3",
56 | "pink": "#d699b6",
57 | "teal": "#83c092",
58 | "mauve": "#d699b6",
59 | "peach": "#e69875",
60 | "sky": "#83c092",
61 | "lavender": "#d699b6",
62 | "canvas": "#2f383e",
63 | "canvas-alt": "#2f383e",
64 | "canvas-strong": "#2f383e"
65 | }
66 | }
67 | }
--------------------------------------------------------------------------------
/frontend/public/themes/material.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "material",
3 | "name": "Material",
4 | "author": "Mattia Astorino",
5 | "colors": {
6 | "light": {
7 | "background": "#FAFAFA",
8 | "foreground": "#90A4AE",
9 | "primary": "#91B859",
10 | "secondary": "#F4F4F4",
11 | "accent": "#E53935",
12 | "muted": "#B0BEC5",
13 | "border": "#F4F4F4",
14 | "surface": "#F4F4F4",
15 | "surface-strong": "#E0E0E0",
16 | "surface-stronger": "#CCCCCC",
17 | "overlay": "#B0BEC5",
18 | "overlay-strong": "#90A4AE",
19 | "text": "#263238",
20 | "text-muted": "#546E7A",
21 | "text-subtle": "#37474F",
22 | "red": "#E53935",
23 | "green": "#91B859",
24 | "yellow": "#F6BF26",
25 | "blue": "#6182B8",
26 | "pink": "#E53935",
27 | "teal": "#39ADB5",
28 | "mauve": "#6182B8",
29 | "peach": "#F76D47",
30 | "sky": "#39ADB5",
31 | "lavender": "#6182B8",
32 | "canvas": "#FAFAFA",
33 | "canvas-alt": "#FAFAFA",
34 | "canvas-strong": "#FAFAFA"
35 | },
36 | "dark": {
37 | "background": "#212121",
38 | "foreground": "#EEFFFF",
39 | "primary": "#80CBC4",
40 | "secondary": "#262626",
41 | "accent": "#F07178",
42 | "muted": "#546E7A",
43 | "border": "#262626",
44 | "surface": "#262626",
45 | "surface-strong": "#323232",
46 | "surface-stronger": "#424242",
47 | "overlay": "#546E7A",
48 | "overlay-strong": "#708D9A",
49 | "text": "#EEFFFF",
50 | "text-muted": "#B0BEC5",
51 | "text-subtle": "#90A4AE",
52 | "red": "#F07178",
53 | "green": "#C3E88D",
54 | "yellow": "#FFCB6B",
55 | "blue": "#82AAFF",
56 | "pink": "#C792EA",
57 | "teal": "#80CBC4",
58 | "mauve": "#C792EA",
59 | "peach": "#FFCB6B",
60 | "sky": "#89DDFF",
61 | "lavender": "#C792EA",
62 | "canvas": "#212121",
63 | "canvas-alt": "#212121",
64 | "canvas-strong": "#212121"
65 | }
66 | }
67 | }
--------------------------------------------------------------------------------
/frontend/public/themes/night-owl.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "night-owl",
3 | "name": "Night Owl",
4 | "author": "Sarah Drasner",
5 | "colors": {
6 | "light": {
7 | "background": "#fbfbfb",
8 | "foreground": "#403f53",
9 | "primary": "#4876d6",
10 | "secondary": "#e6e6e6",
11 | "accent": "#c565d9",
12 | "muted": "#9392a6",
13 | "border": "#d9d9d9",
14 | "surface": "#e6e6e6",
15 | "surface-strong": "#d9d9d9",
16 | "surface-stronger": "#cccccc",
17 | "overlay": "#9392a6",
18 | "overlay-strong": "#7e7d91",
19 | "text": "#403f53",
20 | "text-muted": "#5f5f7f",
21 | "text-subtle": "#33334d",
22 | "red": "#d44f4f",
23 | "green": "#0c965e",
24 | "yellow": "#dd9a00",
25 | "blue": "#4876d6",
26 | "pink": "#c565d9",
27 | "teal": "#008299",
28 | "mauve": "#c565d9",
29 | "peach": "#d95829",
30 | "sky": "#008299",
31 | "lavender": "#4876d6",
32 | "canvas": "#fbfbfb",
33 | "canvas-alt": "#f0f0f0",
34 | "canvas-strong": "#e6e6e6"
35 | },
36 | "dark": {
37 | "background": "#011627",
38 | "foreground": "#d6deeb",
39 | "primary": "#82aaff",
40 | "secondary": "#0b2942",
41 | "accent": "#c792ea",
42 | "muted": "#637777",
43 | "border": "#122d42",
44 | "surface": "#0b2942",
45 | "surface-strong": "#122d42",
46 | "surface-stronger": "#1d3b53",
47 | "overlay": "#3d5067",
48 | "overlay-strong": "#5f6f81",
49 | "text": "#d6deeb",
50 | "text-muted": "#a6b2c4",
51 | "text-subtle": "#8c9aaf",
52 | "red": "#ef5350",
53 | "green": "#22da6e",
54 | "yellow": "#addb67",
55 | "blue": "#82aaff",
56 | "pink": "#c792ea",
57 | "teal": "#21c7a8",
58 | "mauve": "#c792ea",
59 | "peach": "#f78c6c",
60 | "sky": "#21c7a8",
61 | "lavender": "#c792ea",
62 | "canvas": "#011627",
63 | "canvas-alt": "#011627",
64 | "canvas-strong": "#011627"
65 | }
66 | }
67 | }
--------------------------------------------------------------------------------
/frontend/public/themes/tokyo-night.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "tokyo-night",
3 | "name": "Tokyo Night",
4 | "author": "enkia",
5 | "colors": {
6 | "light": {
7 | "background": "#d5d6db",
8 | "foreground": "#343b58",
9 | "primary": "#7aa2f7",
10 | "secondary": "#c4c8d6",
11 | "accent": "#bb9af7",
12 | "muted": "#717ba5",
13 | "border": "#b4b8c6",
14 | "surface": "#cbccd5",
15 | "surface-strong": "#c0c1ca",
16 | "surface-stronger": "#b4b5be",
17 | "overlay": "#9699a3",
18 | "overlay-strong": "#8c8fa1",
19 | "text": "#343b58",
20 | "text-muted": "#4c5373",
21 | "text-subtle": "#3d4466",
22 | "red": "#8c4351",
23 | "green": "#485e30",
24 | "yellow": "#8f5e15",
25 | "blue": "#34548a",
26 | "pink": "#7847bd",
27 | "teal": "#166775",
28 | "mauve": "#5a4a78",
29 | "peach": "#965027",
30 | "sky": "#0f4b6e",
31 | "lavender": "#7aa2f7",
32 | "canvas": "#d5d6db",
33 | "canvas-alt": "#cbccd1",
34 | "canvas-strong": "#c0c1c6"
35 | },
36 | "dark": {
37 | "background": "#1a1b26",
38 | "foreground": "#c0caf5",
39 | "primary": "#7aa2f7",
40 | "secondary": "#24283b",
41 | "accent": "#bb9af7",
42 | "muted": "#565f89",
43 | "border": "#3b4261",
44 | "surface": "#24283b",
45 | "surface-strong": "#2f3549",
46 | "surface-stronger": "#3b4261",
47 | "overlay": "#545c7e",
48 | "overlay-strong": "#6b7394",
49 | "text": "#c0caf5",
50 | "text-muted": "#9aa5ce",
51 | "text-subtle": "#a9b1d6",
52 | "red": "#f7768e",
53 | "green": "#9ece6a",
54 | "yellow": "#e0af68",
55 | "blue": "#7aa2f7",
56 | "pink": "#bb9af7",
57 | "teal": "#73daca",
58 | "mauve": "#9d7cd8",
59 | "peach": "#ff9e64",
60 | "sky": "#7dcfff",
61 | "lavender": "#b4f9f8",
62 | "canvas": "#1a1b26",
63 | "canvas-alt": "#16161e",
64 | "canvas-strong": "#13131a"
65 | }
66 | }
67 | }
--------------------------------------------------------------------------------
/frontend/src/state/useAuthState.js:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 | import { authClient } from "../lib/authClient.js";
3 | import { queryClient } from "../App.jsx";
4 |
5 | export const useAuthState = create((set, get) => ({
6 | user: null,
7 | isLoading: true,
8 | error: null,
9 |
10 | setUser: (user) => set({ user, error: null }),
11 | setError: (error) => set({ error }),
12 | clearError: () => set({ error: null }),
13 |
14 | checkSession: async () => {
15 | set({ isLoading: true, error: null });
16 | try {
17 | const data = await authClient.getSession();
18 | set({ user: data.user, isLoading: false });
19 | return data.user;
20 | } catch (error) {
21 | set({ user: null, isLoading: false, error: error.message });
22 | return null;
23 | }
24 | },
25 |
26 | login: async (username, password) => {
27 | set({ isLoading: true, error: null });
28 | try {
29 | const data = await authClient.login(username, password);
30 | set({ user: data.user, isLoading: false });
31 | return data.user;
32 | } catch (error) {
33 | set({ user: null, isLoading: false, error: error.message });
34 | throw error;
35 | }
36 | },
37 |
38 | register: async (username, password) => {
39 | set({ isLoading: true, error: null });
40 | try {
41 | const data = await authClient.register(username, password);
42 | set({ user: data.user, isLoading: false });
43 | return data.user;
44 | } catch (error) {
45 | set({ user: null, isLoading: false, error: error.message });
46 | throw error;
47 | }
48 | },
49 |
50 | logout: async () => {
51 | set({ isLoading: true, error: null });
52 | try {
53 | await authClient.logout();
54 | // Clear all cached data to prevent cache bleed between users
55 | queryClient.clear();
56 | set({ user: null, isLoading: false });
57 | } catch (error) {
58 | set({ isLoading: false, error: error.message });
59 | throw error;
60 | }
61 | },
62 | }));
63 |
--------------------------------------------------------------------------------
/frontend/public/themes/catppuccin.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "catppuccin",
3 | "name": "Catppuccin",
4 | "author": "Catppuccin Team",
5 | "colors": {
6 | "light": {
7 | "background": "#eff1f5",
8 | "foreground": "#4c4f69",
9 | "primary": "#8839ef",
10 | "secondary": "#ccd0da",
11 | "accent": "#ea76cb",
12 | "muted": "#9ca0b0",
13 | "border": "#acb0be",
14 | "surface": "#ccd0da",
15 | "surface-strong": "#bcc0cc",
16 | "surface-stronger": "#acb0be",
17 | "overlay": "#9ca0b0",
18 | "overlay-strong": "#8c8fa1",
19 | "text": "#4c4f69",
20 | "text-muted": "#6c6f85",
21 | "text-subtle": "#5c5f77",
22 | "red": "#d20f39",
23 | "green": "#40a02b",
24 | "yellow": "#df8e1d",
25 | "blue": "#1e66f5",
26 | "pink": "#ea76cb",
27 | "teal": "#179299",
28 | "mauve": "#8839ef",
29 | "peach": "#fe640b",
30 | "sky": "#04a5e5",
31 | "lavender": "#7287fd",
32 | "canvas": "#eff1f5",
33 | "canvas-alt": "#e6e9ef",
34 | "canvas-strong": "#dce0e8"
35 | },
36 | "dark": {
37 | "background": "#24273a",
38 | "foreground": "#cad3f5",
39 | "primary": "#c6a0f6",
40 | "secondary": "#363a4f",
41 | "accent": "#f5bde6",
42 | "muted": "#6e738d",
43 | "border": "#5b6078",
44 | "surface": "#363a4f",
45 | "surface-strong": "#494d64",
46 | "surface-stronger": "#5b6078",
47 | "overlay": "#6e738d",
48 | "overlay-strong": "#8087a2",
49 | "text": "#cad3f5",
50 | "text-muted": "#a5adcb",
51 | "text-subtle": "#b8c0e0",
52 | "red": "#ed8796",
53 | "green": "#a6da95",
54 | "yellow": "#eed49f",
55 | "blue": "#8aadf4",
56 | "pink": "#f5bde6",
57 | "teal": "#8bd5ca",
58 | "mauve": "#c6a0f6",
59 | "peach": "#f5a97f",
60 | "sky": "#91d7e3",
61 | "lavender": "#b7bdf8",
62 | "canvas": "#24273a",
63 | "canvas-alt": "#1e2030",
64 | "canvas-strong": "#181926"
65 | }
66 | }
67 | }
--------------------------------------------------------------------------------
/frontend/public/themes/solarized.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "solarized",
3 | "name": "Solarized",
4 | "author": "Ethan Schoonover",
5 | "colors": {
6 | "light": {
7 | "background": "#fdf6e3",
8 | "foreground": "#657b83",
9 | "primary": "#268bd2",
10 | "secondary": "#eee8d5",
11 | "accent": "#b58900",
12 | "muted": "#93a1a1",
13 | "border": "#eee8d5",
14 | "surface": "#eee8d5",
15 | "surface-strong": "#93a1a1",
16 | "surface-stronger": "#839496",
17 | "overlay": "#93a1a1",
18 | "overlay-strong": "#839496",
19 | "text": "#657b83",
20 | "text-muted": "#586e75",
21 | "text-subtle": "#073642",
22 | "red": "#dc322f",
23 | "green": "#859900",
24 | "yellow": "#b58900",
25 | "blue": "#268bd2",
26 | "pink": "#d33682",
27 | "teal": "#2aa198",
28 | "mauve": "#6c71c4",
29 | "peach": "#cb4b16",
30 | "sky": "#2aa198",
31 | "lavender": "#6c71c4",
32 | "canvas": "#fdf6e3",
33 | "canvas-alt": "#eee8d5",
34 | "canvas-strong": "#eee8d5"
35 | },
36 | "dark": {
37 | "background": "#002b36",
38 | "foreground": "#839496",
39 | "primary": "#268bd2",
40 | "secondary": "#073642",
41 | "accent": "#b58900",
42 | "muted": "#586e75",
43 | "border": "#073642",
44 | "surface": "#073642",
45 | "surface-strong": "#586e75",
46 | "surface-stronger": "#657b83",
47 | "overlay": "#586e75",
48 | "overlay-strong": "#657b83",
49 | "text": "#839496",
50 | "text-muted": "#93a1a1",
51 | "text-subtle": "#eee8d5",
52 | "red": "#dc322f",
53 | "green": "#859900",
54 | "yellow": "#b58900",
55 | "blue": "#268bd2",
56 | "pink": "#d33682",
57 | "teal": "#2aa198",
58 | "mauve": "#6c71c4",
59 | "peach": "#cb4b16",
60 | "sky": "#2aa198",
61 | "lavender": "#6c71c4",
62 | "canvas": "#002b36",
63 | "canvas-alt": "#002b36",
64 | "canvas-strong": "#002b36"
65 | }
66 | }
67 | }
--------------------------------------------------------------------------------
/frontend/public/themes/synthwave84.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "synthwave84",
3 | "name": "Synthwave '84",
4 | "author": "Robb Owen",
5 | "colors": {
6 | "light": {
7 | "background": "#2a2139",
8 | "foreground": "#ffffff",
9 | "primary": "#ff79c6",
10 | "secondary": "#382f4d",
11 | "accent": "#fede5d",
12 | "muted": "#69578e",
13 | "border": "#382f4d",
14 | "surface": "#382f4d",
15 | "surface-strong": "#4a3e68",
16 | "surface-stronger": "#5d4d82",
17 | "overlay": "#69578e",
18 | "overlay-strong": "#8270b4",
19 | "text": "#ffffff",
20 | "text-muted": "#e0e0e0",
21 | "text-subtle": "#c0c0c0",
22 | "red": "#ff5555",
23 | "green": "#50fa7b",
24 | "yellow": "#fede5d",
25 | "blue": "#bd93f9",
26 | "pink": "#ff79c6",
27 | "teal": "#2de2e6",
28 | "mauve": "#bd93f9",
29 | "peach": "#f97e72",
30 | "sky": "#2de2e6",
31 | "lavender": "#bd93f9",
32 | "canvas": "#2a2139",
33 | "canvas-alt": "#2a2139",
34 | "canvas-strong": "#2a2139"
35 | },
36 | "dark": {
37 | "background": "#2a2139",
38 | "foreground": "#ffffff",
39 | "primary": "#ff79c6",
40 | "secondary": "#382f4d",
41 | "accent": "#fede5d",
42 | "muted": "#69578e",
43 | "border": "#382f4d",
44 | "surface": "#382f4d",
45 | "surface-strong": "#4a3e68",
46 | "surface-stronger": "#5d4d82",
47 | "overlay": "#69578e",
48 | "overlay-strong": "#8270b4",
49 | "text": "#ffffff",
50 | "text-muted": "#e0e0e0",
51 | "text-subtle": "#c0c0c0",
52 | "red": "#ff5555",
53 | "green": "#50fa7b",
54 | "yellow": "#fede5d",
55 | "blue": "#bd93f9",
56 | "pink": "#ff79c6",
57 | "teal": "#2de2e6",
58 | "mauve": "#bd93f9",
59 | "peach": "#f97e72",
60 | "sky": "#2de2e6",
61 | "lavender": "#bd93f9",
62 | "canvas": "#2a2139",
63 | "canvas-alt": "#2a2139",
64 | "canvas-strong": "#2a2139"
65 | }
66 | }
67 | }
--------------------------------------------------------------------------------
/frontend/src/state/useAppSettings.js:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 | import { DEFAULT_APP_SETTINGS, normalizeAppSettings } from "@faster-chat/shared";
3 |
4 | export const useAppSettings = create((set, get) => ({
5 | appName: DEFAULT_APP_SETTINGS.appName,
6 | logoIcon: DEFAULT_APP_SETTINGS.logoIcon,
7 | isLoaded: false,
8 | isFetching: false,
9 | isSaving: false,
10 | error: null,
11 |
12 | fetchSettings: async () => {
13 | if (get().isFetching) return;
14 |
15 | set({ isFetching: true, error: null });
16 | try {
17 | const response = await fetch("/api/settings");
18 | if (!response.ok) throw new Error("Failed to fetch settings");
19 |
20 | const data = await response.json();
21 | set({
22 | ...normalizeAppSettings(data),
23 | isLoaded: true,
24 | isFetching: false,
25 | });
26 | } catch (error) {
27 | console.error("Failed to fetch app settings:", error);
28 | set({
29 | error: error.message,
30 | isLoaded: true,
31 | isFetching: false,
32 | });
33 | }
34 | },
35 |
36 | updateSettings: async (updates) => {
37 | set({ isSaving: true, error: null });
38 | try {
39 | const response = await fetch("/api/settings", {
40 | method: "PUT",
41 | headers: { "Content-Type": "application/json" },
42 | credentials: "include",
43 | body: JSON.stringify(updates),
44 | });
45 |
46 | if (!response.ok) {
47 | const error = await response.json();
48 | throw new Error(error.error || "Failed to update settings");
49 | }
50 |
51 | const data = await response.json();
52 | set({
53 | ...normalizeAppSettings(data),
54 | isLoaded: true,
55 | isSaving: false,
56 | });
57 | return { success: true };
58 | } catch (error) {
59 | console.error("Failed to update app settings:", error);
60 | set({ error: error.message, isSaving: false });
61 | return { success: false, error: error.message };
62 | }
63 | },
64 | }));
65 |
--------------------------------------------------------------------------------
/server/src/middleware/auth.js:
--------------------------------------------------------------------------------
1 | import { getCookie } from "hono/cookie";
2 | import { dbUtils } from "../lib/db.js";
3 |
4 | const COOKIE_NAME = "session";
5 |
6 | /**
7 | * Middleware to ensure a valid session exists
8 | * Attaches user info to context: c.get('user')
9 | */
10 | export async function ensureSession(c, next) {
11 | const sessionId = getCookie(c, COOKIE_NAME);
12 |
13 | if (!sessionId) {
14 | return c.json({ error: "Unauthorized" }, 401);
15 | }
16 |
17 | const session = dbUtils.getSession(sessionId);
18 |
19 | if (!session) {
20 | return c.json({ error: "Session expired" }, 401);
21 | }
22 |
23 | // Attach user info to context
24 | c.set("user", {
25 | id: session.user_id,
26 | username: session.username,
27 | role: session.role,
28 | });
29 |
30 | await next();
31 | }
32 |
33 | /**
34 | * Middleware to require a specific role
35 | * Must be used after ensureSession
36 | * @param {...string} allowedRoles - Roles that are allowed to access this route
37 | */
38 | export function requireRole(...allowedRoles) {
39 | return async (c, next) => {
40 | const user = c.get("user");
41 |
42 | if (!user) {
43 | return c.json({ error: "Unauthorized" }, 401);
44 | }
45 |
46 | if (!allowedRoles.includes(user.role)) {
47 | return c.json({ error: "Forbidden: insufficient permissions" }, 403);
48 | }
49 |
50 | await next();
51 | };
52 | }
53 |
54 | /**
55 | * Optional auth middleware - doesn't fail if no session, just sets user to null
56 | * Useful for routes that work both authenticated and unauthenticated
57 | */
58 | export async function optionalAuth(c, next) {
59 | const sessionId = getCookie(c, COOKIE_NAME);
60 |
61 | if (sessionId) {
62 | const session = dbUtils.getSession(sessionId);
63 |
64 | if (session) {
65 | c.set("user", {
66 | id: session.user_id,
67 | username: session.username,
68 | role: session.role,
69 | });
70 | }
71 | }
72 |
73 | // Set user to null if not authenticated
74 | if (!c.get("user")) {
75 | c.set("user", null);
76 | }
77 |
78 | await next();
79 | }
80 |
--------------------------------------------------------------------------------
/frontend/src/components/layout/IndexRouteGuard.jsx:
--------------------------------------------------------------------------------
1 | import { useAuthState } from "@/state/useAuthState";
2 | import {
3 | hasSeenAdminConnectionsOnboarding,
4 | markAdminConnectionsOnboardingSeen,
5 | } from "@/lib/adminOnboarding";
6 | import { useChatsQuery, useCreateChatMutation } from "@/hooks/useChatsQuery";
7 | import { useNavigate } from "@tanstack/react-router";
8 | import { useEffect, useRef } from "preact/hooks";
9 |
10 | export function IndexRouteGuard() {
11 | const navigate = useNavigate();
12 | const { user } = useAuthState();
13 | const { data: chats, isLoading } = useChatsQuery();
14 | const createChatMutation = useCreateChatMutation();
15 | const hasStartedNavigation = useRef(false);
16 |
17 | useEffect(() => {
18 | if (!user || isLoading || hasStartedNavigation.current) return;
19 | hasStartedNavigation.current = true;
20 |
21 | const hasSeenOnboarding = hasSeenAdminConnectionsOnboarding(user.id);
22 |
23 | // Admin onboarding: redirect to connections if no chats and hasn't seen it
24 | if (user.role === "admin" && (!chats || chats.length === 0) && !hasSeenOnboarding) {
25 | markAdminConnectionsOnboardingSeen(user.id);
26 | navigate({
27 | to: "/admin",
28 | search: { tab: "connections" },
29 | replace: true,
30 | });
31 | return;
32 | }
33 |
34 | // Navigate to existing chat or create new one
35 | if (chats && chats.length > 0) {
36 | navigate({
37 | to: "/chat/$chatId",
38 | params: { chatId: chats[0].id },
39 | replace: true,
40 | });
41 | } else {
42 | createChatMutation.mutate(
43 | {},
44 | {
45 | onSuccess: (newChat) => {
46 | navigate({
47 | to: "/chat/$chatId",
48 | params: { chatId: newChat.id },
49 | replace: true,
50 | });
51 | },
52 | }
53 | );
54 | }
55 | }, [navigate, user, chats, isLoading, createChatMutation]);
56 |
57 | return (
58 |
30 | {/* Header */}
31 |
50 |
32 |
46 |
47 | {/* Content */}
48 | {title}
33 | 45 |{children}
49 |
59 |
61 | );
62 | }
63 |
--------------------------------------------------------------------------------
/packages/shared/src/constants/config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Centralized Configuration Constants
3 | * All magic numbers and configuration values in one place
4 | */
5 |
6 | /** API Timeout Values (in milliseconds) */
7 | export const TIMEOUTS = {
8 | MODELS_DEV_FETCH: 10000, // 10 seconds - Fetching provider list from models.dev
9 | OLLAMA_FETCH: 5000, // 5 seconds - Fetching models from local Ollama
10 | PROVIDER_API_CALL: 30000, // 30 seconds - Standard API call timeout
11 | };
12 |
13 | /** Cache Duration Values (in milliseconds) */
14 | export const CACHE_DURATIONS = {
15 | MODELS_DEV: 60 * 60 * 1000, // 1 hour - Cache models.dev database
16 | PROVIDER_LIST: 60 * 60 * 1000, // 1 hour - Cache available providers list
17 | IMAGE_MODELS: 5 * 60 * 1000, // 5 minutes - Cache image model list
18 | };
19 |
20 | /** Provider Default Configuration Values */
21 | export const PROVIDER_DEFAULTS = {
22 | GOOGLE_VERTEX_LOCATION: "us-central1",
23 | AWS_REGION: "us-east-1",
24 | OLLAMA_BASE_URL:
25 | typeof process !== "undefined" && process.env.OLLAMA_BASE_URL
26 | ? `${process.env.OLLAMA_BASE_URL}/v1`
27 | : "http://localhost:11434/v1",
28 | };
29 |
30 | /** Message Processing Constants */
31 | export const MESSAGE_CONSTANTS = {
32 | /** Maximum messages to keep in history for context */
33 | MAX_HISTORY: 64,
34 | /** Time window for message deduplication (in milliseconds) */
35 | DEDUPLICATION_WINDOW_MS: 5000,
36 | /** Threshold for considering messages "similar" in timestamp sorting */
37 | TIMESTAMP_SIMILARITY_MS: 5000,
38 | };
39 |
40 | /** AI Completion Constants */
41 | export const COMPLETION_CONSTANTS = {
42 | /** Maximum tokens for completion responses */
43 | MAX_TOKENS: 4096,
44 | };
45 |
46 | /** AI Model Feature Detection */
47 | export const MODEL_FEATURES = {
48 | /**
49 | * Check if model supports prompt caching
50 | * @param {string} modelId - The model identifier
51 | * @returns {boolean} True if model supports caching
52 | */
53 | SUPPORTS_PROMPT_CACHING: (modelId) => modelId.includes("claude"),
54 |
55 | /** Number of recent messages to include in cache */
56 | CACHE_LAST_N_MESSAGES: 2,
57 |
58 | /** Cache type for prompt caching */
59 | CACHE_TYPE: "ephemeral",
60 | };
61 |
--------------------------------------------------------------------------------
/frontend/src/components/ui/ProviderBadge.jsx:
--------------------------------------------------------------------------------
1 | import { MapPin, BadgeCheck, Users } from "lucide-preact";
2 | import { categorizeProvider } from "@faster-chat/shared";
3 |
4 | const BADGE_CONFIGS = {
5 | "openai-compatible": {
6 | colors: "bg-theme-green/10 text-theme-green",
7 | Icon: MapPin,
8 | label: "OpenAI Compatible",
9 | },
10 | local: {
11 | colors: "bg-theme-green/10 text-theme-green",
12 | Icon: MapPin,
13 | label: "Local",
14 | },
15 | official: {
16 | colors: "bg-theme-blue/10 text-theme-blue",
17 | Icon: BadgeCheck,
18 | label: "Official",
19 | },
20 | community: {
21 | colors: "bg-theme-mauve/10 text-theme-mauve",
22 | Icon: Users,
23 | label: "Community",
24 | },
25 | };
26 |
27 | /**
28 | * Resolve the badge type from provider data
29 | */
30 | function resolveBadgeType(provider) {
31 | // Use explicit type/category from provider data
32 | if (provider.type) return provider.type;
33 | if (provider.category) return provider.category;
34 |
35 | // Fall back to ID-based categorization
36 | return categorizeProvider(provider.id || provider.name || "");
37 | }
38 |
39 | /**
40 | * ProviderBadge - Display a badge indicating provider type
41 | * @param {object} provider - Provider object with type, category, id, or name
42 | * @param {boolean} showLabel - Whether to show the label text (default: true)
43 | * @param {string} labelOverride - Optional label to override the default
44 | */
45 | const ProviderBadge = ({ provider, showLabel = true, labelOverride }) => {
46 | const badgeType = resolveBadgeType(provider);
47 | const config = BADGE_CONFIGS[badgeType] || BADGE_CONFIGS.community;
48 | const { colors, Icon } = config;
49 |
50 | // Determine label: "Native SDK" for official with .type, otherwise default
51 | const label =
52 | labelOverride ??
53 | (provider.id === "openrouter"
54 | ? "OpenRouter API"
55 | : badgeType === "official" && provider.type
56 | ? "Native SDK"
57 | : config.label);
58 |
59 | return (
60 |
62 | {isLoading ? "Loading..." : "Redirecting..."}
60 |
32 |
63 | 33 | Are you sure you want to delete {user?.username}? This action cannot be 34 | undone. 35 |
36 | 37 |
38 |
45 |
46 | {error && (
47 | Warning:
39 |-
40 |
- All user data will be permanently deleted 41 |
- All active sessions will be terminated 42 |
- This action cannot be reversed 43 |
{error}
48 | )}
49 |
50 |
51 |
54 |
61 |
62 |
35 |
79 | );
80 | };
81 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.yml:
--------------------------------------------------------------------------------
1 | name: "🐛 Bug Report"
2 | description: "Report a reproducible problem"
3 | title: "[BUG]
64 |
71 |
72 |
73 | {label && (
74 |
77 | )}
78 | 
16 |
17 |
18 |
19 |
20 | 
21 |
22 |
23 |
24 |
25 | 
26 |
27 |
28 | Markdown Buttons (for README)
29 |
30 | [](https://fly.io/launch?template=https://github.com/YOUR_USERNAME/faster-chat)
32 |
33 | [](https://railway.app/template/faster-chat)
34 |
35 | [](https://render.com/deploy?repo=https://git
36 | hub.com/YOUR_USERNAME/faster-chat)
37 |
38 | 📋 How It Works
39 |
40 | When users click these buttons:
41 |
42 | 1. Fly.io:
43 |
44 | - Reads fly.toml
45 | - Prompts for environment variables (API_KEY_ENCRYPTION_KEY, APP_URL)
46 | - Creates a persistent volume for SQLite
47 | - Builds and deploys your Docker image
48 | 2. Railway:
49 |
50 | - Reads railway.json
51 | - Auto-detects Dockerfile
52 | - Prompts for environment variables
53 | - Deploys with auto-scaling
54 | 3. Render:
55 |
56 | - Reads render.yaml
57 | - Auto-generates API_KEY_ENCRYPTION_KEY
58 | - Creates persistent disk for SQLite
59 | - Free tier available!
60 |
61 | 🔑 What Users Need to Configure
62 |
63 | After clicking deploy, users will need to set:
64 | - API_KEY_ENCRYPTION_KEY - 32-byte hex string (you can provide a generator in docs)
65 | - APP_URL - Their deployed URL (e.g., https://my-chat.fly.dev)
66 |
67 | 💡 Pro Tips
68 |
69 | For your landing page, you could create a slick section like:
70 |
71 | Deploy Your Own Instance
73 |One-click deploy to your preferred platform:
74 | 77 |
29 |
32 | );
33 | }
34 |
35 | if (error || !fileMetadata) {
36 | return (
37 |
38 |
41 | );
42 | }
43 |
44 | const isImage = fileMetadata.mimeType?.startsWith("image/");
45 | const isGenerated = fileMetadata.meta?.type === "generated";
46 |
47 | // Render images inline
48 | if (isImage) {
49 | return (
50 |
51 | 
57 | {/* Overlay with download button and generated badge */}
58 |
73 | );
74 | }
75 |
76 | // Non-image files: show download button
77 | return (
78 |
86 | );
87 | }
88 |
--------------------------------------------------------------------------------
/frontend/src/pages/authenticated/Chat.jsx:
--------------------------------------------------------------------------------
1 | import ChatInterface from "@/components/chat/ChatInterface";
2 | import ErrorBanner from "@/components/ui/ErrorBanner";
3 | import { useChatQuery, useCreateChatMutation } from "@/hooks/useChatsQuery";
4 | import { useAppSettings } from "@/state/useAppSettings";
5 | import { useNavigate } from "@tanstack/react-router";
6 | import { useLayoutEffect, useRef } from "preact/hooks";
7 |
8 | const Chat = ({ chatId }) => {
9 | const navigate = useNavigate();
10 | const { data: chat, isLoading, isError, error } = useChatQuery(chatId);
11 | const createChatMutation = useCreateChatMutation();
12 | const appName = useAppSettings((state) => state.appName);
13 |
14 | // Update document title when chat changes
15 | useLayoutEffect(() => {
16 | const chatTitle = chat?.title || "New Chat";
17 | document.title = `${chatTitle} | ${appName}`;
18 |
19 | return () => {
20 | document.title = appName;
21 | };
22 | }, [chat?.title, appName]);
23 | const hasAttemptedRedirect = useRef(false);
24 |
25 | // Auto-redirect to new chat if current chat is missing/deleted
26 | if (isError && !hasAttemptedRedirect.current && !createChatMutation.isPending) {
27 | hasAttemptedRedirect.current = true;
28 | createChatMutation.mutate(
29 | {},
30 | {
31 | onSuccess: (newChat) => {
32 | navigate({
33 | to: "/chat/$chatId",
34 | params: { chatId: newChat.id },
35 | replace: true,
36 | });
37 | },
38 | }
39 | );
40 | }
41 |
42 | const handleCreateNewChat = () => {
43 | createChatMutation.mutate(
44 | {},
45 | {
46 | onSuccess: (newChat) => {
47 | navigate({
48 | to: "/chat/$chatId",
49 | params: { chatId: newChat.id },
50 | replace: true,
51 | });
52 | },
53 | }
54 | );
55 | };
56 |
57 | if (isLoading || createChatMutation.isPending) {
58 | return (
59 |
59 | {isGenerated && (
60 |
61 |
72 |
60 |
64 | );
65 | }
66 |
67 | if (isError) {
68 | return (
69 |
61 | {createChatMutation.isPending ? "Redirecting to a new chat..." : "Loading chat..."}
62 |
63 |
70 |
90 | );
91 | }
92 |
93 | return
76 |
82 |
88 |
89 |
41 | {FONT_SIZE_PRESETS.map(({ id, name }) => (
42 |
52 | ))}
53 |
54 | );
55 | };
56 |
57 | export const FontSelector = () => {
58 | const chatFont = useThemeStore((state) => state.chatFont);
59 | const chatFontSize = useThemeStore((state) => state.chatFontSize);
60 | const setChatFont = useThemeStore((state) => state.setChatFont);
61 | const setChatFontSize = useThemeStore((state) => state.setChatFontSize);
62 |
63 | return (
64 |
65 | {/* Font Family */}
66 |
88 | );
89 | };
90 |
--------------------------------------------------------------------------------
/frontend/src/components/admin/EditProviderModal.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "preact/hooks";
2 | import { useMutation, useQueryClient } from "@tanstack/react-query";
3 | import { providersClient } from "@/lib/providersClient";
4 | import { Button } from "@/components/ui/button";
5 | import Modal from "@/components/ui/Modal";
6 |
7 | const EditProviderModal = ({ provider, onClose }) => {
8 | const queryClient = useQueryClient();
9 | const [apiKey, setApiKey] = useState("");
10 | const [baseUrl, setBaseUrl] = useState(provider.base_url || "");
11 | const [error, setError] = useState("");
12 |
13 | const updateMutation = useMutation({
14 | mutationFn: () =>
15 | providersClient.updateProvider(provider.id, {
16 | apiKey: apiKey || undefined,
17 | baseUrl: baseUrl || null,
18 | }),
19 | onSuccess: () => {
20 | queryClient.invalidateQueries({ queryKey: ["admin", "providers"] });
21 | queryClient.invalidateQueries({ queryKey: ["admin", "models"] });
22 | onClose();
23 | setApiKey("");
24 | setError("");
25 | },
26 | onError: (err) => {
27 | const message = err?.message || "Failed to update provider";
28 | setError(message);
29 | },
30 | });
31 |
32 | const handleSubmit = (e) => {
33 | e.preventDefault();
34 | setError("");
35 | if (!apiKey && baseUrl === provider.base_url) {
36 | setError("Enter a new API key or update the base URL.");
37 | return;
38 | }
39 | updateMutation.mutate();
40 | };
41 |
42 | return (
43 |
67 |
68 |
79 |
80 | {/* Font Size */}
81 |
69 | {FONT_PRESETS.map((font) => (
70 |
78 |
82 |
85 |
87 |