Merge branch 'features/big-upgrade-chat-ux' of github.com:khoj-ai/khoj into features/use-new-sse-in-new-chat-ux

src/interface/web/app/common/auth.ts

@@ -11,15 +11,69 @@ export interface UserProfile {
     detail: string;
 }
 
-const userFetcher = () => window.fetch('/api/v1/user').then(res => res.json()).catch(err => console.log(err));
+const fetcher = (url: string) =>
+    window.fetch(url)
+        .then(res => res.json())
+        .catch(err => console.warn(err));
 
 export function useAuthenticatedData() {
+    const { data, error } = useSWR<UserProfile>('/api/v1/user', fetcher, { revalidateOnFocus: false });
 
-    const { data, error } = useSWR<UserProfile>('/api/v1/user', userFetcher, { revalidateOnFocus: false });
-
-    if (error) return null;
-    if (!data) return null;
-    if (data.detail === 'Forbidden') return null;
+    if (error || !data || data.detail === 'Forbidden') return null;
+
+    return data;
+}
+
+export interface ModelOptions {
+    id: number;
+    name: string;
+}
+export interface SyncedContent {
+    computer: boolean;
+    github: boolean;
+    notion: boolean;
+}
+export interface UserConfig {
+    // user info
+    username: string;
+    user_photo: string | null;
+    is_active: boolean;
+    given_name: string;
+    phone_number: string;
+    is_phone_number_verified: boolean;
+    // user content settings
+    enabled_content_source: SyncedContent;
+    has_documents: boolean;
+    notion_token: string | null;
+    // user model settings
+    search_model_options: ModelOptions[];
+    selected_search_model_config: number;
+    chat_model_options: ModelOptions[];
+    selected_chat_model_config: number;
+    paint_model_options: ModelOptions[];
+    selected_paint_model_config: number;
+    voice_model_options: ModelOptions[];
+    selected_voice_model_config: number;
+    // user billing info
+    subscription_state: string;
+    subscription_renewal_date: string;
+    // server settings
+    khoj_cloud_subscription_url: string | undefined;
+    billing_enabled: boolean;
+    is_eleven_labs_enabled: boolean;
+    is_twilio_enabled: boolean;
+    khoj_version: string;
+    anonymous_mode: boolean;
+    notion_oauth_url: string;
+    detail: string;
+}
+
+
+export function useUserConfig(detailed: boolean = false) {
+    const url = `/api/settings?detailed=${detailed}`;
+    const { data, error } = useSWR<UserConfig>(url, fetcher, { revalidateOnFocus: false });
+
+    if (error || !data || data.detail === 'Forbidden') return null;
 
     return data;
 }

src/interface/web/app/common/utils.ts

@@ -13,6 +13,8 @@ export interface LocationData {
 
 const locationFetcher = () => window.fetch("https://ipapi.co/json").then((res) => res.json()).catch((err) => console.log(err));
 
+export const toTitleCase = (str: string) => str.replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.slice(1).toLowerCase());
+
 export function welcomeConsole() {
     console.log(`%c %s`, "font-family:monospace", `
         __  __     __  __     ______       __        _____      __

src/interface/web/app/page.tsx

@@ -2,7 +2,7 @@
 import './globals.css';
 
 import styles from './page.module.css';
-import React, { Suspense, useEffect, useState, useMemo } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import SuggestionCard from './components/suggestions/suggestionCard';
 import SidePanel from './components/sidePanel/chatHistorySidePanel';
@@ -16,7 +16,7 @@ import 'katex/dist/katex.min.css';
 import ChatInputArea, { ChatOptions } from './components/chatInputArea/chatInputArea';
 import { useAuthenticatedData } from './common/auth';
 import { Card, CardTitle } from '@/components/ui/card';
-import { colorMap, convertColorToBorderClass } from './common/colorUtils';
+import { convertColorToBorderClass } from './common/colorUtils';
 import { getIconFromIconName } from './common/iconUtils';
 import { ClockCounterClockwise } from '@phosphor-icons/react';
 import { AgentData } from './agents/page';
@@ -188,7 +188,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
             <div className={`ml-auto mr-auto ${props.isMobileWidth ? 'w-full' : 'w-fit'}`}>
                 {
                     !props.isMobileWidth &&
-                    <div className={`w-full ${styles.inputBox} shadow-lg bg-background align-middle items-center justify-center p-3 dark:bg-neutral-700 border-stone-100 dark:border-none dark:shadow-none`}>
+                    <div className={`w-full ${styles.inputBox} shadow-lg bg-background align-middle items-center justify-center px-3 py-1 dark:bg-neutral-700 border-stone-100 dark:border-none dark:shadow-none`}>
                         <ChatInputArea
                             isLoggedIn={props.isLoggedIn}
                             sendMessage={(message) => setMessage(message)}

src/interface/web/app/settings/layout.tsx

@@ -0,0 +1,38 @@
+import type { Metadata } from "next";
+import { Noto_Sans } from "next/font/google";
+import "../globals.css";
+import { Toaster } from "@/components/ui/toaster";
+
+const inter = Noto_Sans({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+    title: "Khoj AI - Settings",
+    description: "Configure Khoj to get personalized, deeper assistance.",
+    icons: {
+        icon: "/static/favicon.ico",
+    },
+};
+
+export default function RootLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <html lang="en">
+            <meta httpEquiv="Content-Security-Policy"
+                content="default-src 'self' https://assets.khoj.dev;
+                        script-src 'self' https://assets.khoj.dev 'unsafe-inline' 'unsafe-eval';
+                        connect-src 'self' https://ipapi.co/json ws://localhost:42110;
+                        style-src 'self' https://assets.khoj.dev 'unsafe-inline' https://fonts.googleapis.com;
+                        img-src 'self' data: https://*.khoj.dev https://*.googleusercontent.com;
+                        font-src 'self' https://assets.khoj.dev https://fonts.gstatic.com;
+                        child-src 'none';
+                        object-src 'none';"></meta>
+            <body className={inter.className}>
+                {children}
+                <Toaster />
+            </body>
+        </html>
+    );
+}

src/interface/web/app/settings/settings.module.css

@@ -0,0 +1,11 @@
+div.page {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 1rem;
+    height: 100vh;
+    color: hsla(var(--foreground));
+}
+div.contentBody {
+    display: grid;
+    margin: auto;
+}