mirror of
https://github.com/khoaliber/khoj.git
synced 2026-03-03 13:19:16 +00:00
Clean up all references to authenticatedData
- De facto, was being assumed everywhere if authenticatedData is null, that it's not logged in. This isn't true because the data can still be loading. Update the hook to send additional states. - Bonus: Delete model picker code and a slew of unused imports.
This commit is contained in:
@@ -144,7 +144,6 @@ function CreateAgentCard(props: CreateAgentCardProps) {
|
||||
<DialogHeader>Create Agent</DialogHeader>
|
||||
{!props.userProfile && showLoginPrompt && (
|
||||
<LoginPrompt
|
||||
loginRedirectMessage="Sign in to start chatting with a specialized agent"
|
||||
onOpenChange={setShowLoginPrompt}
|
||||
isMobileWidth={props.isMobileWidth}
|
||||
/>
|
||||
@@ -174,7 +173,11 @@ export default function Agents() {
|
||||
const { data, error, mutate } = useSWR<AgentData[]>("agents", agentsFetcher, {
|
||||
revalidateOnFocus: false,
|
||||
});
|
||||
const authenticatedData = useAuthenticatedData();
|
||||
const {
|
||||
data: authenticatedData,
|
||||
error: authenticationError,
|
||||
isLoading: authenticationLoading,
|
||||
} = useAuthenticatedData();
|
||||
const { userConfig } = useUserConfig(true);
|
||||
const [showLoginPrompt, setShowLoginPrompt] = useState(false);
|
||||
const isMobileWidth = useIsMobileWidth();
|
||||
@@ -297,38 +300,39 @@ export default function Agents() {
|
||||
<div className={`pt-6 md:pt-8 flex justify-between`}>
|
||||
<h1 className="text-3xl flex items-center">Agents</h1>
|
||||
<div className="ml-auto float-right border p-2 pt-3 rounded-xl font-bold hover:bg-stone-100 dark:hover:bg-neutral-900">
|
||||
<CreateAgentCard
|
||||
data={{
|
||||
slug: "",
|
||||
name: "",
|
||||
persona: "",
|
||||
color: "",
|
||||
icon: "",
|
||||
privacy_level: "private",
|
||||
managed_by_admin: false,
|
||||
chat_model: "",
|
||||
input_tools: [],
|
||||
output_modes: [],
|
||||
}}
|
||||
userProfile={authenticatedData}
|
||||
isMobileWidth={isMobileWidth}
|
||||
filesOptions={filesData || []}
|
||||
modelOptions={userConfig?.chat_model_options || []}
|
||||
selectedChatModelOption={defaultModelOption?.name || ""}
|
||||
isSubscribed={isSubscribed}
|
||||
setAgentChangeTriggered={setAgentChangeTriggered}
|
||||
inputToolOptions={
|
||||
agentConfigurationOptions?.input_tools || {}
|
||||
}
|
||||
outputModeOptions={
|
||||
agentConfigurationOptions?.output_modes || {}
|
||||
}
|
||||
/>
|
||||
{authenticatedData && (
|
||||
<CreateAgentCard
|
||||
data={{
|
||||
slug: "",
|
||||
name: "",
|
||||
persona: "",
|
||||
color: "",
|
||||
icon: "",
|
||||
privacy_level: "private",
|
||||
managed_by_admin: false,
|
||||
chat_model: "",
|
||||
input_tools: [],
|
||||
output_modes: [],
|
||||
}}
|
||||
userProfile={authenticatedData}
|
||||
isMobileWidth={isMobileWidth}
|
||||
filesOptions={filesData || []}
|
||||
modelOptions={userConfig?.chat_model_options || []}
|
||||
selectedChatModelOption={defaultModelOption?.name || ""}
|
||||
isSubscribed={isSubscribed}
|
||||
setAgentChangeTriggered={setAgentChangeTriggered}
|
||||
inputToolOptions={
|
||||
agentConfigurationOptions?.input_tools || {}
|
||||
}
|
||||
outputModeOptions={
|
||||
agentConfigurationOptions?.output_modes || {}
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{showLoginPrompt && (
|
||||
<LoginPrompt
|
||||
loginRedirectMessage="Sign in to start chatting with a specialized agent"
|
||||
onOpenChange={setShowLoginPrompt}
|
||||
isMobileWidth={isMobileWidth}
|
||||
/>
|
||||
@@ -345,53 +349,59 @@ export default function Agents() {
|
||||
</Alert>
|
||||
<div className="pt-6 md:pt-8">
|
||||
<div className={`${styles.agentList}`}>
|
||||
{personalAgents.map((agent) => (
|
||||
<AgentCard
|
||||
key={agent.slug}
|
||||
data={agent}
|
||||
userProfile={authenticatedData}
|
||||
isMobileWidth={isMobileWidth}
|
||||
filesOptions={filesData ?? []}
|
||||
selectedChatModelOption={defaultModelOption?.name || ""}
|
||||
isSubscribed={isSubscribed}
|
||||
setAgentChangeTriggered={setAgentChangeTriggered}
|
||||
modelOptions={userConfig?.chat_model_options || []}
|
||||
editCard={true}
|
||||
agentSlug={agentSlug || ""}
|
||||
inputToolOptions={
|
||||
agentConfigurationOptions?.input_tools || {}
|
||||
}
|
||||
outputModeOptions={
|
||||
agentConfigurationOptions?.output_modes || {}
|
||||
}
|
||||
/>
|
||||
))}
|
||||
{authenticatedData &&
|
||||
personalAgents.map((agent) => (
|
||||
<AgentCard
|
||||
key={agent.slug}
|
||||
data={agent}
|
||||
userProfile={authenticatedData}
|
||||
isMobileWidth={isMobileWidth}
|
||||
filesOptions={filesData ?? []}
|
||||
selectedChatModelOption={
|
||||
defaultModelOption?.name || ""
|
||||
}
|
||||
isSubscribed={isSubscribed}
|
||||
setAgentChangeTriggered={setAgentChangeTriggered}
|
||||
modelOptions={userConfig?.chat_model_options || []}
|
||||
editCard={true}
|
||||
agentSlug={agentSlug || ""}
|
||||
inputToolOptions={
|
||||
agentConfigurationOptions?.input_tools || {}
|
||||
}
|
||||
outputModeOptions={
|
||||
agentConfigurationOptions?.output_modes || {}
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-6 md:pt-8">
|
||||
<h2 className="text-2xl">Explore</h2>
|
||||
<div className={`${styles.agentList}`}>
|
||||
{publicAgents.map((agent) => (
|
||||
<AgentCard
|
||||
key={agent.slug}
|
||||
data={agent}
|
||||
userProfile={authenticatedData}
|
||||
isMobileWidth={isMobileWidth}
|
||||
editCard={false}
|
||||
filesOptions={filesData ?? []}
|
||||
selectedChatModelOption={defaultModelOption?.name || ""}
|
||||
isSubscribed={isSubscribed}
|
||||
setAgentChangeTriggered={setAgentChangeTriggered}
|
||||
modelOptions={userConfig?.chat_model_options || []}
|
||||
agentSlug={agentSlug || ""}
|
||||
inputToolOptions={
|
||||
agentConfigurationOptions?.input_tools || {}
|
||||
}
|
||||
outputModeOptions={
|
||||
agentConfigurationOptions?.output_modes || {}
|
||||
}
|
||||
/>
|
||||
))}
|
||||
{!authenticationLoading &&
|
||||
publicAgents.map((agent) => (
|
||||
<AgentCard
|
||||
key={agent.slug}
|
||||
data={agent}
|
||||
userProfile={authenticatedData || null}
|
||||
isMobileWidth={isMobileWidth}
|
||||
editCard={false}
|
||||
filesOptions={filesData ?? []}
|
||||
selectedChatModelOption={
|
||||
defaultModelOption?.name || ""
|
||||
}
|
||||
isSubscribed={isSubscribed}
|
||||
setAgentChangeTriggered={setAgentChangeTriggered}
|
||||
modelOptions={userConfig?.chat_model_options || []}
|
||||
agentSlug={agentSlug || ""}
|
||||
inputToolOptions={
|
||||
agentConfigurationOptions?.input_tools || {}
|
||||
}
|
||||
outputModeOptions={
|
||||
agentConfigurationOptions?.output_modes || {}
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -980,7 +980,11 @@ function AutomationComponentWrapper(props: AutomationComponentWrapperProps) {
|
||||
}
|
||||
|
||||
export default function Automations() {
|
||||
const authenticatedData = useAuthenticatedData();
|
||||
const {
|
||||
data: authenticatedData,
|
||||
error: authenticationError,
|
||||
isLoading: authenticationLoading,
|
||||
} = useAuthenticatedData();
|
||||
const {
|
||||
data: personalAutomations,
|
||||
error,
|
||||
@@ -1068,9 +1072,6 @@ export default function Automations() {
|
||||
</div>
|
||||
{showLoginPrompt && (
|
||||
<LoginPrompt
|
||||
loginRedirectMessage={
|
||||
"Create an account to make your own automation"
|
||||
}
|
||||
onOpenChange={setShowLoginPrompt}
|
||||
isMobileWidth={isMobileWidth}
|
||||
/>
|
||||
@@ -1114,7 +1115,7 @@ export default function Automations() {
|
||||
<Suspense>
|
||||
<SharedAutomationCard
|
||||
isMobileWidth={isMobileWidth}
|
||||
authenticatedData={authenticatedData}
|
||||
authenticatedData={authenticatedData || null}
|
||||
locationData={locationData}
|
||||
isLoggedIn={authenticatedData ? true : false}
|
||||
setShowLoginPrompt={setShowLoginPrompt}
|
||||
@@ -1123,7 +1124,8 @@ export default function Automations() {
|
||||
</Suspense>
|
||||
{isLoading && <InlineLoading message="booting up your automations" />}
|
||||
<div className={`${styles.automationsLayout}`}>
|
||||
{personalAutomations &&
|
||||
{authenticatedData &&
|
||||
personalAutomations &&
|
||||
personalAutomations.map((automation) => (
|
||||
<AutomationsCard
|
||||
isMobileWidth={isMobileWidth}
|
||||
@@ -1135,17 +1137,18 @@ export default function Automations() {
|
||||
setShowLoginPrompt={setShowLoginPrompt}
|
||||
/>
|
||||
))}
|
||||
{allNewAutomations.map((automation) => (
|
||||
<AutomationsCard
|
||||
isMobileWidth={isMobileWidth}
|
||||
key={automation.id}
|
||||
authenticatedData={authenticatedData}
|
||||
automation={automation}
|
||||
locationData={locationData}
|
||||
isLoggedIn={authenticatedData ? true : false}
|
||||
setShowLoginPrompt={setShowLoginPrompt}
|
||||
/>
|
||||
))}
|
||||
{authenticatedData &&
|
||||
allNewAutomations.map((automation) => (
|
||||
<AutomationsCard
|
||||
isMobileWidth={isMobileWidth}
|
||||
key={automation.id}
|
||||
authenticatedData={authenticatedData}
|
||||
automation={automation}
|
||||
locationData={locationData}
|
||||
isLoggedIn={authenticatedData ? true : false}
|
||||
setShowLoginPrompt={setShowLoginPrompt}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<h3 className="text-xl py-4">Explore</h3>
|
||||
<div className={`${styles.automationsLayout}`}>
|
||||
@@ -1154,7 +1157,7 @@ export default function Automations() {
|
||||
isMobileWidth={isMobileWidth}
|
||||
setNewAutomationData={setNewAutomationData}
|
||||
key={automation.id}
|
||||
authenticatedData={authenticatedData}
|
||||
authenticatedData={authenticatedData || null}
|
||||
automation={automation}
|
||||
locationData={locationData}
|
||||
isLoggedIn={authenticatedData ? true : false}
|
||||
|
||||
@@ -193,7 +193,11 @@ export default function Chat() {
|
||||
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
};
|
||||
const authenticatedData = useAuthenticatedData();
|
||||
const {
|
||||
data: authenticatedData,
|
||||
error: authenticationError,
|
||||
isLoading: authenticationLoading,
|
||||
} = useAuthenticatedData();
|
||||
const isMobileWidth = useIsMobileWidth();
|
||||
|
||||
useEffect(() => {
|
||||
@@ -425,7 +429,7 @@ export default function Chat() {
|
||||
<div className={styles.chatBoxBody}>
|
||||
<Suspense fallback={<Loading />}>
|
||||
<ChatBodyData
|
||||
isLoggedIn={authenticatedData !== null}
|
||||
isLoggedIn={authenticatedData ? true : false}
|
||||
streamedMessages={messages}
|
||||
setStreamedMessages={setMessages}
|
||||
chatOptionsData={chatOptionsData}
|
||||
|
||||
@@ -19,13 +19,11 @@ const fetcher = (url: string) =>
|
||||
.catch((err) => console.warn(err));
|
||||
|
||||
export function useAuthenticatedData() {
|
||||
const { data, error } = useSWR<UserProfile>("/api/v1/user", fetcher, {
|
||||
const { data, error, isLoading } = useSWR<UserProfile>("/api/v1/user", fetcher, {
|
||||
revalidateOnFocus: false,
|
||||
});
|
||||
|
||||
if (error || !data || data.detail === "Forbidden") return null;
|
||||
|
||||
return data;
|
||||
return { data, error, isLoading };
|
||||
}
|
||||
|
||||
export interface ModelOptions {
|
||||
|
||||
@@ -326,7 +326,6 @@ export function AgentCard(props: AgentCardProps) {
|
||||
<Card className={`shadow-md rounded-xl hover:shadow-lg dark:bg-muted`}>
|
||||
{showLoginPrompt && (
|
||||
<LoginPrompt
|
||||
loginRedirectMessage={`Sign in to start chatting with ${props.data.name}`}
|
||||
onOpenChange={setShowLoginPrompt}
|
||||
isMobileWidth={props.isMobileWidth}
|
||||
/>
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
import styles from "./sidePanel.module.css";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useRef } from "react";
|
||||
|
||||
import { mutate } from "swr";
|
||||
|
||||
@@ -102,14 +101,10 @@ import {
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { modifyFileFilterForConversation } from "@/app/common/chatFunctions";
|
||||
import { ScrollAreaScrollbar } from "@radix-ui/react-scroll-area";
|
||||
import { KhojLogoType } from "@/app/components/logo/khojLogo";
|
||||
import NavMenu from "@/app/components/navMenu/navMenu";
|
||||
import { getIconFromIconName } from "@/app/common/iconUtils";
|
||||
import LoginPrompt from "../loginPrompt/loginPrompt";
|
||||
import {
|
||||
SidebarGroup,
|
||||
SidebarGroupLabel,
|
||||
SidebarMenu,
|
||||
SidebarMenuAction,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
@@ -908,9 +903,12 @@ export default function AllConversations(props: SidePanelProps) {
|
||||
const [data, setData] = useState<ChatHistory[] | null>(null);
|
||||
const [organizedData, setOrganizedData] = useState<GroupedChatHistory | null>(null);
|
||||
const [subsetOrganizedData, setSubsetOrganizedData] = useState<GroupedChatHistory | null>(null);
|
||||
const [showLoginPrompt, setShowLoginPrompt] = useState(false);
|
||||
|
||||
const authenticatedData = useAuthenticatedData();
|
||||
const {
|
||||
data: authenticatedData,
|
||||
error: authenticationError,
|
||||
isLoading: authenticationLoading,
|
||||
} = useAuthenticatedData();
|
||||
const { data: chatSessions, isLoading } = useChatSessionsFetchRequest(
|
||||
authenticatedData ? `/api/chat/sessions` : "",
|
||||
);
|
||||
|
||||
@@ -1,18 +1,14 @@
|
||||
import { Calendar, Home, Inbox, Search, Settings } from "lucide-react";
|
||||
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
} from "@/components/ui/sidebar";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
KhojAgentLogo,
|
||||
KhojAutomationLogo,
|
||||
@@ -21,12 +17,12 @@ import {
|
||||
KhojSearchLogo,
|
||||
} from "../logo/khojLogo";
|
||||
import { Gear } from "@phosphor-icons/react/dist/ssr";
|
||||
import { House, Plus } from "@phosphor-icons/react";
|
||||
import { Plus } from "@phosphor-icons/react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useAuthenticatedData } from "@/app/common/auth";
|
||||
import AllConversations from "../allConversations/allConversations";
|
||||
import NavMenu from "../navMenu/navMenu";
|
||||
import { useSidebar } from "@/components/ui/sidebar";
|
||||
import { useIsMobileWidth } from "@/app/common/utils";
|
||||
|
||||
// Menu items.
|
||||
const items = [
|
||||
@@ -66,21 +62,11 @@ interface AppSidebarProps {
|
||||
}
|
||||
|
||||
export function AppSidebar(props: AppSidebarProps) {
|
||||
const [isMobileWidth, setIsMobileWidth] = useState(false);
|
||||
const isMobileWidth = useIsMobileWidth();
|
||||
|
||||
const { state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar } =
|
||||
useSidebar();
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setIsMobileWidth(window.innerWidth < 768);
|
||||
};
|
||||
|
||||
handleResize();
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Sidebar collapsible={"icon"} variant="sidebar">
|
||||
<SidebarHeader>
|
||||
|
||||
@@ -409,7 +409,6 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
|
||||
<LoginPrompt
|
||||
onOpenChange={setShowLoginPrompt}
|
||||
isMobileWidth={props.isMobileWidth}
|
||||
loginRedirectMessage={loginRedirectMessage}
|
||||
/>
|
||||
)}
|
||||
{uploading && (
|
||||
|
||||
@@ -29,7 +29,6 @@ import { Card, CardContent } from "@/components/ui/card";
|
||||
import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
|
||||
|
||||
export interface LoginPromptProps {
|
||||
loginRedirectMessage: string;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
isMobileWidth?: boolean;
|
||||
}
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
select.modelPicker {
|
||||
font-size: small;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
border: none;
|
||||
border-width: 1px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 2.5rem;
|
||||
justify-content: space-between;
|
||||
border-radius: calc(0.5rem - 2px);
|
||||
}
|
||||
|
||||
select.modelPicker:after {
|
||||
grid-area: select;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
div.modelPicker {
|
||||
margin-top: 8px;
|
||||
}
|
||||
@@ -1,166 +0,0 @@
|
||||
import { useAuthenticatedData } from "@/app/common/auth";
|
||||
import React, { useEffect } from "react";
|
||||
import useSWR from "swr";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
|
||||
import styles from "./modelPicker.module.css";
|
||||
|
||||
export interface Model {
|
||||
id: number;
|
||||
chat_model: string;
|
||||
}
|
||||
|
||||
// Custom fetcher function to fetch options
|
||||
const fetchOptionsRequest = async (url: string) => {
|
||||
const response = await fetch(url, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
return response.json();
|
||||
};
|
||||
|
||||
export const useOptionsRequest = (url: string) => {
|
||||
const { data, error } = useSWR<Model[]>(url, fetchOptionsRequest);
|
||||
|
||||
return {
|
||||
data,
|
||||
isLoading: !error && !data,
|
||||
isError: error,
|
||||
};
|
||||
};
|
||||
|
||||
const fetchSelectedModel = async (url: string) => {
|
||||
const response = await fetch(url, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
return response.json();
|
||||
};
|
||||
|
||||
export const useSelectedModel = (url: string) => {
|
||||
const { data, error } = useSWR<Model>(url, fetchSelectedModel);
|
||||
|
||||
return {
|
||||
data,
|
||||
isLoading: !error && !data,
|
||||
isError: error,
|
||||
};
|
||||
};
|
||||
|
||||
interface ModelPickerProps {
|
||||
disabled?: boolean;
|
||||
setModelUsed?: (model: Model) => void;
|
||||
initialModel?: Model;
|
||||
}
|
||||
|
||||
export const ModelPicker: React.FC<any> = (props: ModelPickerProps) => {
|
||||
const { data: models } = useOptionsRequest("/api/model/chat/options");
|
||||
const { data: selectedModel } = useSelectedModel("/api/model/chat");
|
||||
const [openLoginDialog, setOpenLoginDialog] = React.useState(false);
|
||||
|
||||
let userData = useAuthenticatedData();
|
||||
|
||||
const setModelUsed = props.setModelUsed;
|
||||
|
||||
useEffect(() => {
|
||||
if (setModelUsed && selectedModel) {
|
||||
setModelUsed(selectedModel);
|
||||
}
|
||||
}, [selectedModel, setModelUsed]);
|
||||
|
||||
if (!models) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
function onSelect(model: Model) {
|
||||
if (!userData) {
|
||||
setOpenLoginDialog(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (props.setModelUsed) {
|
||||
props.setModelUsed(model);
|
||||
}
|
||||
|
||||
fetch("/api/model/chat" + "?id=" + String(model.id), {
|
||||
method: "POST",
|
||||
body: JSON.stringify(model),
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to select model");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Failed to select model", error);
|
||||
});
|
||||
}
|
||||
|
||||
function isSelected(model: Model) {
|
||||
if (props.initialModel) {
|
||||
return model.id === props.initialModel.id;
|
||||
}
|
||||
return selectedModel?.id === model.id;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.modelPicker}>
|
||||
<select
|
||||
className={styles.modelPicker}
|
||||
onChange={(e) => {
|
||||
const selectedModelId = Number(e.target.value);
|
||||
const selectedModel = models.find((model) => model.id === selectedModelId);
|
||||
if (selectedModel) {
|
||||
onSelect(selectedModel);
|
||||
} else {
|
||||
console.error("Selected model not found", e.target.value);
|
||||
}
|
||||
}}
|
||||
disabled={props.disabled}
|
||||
>
|
||||
{models?.map((model) => (
|
||||
<option key={model.id} value={model.id} selected={isSelected(model)}>
|
||||
{model.chat_model}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<AlertDialog open={openLoginDialog} onOpenChange={setOpenLoginDialog}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>
|
||||
You must be logged in to configure your model.
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Once you create an account with Khoj, you can configure your model and
|
||||
use a whole suite of other features. Check out our{" "}
|
||||
<a href="https://docs.khoj.dev/">documentation</a> to learn more.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => {
|
||||
window.location.href = window.location.origin + "/login";
|
||||
}}
|
||||
>
|
||||
Sign in
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,20 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import styles from "./navMenu.module.css";
|
||||
import Link from "next/link";
|
||||
import { useAuthenticatedData } from "@/app/common/auth";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
|
||||
|
||||
import {
|
||||
Menubar,
|
||||
MenubarContent,
|
||||
MenubarItem,
|
||||
MenubarMenu,
|
||||
MenubarSeparator,
|
||||
MenubarTrigger,
|
||||
} from "@/components/ui/menubar";
|
||||
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
@@ -22,8 +12,7 @@ import {
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Moon, Sun, UserCircle, Question, GearFine, ArrowRight, Code } from "@phosphor-icons/react";
|
||||
import { KhojAgentLogo, KhojAutomationLogo, KhojSearchLogo } from "../logo/khojLogo";
|
||||
import { Moon, Sun, UserCircle, Question, ArrowRight, Code } from "@phosphor-icons/react";
|
||||
import { useIsMobileWidth } from "@/app/common/utils";
|
||||
import LoginPrompt from "../loginPrompt/loginPrompt";
|
||||
import { Button } from "@/components/ui/button";
|
||||
@@ -55,10 +44,13 @@ interface NavMenuProps {
|
||||
}
|
||||
|
||||
export default function NavMenu({ sideBarIsOpen }: NavMenuProps) {
|
||||
const userData = useAuthenticatedData();
|
||||
const {
|
||||
data: userData,
|
||||
error: authenticationError,
|
||||
isLoading: authenticationLoading,
|
||||
} = useAuthenticatedData();
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
const [initialLoadDone, setInitialLoadDone] = useState(false);
|
||||
const isMobileWidth = useIsMobileWidth();
|
||||
const [showLoginPrompt, setShowLoginPrompt] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -97,6 +89,12 @@ export default function NavMenu({ sideBarIsOpen }: NavMenuProps) {
|
||||
return (
|
||||
<SidebarMenu className="border-none p-0 m-0">
|
||||
<SidebarMenuItem className="p-0 m-0">
|
||||
{showLoginPrompt && (
|
||||
<LoginPrompt
|
||||
onOpenChange={(isOpen) => setShowLoginPrompt(isOpen)}
|
||||
isMobileWidth={useIsMobileWidth()}
|
||||
/>
|
||||
)}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<SidebarMenuButton className="p-0 m-0 rounded-lg" asChild>
|
||||
|
||||
@@ -222,7 +222,6 @@ function ChatBodyData(props: ChatBodyDataProps) {
|
||||
<LoginPrompt
|
||||
onOpenChange={setShowLoginPrompt}
|
||||
isMobileWidth={props.isMobileWidth}
|
||||
loginRedirectMessage={"Login to your second brain"}
|
||||
/>
|
||||
)}
|
||||
{!props.isLoggedIn && (
|
||||
@@ -425,7 +424,11 @@ export default function Home() {
|
||||
const { userConfig: initialUserConfig, isLoadingUserConfig } = useUserConfig(true);
|
||||
const [userConfig, setUserConfig] = useState<UserConfig | null>(null);
|
||||
|
||||
const authenticatedData = useAuthenticatedData();
|
||||
const {
|
||||
data: authenticatedData,
|
||||
error: authenticationError,
|
||||
isLoading: authenticationLoading,
|
||||
} = useAuthenticatedData();
|
||||
|
||||
const handleConversationIdChange = (newConversationId: string) => {
|
||||
setConversationID(newConversationId);
|
||||
@@ -477,15 +480,17 @@ export default function Home() {
|
||||
<title>Khoj AI - Your Second Brain</title>
|
||||
<div className={`${styles.chatBox}`}>
|
||||
<div className={`${styles.chatBoxBody}`}>
|
||||
<ChatBodyData
|
||||
isLoggedIn={authenticatedData !== null}
|
||||
chatOptionsData={chatOptionsData}
|
||||
setUploadedFiles={setUploadedFiles}
|
||||
isMobileWidth={isMobileWidth}
|
||||
onConversationIdChange={handleConversationIdChange}
|
||||
userConfig={userConfig}
|
||||
isLoadingUserConfig={isLoadingUserConfig}
|
||||
/>
|
||||
{!authenticationLoading && (
|
||||
<ChatBodyData
|
||||
isLoggedIn={authenticatedData ? true : false}
|
||||
chatOptionsData={chatOptionsData}
|
||||
setUploadedFiles={setUploadedFiles}
|
||||
isMobileWidth={isMobileWidth}
|
||||
onConversationIdChange={handleConversationIdChange}
|
||||
userConfig={userConfig}
|
||||
isLoadingUserConfig={isLoadingUserConfig}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -38,7 +38,6 @@ import {
|
||||
Key,
|
||||
Palette,
|
||||
UserCircle,
|
||||
FileMagnifyingGlass,
|
||||
Trash,
|
||||
Copy,
|
||||
CreditCard,
|
||||
@@ -499,7 +498,6 @@ enum PhoneNumberValidationState {
|
||||
}
|
||||
|
||||
export default function SettingsView() {
|
||||
const [title, setTitle] = useState("Settings");
|
||||
const { apiKeys, generateAPIKey, copyAPIKey, deleteAPIKey } = useApiKeys();
|
||||
const { userConfig: initialUserConfig } = useUserConfig(true);
|
||||
const [userConfig, setUserConfig] = useState<UserConfig | null>(null);
|
||||
@@ -514,6 +512,8 @@ export default function SettingsView() {
|
||||
const { toast } = useToast();
|
||||
const isMobileWidth = useIsMobileWidth();
|
||||
|
||||
const title = "Settings";
|
||||
|
||||
const cardClassName =
|
||||
"w-full lg:w-1/3 grid grid-flow-column border border-gray-300 shadow-md rounded-lg border dark:border-none dark:bg-muted border-opacity-50";
|
||||
|
||||
|
||||
@@ -123,7 +123,11 @@ export default function SharedChat() {
|
||||
const [paramSlug, setParamSlug] = useState<string | undefined>(undefined);
|
||||
const [images, setImages] = useState<string[]>([]);
|
||||
|
||||
const authenticatedData = useAuthenticatedData();
|
||||
const {
|
||||
data: authenticatedData,
|
||||
error: authenticationError,
|
||||
isLoading: authenticationLoading,
|
||||
} = useAuthenticatedData();
|
||||
const isMobileWidth = useIsMobileWidth();
|
||||
|
||||
useEffect(() => {
|
||||
@@ -222,7 +226,7 @@ export default function SharedChat() {
|
||||
conversationId={conversationId}
|
||||
streamedMessages={messages}
|
||||
setQueryToProcess={setQueryToProcess}
|
||||
isLoggedIn={authenticatedData !== null}
|
||||
isLoggedIn={authenticatedData ? true : false}
|
||||
publicConversationSlug={paramSlug}
|
||||
chatOptionsData={chatOptionsData}
|
||||
setTitle={setTitle}
|
||||
|
||||
Reference in New Issue
Block a user