klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-10 13:26:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve mobile friendliness and highlight missing necessary data

Browse Source
This commit is contained in:
sabaimran
2024-12-22 11:02:50 -08:00
parent 7032ccf130
commit 798837378f
2 changed files with 25 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/interface/web/app/agents/page.tsx
View File

@@ -140,7 +140,11 @@ function CreateAgentCard(props: CreateAgentCardProps) {
Create Agent Create Agent
</div> </div>
</DialogTrigger> </DialogTrigger>
<DialogContent className={"lg:max-w-screen-lg overflow-y-scroll max-h-screen"}> <DialogContent
className={
"lg:max-w-screen-lg py-4 overflow-y-scroll h-full md:h-4/6 rounded-lg flex flex-col"
}
>
<DialogHeader>Create Agent</DialogHeader> <DialogHeader>Create Agent</DialogHeader>
{!props.userProfile && showLoginPrompt && ( {!props.userProfile && showLoginPrompt && (
<LoginPrompt <LoginPrompt

38
src/interface/web/app/components/agentCard/agentCard.tsx
View File

@@ -429,7 +429,7 @@ export function AgentCard(props: AgentCardProps) {
{props.editCard ? ( {props.editCard ? (
<DialogContent <DialogContent
className={ className={
"lg:max-w-screen-lg py-4 overflow-y-scroll h-4/6 rounded-lg flex flex-col" "lg:max-w-screen-lg py-4 overflow-y-scroll h-full md:h-4/6 rounded-lg flex flex-col"
} }
> >
<DialogTitle> <DialogTitle>
@@ -535,6 +535,8 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
const basicFields = [ const basicFields = [
{ name: "name", label: "Name" }, { name: "name", label: "Name" },
{ name: "persona", label: "Personality" }, { name: "persona", label: "Personality" },
{ name: "color", label: "Color" },
{ name: "icon", label: "Icon" },
]; ];
const toolsFields = [ const toolsFields = [
@@ -545,17 +547,15 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
const knowledgeBaseFields = [{ name: "files", label: "Knowledge Base" }]; const knowledgeBaseFields = [{ name: "files", label: "Knowledge Base" }];
const customizationFields = [ const customizationFields = [
{ name: "color", label: "Color" },
{ name: "icon", label: "Icon" },
{ name: "chat_model", label: "Chat Model" }, { name: "chat_model", label: "Chat Model" },
{ name: "privacy_level", label: "Privacy Level" }, { name: "privacy_level", label: "Privacy Level" },
]; ];
const formGroups = [ const formGroups = [
{ fields: basicFields, label: "Basic Settings", tabName: "basic" }, { fields: basicFields, label: "1. Basic Settings", tabName: "basic" },
{ fields: customizationFields, label: "Customization & Access", tabName: "customize" }, { fields: customizationFields, label: "2. Model & Privacy", tabName: "customize" },
{ fields: knowledgeBaseFields, label: "Knowledge Base", tabName: "knowledge" }, { fields: knowledgeBaseFields, label: "3. Knowledge Base", tabName: "knowledge" },
{ fields: toolsFields, label: "Tools Settings", tabName: "tools" }, { fields: toolsFields, label: "4. Tools", tabName: "tools" },
]; ];
const fileInputRef = useRef<HTMLInputElement>(null); const fileInputRef = useRef<HTMLInputElement>(null);
@@ -754,7 +754,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
control={props.form.control} control={props.form.control}
name="chat_model" name="chat_model"
render={({ field }) => ( render={({ field }) => (
<FormItem className="my-3 grid gap-2"> <FormItem className="my-2 grid gap-2">
<FormLabel>Chat Model</FormLabel> <FormLabel>Chat Model</FormLabel>
<FormDescription> <FormDescription>
{!props.isSubscribed ? ( {!props.isSubscribed ? (
@@ -801,7 +801,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
control={props.form.control} control={props.form.control}
name="privacy_level" name="privacy_level"
render={({ field }) => ( render={({ field }) => (
<FormItem className="my-3 grid gap-2"> <FormItem className="my-2 grid gap-2">
<FormLabel> <FormLabel>
<div>Privacy Level</div> <div>Privacy Level</div>
</FormLabel> </FormLabel>
@@ -858,7 +858,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
control={props.form.control} control={props.form.control}
name="color" name="color"
render={({ field }) => ( render={({ field }) => (
<FormItem className="space-y-3"> <FormItem className="space-y-3 my-2">
<FormLabel>Color</FormLabel> <FormLabel>Color</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}> <Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl> <FormControl>
@@ -892,7 +892,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
control={props.form.control} control={props.form.control}
name="icon" name="icon"
render={({ field }) => ( render={({ field }) => (
<FormItem className="space-y-3"> <FormItem className="space-y-3 my-2">
<FormLabel>Icon</FormLabel> <FormLabel>Icon</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}> <Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl> <FormControl>
@@ -928,12 +928,12 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
control={props.form.control} control={props.form.control}
name="persona" name="persona"
render={({ field }) => ( render={({ field }) => (
<FormItem className="space-y-1 grid gap-2"> <FormItem className="space-y-1 my-2 grid gap-2">
<FormLabel>Personality</FormLabel> <FormLabel>Personality</FormLabel>
<FormDescription> <FormDescription>
What is the personality, thought process, or tuning of this What is the personality, thought process, or tuning of this
agent? Get creative; this is how you can influence the agent agent? This is where you can provide any instructions to the
constitution. agent.
</FormDescription> </FormDescription>
<FormControl> <FormControl>
<Textarea <Textarea
@@ -954,7 +954,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
control={props.form.control} control={props.form.control}
name="files" name="files"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex flex-col gap-2"> <FormItem className="my-2 flex flex-col gap-2">
<FormLabel>Knowledge Base</FormLabel> <FormLabel>Knowledge Base</FormLabel>
<FormDescription> <FormDescription>
Which information should be part of its digital brain?{" "} Which information should be part of its digital brain?{" "}
@@ -1259,7 +1259,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
<Form {...props.form}> <Form {...props.form}>
<form <form
onSubmit={props.form.handleSubmit(handleSubmit)} onSubmit={props.form.handleSubmit(handleSubmit)}
className="space-y-6 h-full flex flex-col justify-between" className="space-y-6 pb-4 h-full flex flex-col justify-between"
> >
<Tabs defaultValue="basic" value={formGroups[currentStep].tabName}> <Tabs defaultValue="basic" value={formGroups[currentStep].tabName}>
<TabsList className="grid grid-cols-2 md:grid-cols-4 gap-2 h-fit"> <TabsList className="grid grid-cols-2 md:grid-cols-4 gap-2 h-fit">
@@ -1267,13 +1267,15 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
<TabsTrigger <TabsTrigger
key={group.tabName} key={group.tabName}
value={group.tabName} value={group.tabName}
className={`text-center ${areRequiredFieldsCompletedForCurrentStep(group) ? "" : "text-red-500"}`}
onClick={() => onClick={() =>
setCurrentStep( setCurrentStep(
formGroups.findIndex((g) => g.tabName === group.tabName), formGroups.findIndex((g) => g.tabName === group.tabName),
) )
} }
> >
{group.label} {group.label}{" "}
{!areRequiredFieldsCompletedForCurrentStep(group) && "*"}
</TabsTrigger> </TabsTrigger>
))} ))}
</TabsList> </TabsList>
@@ -1304,7 +1306,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) {
} }
className={`items-center ${isSaving ? "bg-stone-100 dark:bg-neutral-900" : ""} text-white ${colorOptionClassName}`} className={`items-center ${isSaving ? "bg-stone-100 dark:bg-neutral-900" : ""} text-white ${colorOptionClassName}`}
> >
Next Continue
<ArrowRight className="ml-2 h-4 w-4" /> <ArrowRight className="ml-2 h-4 w-4" />
</Button> </Button>
) : ( ) : (