Show agent profile card with description when hover on agent in chat view

- Create profile card componennt. Use it for agent profile card
- Pass agent persona from khoj server via API
- Put link to agent profile page in the hover card to make it 2 clicks
  away. Othewise inadvertent clicks on agent in chat view lead away to
  agent page
- Use tailwind line-clamp extension to clamp card to first two lines

src/interface/web/app/components/chatHistory/chatHistory.module.css

@@ -17,10 +17,6 @@ div.agentIndicator a {
     align-items: center;
 }
 
-div.agentIndicator {
-    padding: 10px;
-}
-
 div.trainOfThought {
     border: 1px var(--border-color) solid;
     border-radius: 16px;

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

@@ -11,9 +11,10 @@ import renderMathInElement from 'katex/contrib/auto-render';
 import 'katex/dist/katex.min.css';
 import 'highlight.js/styles/github.css'
 
-import Loading, { InlineLoading } from '../loading/loading';
+import { InlineLoading } from '../loading/loading';
 
-import { Lightbulb } from "@phosphor-icons/react";
+import ProfileCard from '../profileCard/profileCard';
+import { Lightbulb } from '@phosphor-icons/react';
 
 interface ChatResponse {
     status: string;
@@ -232,6 +233,10 @@ export default function ChatHistory(props: ChatHistoryProps) {
         return data.agent.name;
     }
 
+    function constructAgentPersona() {
+        if (!data || !data.agent || !data.agent.persona) return ``;
+        return data.agent.persona;
+    }
 
     if (!props.conversationId && !props.publicConversationSlug) {
         return null;
@@ -323,11 +328,15 @@ export default function ChatHistory(props: ChatHistoryProps) {
                             isLastMessage={true}
                         />
                     }
-                    <div className={`${styles.agentIndicator}`}>
-                        <a className='no-underline mx-2 flex text-muted-foreground' href={constructAgentLink()} target="_blank" rel="noreferrer">
-                            <Lightbulb color='orange' weight='fill' />
-                            <span>{constructAgentName()}</span>
-                        </a>
+                    <div className={`${styles.agentIndicator} pb-4`}>
+                        <div className="relative group mx-2 cursor-pointer">
+                            <ProfileCard
+                                name={constructAgentName()}
+                                link={constructAgentLink()}
+                                avatar={<Lightbulb color='orange' weight='fill' className="mt-1 mx-1" />}
+                                description={constructAgentPersona()}
+                            />
+                        </div>
                     </div>
                 </div>
             </div>

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

@@ -76,6 +76,7 @@ interface AgentData {
     name: string;
     avatar: string;
     slug: string;
+    persona: string;
 }
 
 interface Intent {

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ArrowRight } from '@phosphor-icons/react';
+
+interface ProfileCardProps {
+	name: string;
+    avatar: JSX.Element;
+	link: string;
+	description?: string; // Optional description field
+}
+
+const ProfileCard: React.FC<ProfileCardProps> = ({ name, avatar, link, description }) => {
+	return (
+		<div className="relative group flex">
+            {avatar}
+            <span>{name}</span>
+			<div className="absolute left-0 bottom-full w-80 h-30 p-2 pb-4 bg-white border border-gray-300 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+				<div className="flex items-center">
+                    {avatar}
+                    <span className="mr-2 mt-1 flex">
+                        {name}
+                        <a href={link} target="_blank" rel="noreferrer" className="mt-1 ml-2 block">
+                            <ArrowRight weight="bold"/>
+                        </a>
+                    </span>
+				</div>
+				{description && (
+					<p className="mt-2 ml-6 text-sm text-gray-600 line-clamp-2">
+						{description || 'A Khoj agent'}
+					</p>
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default ProfileCard;

src/interface/web/package.json

@@ -31,6 +31,7 @@
     "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toggle": "^1.1.0",
+    "@tailwindcss/line-clamp": "^0.4.4",
     "@types/dompurify": "^3.0.5",
     "@types/katex": "^0.16.7",
     "@types/markdown-it": "^14.1.1",

src/interface/web/tailwind.config.ts

@@ -74,7 +74,10 @@ const config = {
             },
         },
     },
-    plugins: [require("tailwindcss-animate")],
+    plugins: [
+        require("tailwindcss-animate"),
+        require('@tailwindcss/line-clamp'),
+    ],
 } satisfies Config
 
 export default config

src/interface/web/yarn.lock

@@ -1035,6 +1035,11 @@
     "@swc/counter" "^0.1.3"
     tslib "^2.4.0"
 
+"@tailwindcss/line-clamp@^0.4.4":
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz#767cf8e5d528a5d90c9740ca66eb079f5e87d423"
+  integrity sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==
+
 "@ts-morph/common@~0.19.0":
   version "0.19.0"
   resolved "https://registry.yarnpkg.com/@ts-morph/common/-/common-0.19.0.tgz#927fcd81d1bbc09c89c4a310a84577fb55f3694e"

src/khoj/routers/api_chat.py

@@ -212,6 +212,7 @@ def chat_history(
             "name": conversation.agent.name,
             "avatar": conversation.agent.avatar,
             "isCreator": conversation.agent.creator == user,
+            "persona": conversation.agent.personality,
         }
 
     meta_log = conversation.conversation_log
@@ -266,6 +267,7 @@ def get_shared_chat(
             "name": conversation.agent.name,
             "avatar": conversation.agent.avatar,
             "isCreator": conversation.agent.creator == user,
+            "persona": conversation.agent.personality,
         }
 
     meta_log = conversation.conversation_log