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.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>