Merge branch 'main' of https://github.com/manishmadan2882/docsgpt

frontend/src/App.tsx

@@ -2,6 +2,10 @@ import './locale/i18n';
 
 import { useState } from 'react';
 import { Outlet, Route, Routes } from 'react-router-dom';
+
+import Agents from './agents';
+import SharedAgentGate from './agents/SharedAgentGate';
+import ActionButtons from './components/ActionButtons';
 import Spinner from './components/Spinner';
 import Conversation from './conversation/Conversation';
 import { SharedConversation } from './conversation/SharedConversation';
@@ -10,8 +14,6 @@ import useTokenAuth from './hooks/useTokenAuth';
 import Navigation from './Navigation';
 import PageNotFound from './PageNotFound';
 import Setting from './settings';
-import Agents from './agents';
-import ActionButtons from './components/ActionButtons';
 
 function AuthWrapper({ children }: { children: React.ReactNode }) {
   const { isAuthLoading } = useTokenAuth();
@@ -66,6 +68,7 @@ export default function App() {
           <Route path="/agents/*" element={<Agents />} />
         </Route>
         <Route path="/share/:identifier" element={<SharedConversation />} />
+        <Route path="/shared/agent/:agentId" element={<SharedAgentGate />} />
         <Route path="/*" element={<PageNotFound />} />
       </Routes>
     </div>

frontend/src/agents/SharedAgent.tsx

@@ -21,6 +21,7 @@ import {
 import { useDarkTheme } from '../hooks';
 import { selectToken, setSelectedAgent } from '../preferences/preferenceSlice';
 import { AppDispatch } from '../store';
+import SharedAgentCard from './SharedAgentCard';
 import { Agent } from './types';
 
 export default function SharedAgent() {
@@ -193,65 +194,3 @@ export default function SharedAgent() {
     </div>
   );
 }
-
-function SharedAgentCard({ agent }: { agent: Agent }) {
-  return (
-    <div className="flex w-full max-w-[720px] flex-col rounded-3xl border border-dark-gray p-6 shadow-sm dark:border-grey sm:w-fit sm:min-w-[480px]">
-      <div className="flex items-center gap-3">
-        <div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-full p-1">
-          <img src={Robot} className="h-full w-full object-contain" />
-        </div>
-        <div className="flex max-h-[92px] w-[80%] flex-col gap-px">
-          <h2 className="text-base font-semibold text-[#212121] dark:text-[#E0E0E0] sm:text-lg">
-            {agent.name}
-          </h2>
-          <p className="overflow-y-auto text-wrap break-all text-xs text-[#71717A] dark:text-[#949494] sm:text-sm">
-            {agent.description}
-          </p>
-        </div>
-      </div>
-      <div className="mt-4 flex items-center gap-8">
-        {agent.shared_metadata?.shared_by && (
-          <p className="text-xs font-light text-[#212121] dark:text-[#E0E0E0] sm:text-sm">
-            by {agent.shared_metadata.shared_by}
-          </p>
-        )}
-        {agent.shared_metadata?.shared_at && (
-          <p className="text-xs font-light text-[#71717A] dark:text-[#949494] sm:text-sm">
-            Shared on{' '}
-            {new Date(agent.shared_metadata.shared_at).toLocaleString('en-US', {
-              month: 'long',
-              day: 'numeric',
-              year: 'numeric',
-              hour: '2-digit',
-              minute: '2-digit',
-              hour12: true,
-            })}
-          </p>
-        )}
-      </div>
-      {agent.tools.length > 0 && (
-        <div className="mt-8">
-          <p className="text-sm font-semibold text-[#212121] dark:text-[#E0E0E0] sm:text-base">
-            Connected Tools
-          </p>
-          <div className="mt-2 flex flex-wrap gap-2">
-            {agent.tools.map((tool, index) => (
-              <span
-                key={index}
-                className="flex items-center gap-1 rounded-full bg-bright-gray px-3 py-1 text-xs font-light text-[#212121] dark:bg-dark-charcoal dark:text-[#E0E0E0]"
-              >
-                <img
-                  src={`/toolIcons/tool_${tool}.svg`}
-                  alt={`${tool} icon`}
-                  className="h-3 w-3"
-                />{' '}
-                {tool}
-              </span>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

frontend/src/agents/SharedAgentCard.tsx

@@ -0,0 +1,69 @@
+import Robot from '../assets/robot.svg';
+import { Agent } from './types';
+
+export default function SharedAgentCard({ agent }: { agent: Agent }) {
+  return (
+    <div className="flex w-full max-w-[720px] flex-col rounded-3xl border border-dark-gray p-6 shadow-sm dark:border-grey sm:w-fit sm:min-w-[480px]">
+      <div className="flex items-center gap-3">
+        <div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-full p-1">
+          <img src={Robot} className="h-full w-full object-contain" />
+        </div>
+        <div className="flex max-h-[92px] w-[80%] flex-col gap-px">
+          <h2 className="text-base font-semibold text-[#212121] dark:text-[#E0E0E0] sm:text-lg">
+            {agent.name}
+          </h2>
+          <p className="overflow-y-auto text-wrap break-all text-xs text-[#71717A] dark:text-[#949494] sm:text-sm">
+            {agent.description}
+          </p>
+        </div>
+      </div>
+      {agent.shared_metadata && (
+        <div className="mt-4 flex items-center gap-8">
+          {agent.shared_metadata?.shared_by && (
+            <p className="text-xs font-light text-[#212121] dark:text-[#E0E0E0] sm:text-sm">
+              by {agent.shared_metadata.shared_by}
+            </p>
+          )}
+          {agent.shared_metadata?.shared_at && (
+            <p className="text-xs font-light text-[#71717A] dark:text-[#949494] sm:text-sm">
+              Shared on{' '}
+              {new Date(agent.shared_metadata.shared_at).toLocaleString(
+                'en-US',
+                {
+                  month: 'long',
+                  day: 'numeric',
+                  year: 'numeric',
+                  hour: '2-digit',
+                  minute: '2-digit',
+                  hour12: true,
+                },
+              )}
+            </p>
+          )}
+        </div>
+      )}
+      {agent.tool_details && agent.tool_details.length > 0 && (
+        <div className="mt-8">
+          <p className="text-sm font-semibold text-[#212121] dark:text-[#E0E0E0] sm:text-base">
+            Connected Tools
+          </p>
+          <div className="mt-2 flex flex-wrap gap-2">
+            {agent.tool_details.map((tool, index) => (
+              <span
+                key={index}
+                className="flex items-center gap-1 rounded-full bg-bright-gray px-3 py-1 text-xs font-light text-[#212121] dark:bg-dark-charcoal dark:text-[#E0E0E0]"
+              >
+                <img
+                  src={`/toolIcons/tool_${tool.name}.svg`}
+                  alt={`${tool.name} icon`}
+                  className="h-3 w-3"
+                />{' '}
+                {tool.name}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/agents/SharedAgentGate.tsx

@@ -0,0 +1,7 @@
+import { Navigate, useParams } from 'react-router-dom';
+
+export default function SharedAgentGate() {
+  const { agentId } = useParams();
+
+  return <Navigate to={`/agents/shared/${agentId}`} replace />;
+}

frontend/src/agents/index.tsx

@@ -286,7 +286,10 @@ function AgentCard({
 
   const handleHideSharedAgent = async () => {
     try {
-      const response = await userService.hideSharedAgent(agent.id ?? '', token);
+      const response = await userService.removeSharedAgent(
+        agent.id ?? '',
+        token,
+      );
       if (!response.ok) throw new Error('Failed to hide shared agent');
       const updatedAgents = agents.filter(
         (prevAgent) => prevAgent.id !== agent.id,

frontend/src/agents/types/index.ts

@@ -1,3 +1,9 @@
+export type ToolSummary = {
+  id: string;
+  name: string;
+  display_name: string;
+};
+
 export type Agent = {
   id?: string;
   name: string;
@@ -8,6 +14,7 @@ export type Agent = {
   retriever: string;
   prompt_id: string;
   tools: string[];
+  tool_details?: ToolSummary[];
   agent_type: string;
   status: string;
   key?: string;

frontend/src/api/endpoints.ts

@@ -18,7 +18,7 @@ const endpoints = {
     SHARED_AGENT: (id: string) => `/api/shared_agent?token=${id}`,
     SHARED_AGENTS: '/api/shared_agents',
     SHARE_AGENT: `/api/share_agent`,
-    HIDE_SHARED_AGENT: (id: string) => `/api/hide_shared_agent?id=${id}`,
+    REMOVE_SHARED_AGENT: (id: string) => `/api/remove_shared_agent?id=${id}`,
     AGENT_WEBHOOK: (id: string) => `/api/agent_webhook?id=${id}`,
     PROMPTS: '/api/get_prompts',
     CREATE_PROMPT: '/api/create_prompt',

frontend/src/api/services/userService.ts

@@ -41,8 +41,8 @@ const userService = {
     apiClient.get(endpoints.USER.SHARED_AGENTS, token),
   shareAgent: (data: any, token: string | null): Promise<any> =>
     apiClient.put(endpoints.USER.SHARE_AGENT, data, token),
-  hideSharedAgent: (id: string, token: string | null): Promise<any> =>
-    apiClient.delete(endpoints.USER.HIDE_SHARED_AGENT(id), token),
+  removeSharedAgent: (id: string, token: string | null): Promise<any> =>
+    apiClient.delete(endpoints.USER.REMOVE_SHARED_AGENT(id), token),
   getAgentWebhook: (id: string, token: string | null): Promise<any> =>
     apiClient.get(endpoints.USER.AGENT_WEBHOOK(id), token),
   getPrompts: (token: string | null): Promise<any> =>

frontend/src/conversation/Conversation.tsx

@@ -3,6 +3,7 @@ import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
+import SharedAgentCard from '../agents/SharedAgentCard';
 import DragFileUpload from '../assets/DragFileUpload.svg';
 import MessageInput from '../components/MessageInput';
 import { useMediaQuery } from '../hooks';
@@ -193,6 +194,14 @@ export default function Conversation() {
         handleFeedback={handleFeedback}
         queries={queries}
         status={status}
+        showHeroOnEmpty={selectedAgent ? false : true}
+        headerContent={
+          selectedAgent ? (
+            <div className="flex w-full items-center justify-center py-4">
+              <SharedAgentCard agent={selectedAgent} />
+            </div>
+          ) : undefined
+        }
       />
 
       <div className="z-3 flex h-auto w-full max-w-[1300px] flex-col items-end self-center rounded-2xl bg-opacity-0 py-1 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">