Include agent personality through subtasks and support custom agents (#916)

Currently, the personality of the agent is only included in the final response that it returns to the user. Historically, this was because models were quite bad at navigating the additional context of personality, and there was a bias towards having more control over certain operations (e.g., tool selection, question extraction).

Going forward, it should be more approachable to have prompts included in the sub tasks that Khoj runs in order to response to a given query. Make this possible in this PR. This also sets us up for agent creation becoming available soon.

Create custom agents in #928

Agents are useful insofar as you can personalize them to fulfill specific subtasks you need to accomplish. In this PR, we add support for using custom agents that can be configured with a custom system prompt (aka persona) and knowledge base (from your own indexed documents). Once created, private agents can be accessible only to the creator, and protected agents can be accessible via a direct link.

Custom tool selection for agents in #930

Expose the functionality to select which tools a given agent has access to. By default, they have all. Can limit both information sources and output modes.
Add new tools to the agent modification form

src/interface/web/app/components/chatInputArea/chatInputArea.tsx

@@ -50,6 +50,7 @@ import { convertToBGClass } from "@/app/common/colorUtils";
 import LoginPrompt from "../loginPrompt/loginPrompt";
 import { uploadDataForIndexing } from "../../common/chatFunctions";
 import { InlineLoading } from "../loading/loading";
+import { getIconForSlashCommand } from "@/app/common/iconUtils";
 
 export interface ChatOptions {
     [key: string]: string;
@@ -193,46 +194,6 @@ export default function ChatInputArea(props: ChatInputProps) {
         );
     }
 
-    function getIconForSlashCommand(command: string) {
-        const className = "h-4 w-4 mr-2";
-        if (command.includes("summarize")) {
-            return <Gps className={className} />;
-        }
-
-        if (command.includes("help")) {
-            return <Question className={className} />;
-        }
-
-        if (command.includes("automation")) {
-            return <Robot className={className} />;
-        }
-
-        if (command.includes("webpage")) {
-            return <Browser className={className} />;
-        }
-
-        if (command.includes("notes")) {
-            return <Notebook className={className} />;
-        }
-
-        if (command.includes("image")) {
-            return <Image className={className} />;
-        }
-
-        if (command.includes("default")) {
-            return <Shapes className={className} />;
-        }
-
-        if (command.includes("general")) {
-            return <ChatsTeardrop className={className} />;
-        }
-
-        if (command.includes("online")) {
-            return <GlobeSimple className={className} />;
-        }
-        return <ArrowRight className={className} />;
-    }
-
     // Assuming this function is added within the same context as the provided excerpt
     async function startRecordingAndTranscribe() {
         try {
@@ -426,7 +387,11 @@ export default function ChatInputArea(props: ChatInputProps) {
                                                     >
                                                         <div className="grid grid-cols-1 gap-1">
                                                             <div className="font-bold flex items-center">
-                                                                {getIconForSlashCommand(key)}/{key}
+                                                                {getIconForSlashCommand(
+                                                                    key,
+                                                                    "h-4 w-4 mr-2",
+                                                                )}
+                                                                /{key}
                                                             </div>
                                                             <div>{value}</div>
                                                         </div>