Merge branch 'main' of https://github.com/arc53/DocsGPT

frontend/.env.development

@@ -1,3 +1,4 @@
 # Please put appropriate value
-VITE_API_HOST=http://0.0.0.0:7091
+VITE_BASE_URL=http://localhost:5173
+VITE_API_HOST=http://127.0.0.1:7091
 VITE_API_STREAMING=true

frontend/package-lock.json

@@ -2014,7 +2014,7 @@
       "version": "18.3.0",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
       "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -10619,7 +10619,7 @@
       "version": "5.7.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
       "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

frontend/src/Navigation.tsx

@@ -13,12 +13,14 @@ import Expand from './assets/expand.svg';
 import Github from './assets/github.svg';
 import Hamburger from './assets/hamburger.svg';
 import openNewChat from './assets/openNewChat.svg';
+import Pin from './assets/pin.svg';
 import Robot from './assets/robot.svg';
 import SettingGear from './assets/settingGear.svg';
 import Spark from './assets/spark.svg';
 import SpinnerDark from './assets/spinner-dark.svg';
 import Spinner from './assets/spinner.svg';
 import Twitter from './assets/TwitterX.svg';
+import UnPin from './assets/unpin.svg';
 import Help from './components/Help';
 import {
   handleAbort,
@@ -35,16 +37,16 @@ import JWTModal from './modals/JWTModal';
 import { ActiveState } from './models/misc';
 import { getConversations } from './preferences/preferenceApi';
 import {
+  selectAgents,
   selectConversationId,
   selectConversations,
   selectModalStateDeleteConv,
   selectSelectedAgent,
   selectToken,
+  setAgents,
   setConversations,
   setModalStateDeleteConv,
   setSelectedAgent,
-  setAgents,
-  selectAgents,
 } from './preferences/preferenceSlice';
 import Upload from './upload/Upload';
 
@@ -80,24 +82,34 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
 
   async function fetchRecentAgents() {
     try {
-      let recentAgents: Agent[] = [];
+      const response = await userService.getPinnedAgents(token);
+      if (!response.ok) throw new Error('Failed to fetch pinned agents');
+      const pinnedAgents: Agent[] = await response.json();
+      if (pinnedAgents.length >= 3) {
+        setRecentAgents(pinnedAgents);
+        return;
+      }
+      let tempAgents: Agent[] = [];
       if (!agents) {
         const response = await userService.getAgents(token);
         if (!response.ok) throw new Error('Failed to fetch agents');
         const data: Agent[] = await response.json();
         dispatch(setAgents(data));
-        recentAgents = data;
-      } else recentAgents = agents;
-      setRecentAgents(
-        recentAgents
-          .filter((agent: Agent) => agent.status === 'published')
-          .sort(
-            (a: Agent, b: Agent) =>
-              new Date(b.last_used_at ?? 0).getTime() -
-              new Date(a.last_used_at ?? 0).getTime(),
-          )
-          .slice(0, 3),
-      );
+        tempAgents = data;
+      } else tempAgents = agents;
+      const additionalAgents = tempAgents
+        .filter(
+          (agent: Agent) =>
+            agent.status === 'published' &&
+            !pinnedAgents.some((pinned) => pinned.id === agent.id),
+        )
+        .sort(
+          (a: Agent, b: Agent) =>
+            new Date(b.last_used_at ?? 0).getTime() -
+            new Date(a.last_used_at ?? 0).getTime(),
+        )
+        .slice(0, 3 - pinnedAgents.length);
+      setRecentAgents([...pinnedAgents, ...additionalAgents]);
     } catch (error) {
       console.error('Failed to fetch recent agents: ', error);
     }
@@ -116,7 +128,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   }
 
   useEffect(() => {
-    if (token) fetchRecentAgents();
+    fetchRecentAgents();
   }, [agents, token, dispatch]);
 
   useEffect(() => {
@@ -152,12 +164,23 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
     navigate('/');
   };
 
+  const handleTogglePin = (agent: Agent) => {
+    userService.togglePinAgent(agent.id ?? '', token).then((response) => {
+      if (response.ok) {
+        const updatedAgents = agents?.map((a) =>
+          a.id === agent.id ? { ...a, pinned: !a.pinned } : a,
+        );
+        dispatch(setAgents(updatedAgents));
+      }
+    });
+  };
+
   const handleConversationClick = (index: string) => {
+    dispatch(setSelectedAgent(null));
     conversationService
       .getConversation(index, token)
       .then((response) => response.json())
       .then((data) => {
-        navigate('/');
         dispatch(setConversation(data.queries));
         dispatch(
           updateConversationId({
@@ -165,14 +188,30 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           }),
         );
         if (data.agent_id) {
-          userService.getAgent(data.agent_id, token).then((response) => {
-            if (response.ok) {
-              response.json().then((agent: Agent) => {
-                dispatch(setSelectedAgent(agent));
+          if (data.is_shared_usage) {
+            userService
+              .getSharedAgent(data.shared_token, token)
+              .then((response) => {
+                if (response.ok) {
+                  response.json().then((agent: Agent) => {
+                    navigate(`/agents/shared/${agent.shared_token}`);
+                  });
+                }
               });
-            }
-          });
-        } else dispatch(setSelectedAgent(null));
+          } else {
+            userService.getAgent(data.agent_id, token).then((response) => {
+              if (response.ok) {
+                response.json().then((agent: Agent) => {
+                  navigate('/');
+                  dispatch(setSelectedAgent(agent));
+                });
+              }
+            });
+          }
+        } else {
+          navigate('/');
+          dispatch(setSelectedAgent(null));
+        }
       });
   };
 
@@ -336,23 +375,41 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                   {recentAgents.map((agent, idx) => (
                     <div
                       key={idx}
-                      className={`mx-4 my-auto mt-4 flex h-9 cursor-pointer items-center gap-2 rounded-3xl pl-4 hover:bg-bright-gray dark:hover:bg-dark-charcoal ${
+                      className={`group mx-4 my-auto mt-4 flex h-9 cursor-pointer items-center justify-between rounded-3xl pl-4 hover:bg-bright-gray dark:hover:bg-dark-charcoal ${
                         agent.id === selectedAgent?.id && !conversationId
                           ? 'bg-bright-gray dark:bg-dark-charcoal'
                           : ''
                       }`}
                       onClick={() => handleAgentClick(agent)}
                     >
-                      <div className="flex w-6 justify-center">
-                        <img
-                          src={agent.image ?? Robot}
-                          alt="agent-logo"
-                          className="h-6 w-6 rounded-full"
-                        />
+                      <div className="flex items-center gap-2">
+                        <div className="flex w-6 justify-center">
+                          <img
+                            src={agent.image ?? Robot}
+                            alt="agent-logo"
+                            className="h-6 w-6"
+                          />
+                        </div>
+                        <p className="overflow-hidden overflow-ellipsis whitespace-nowrap text-sm leading-6 text-eerie-black dark:text-bright-gray">
+                          {agent.name}
+                        </p>
+                      </div>
+                      <div
+                        className={`${isMobile ? 'flex' : 'invisible flex group-hover:visible'} items-center px-3`}
+                      >
+                        <button
+                          className="rounded-full hover:opacity-75"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleTogglePin(agent);
+                          }}
+                        >
+                          <img
+                            src={agent.pinned ? UnPin : Pin}
+                            className="h-4 w-4"
+                          ></img>
+                        </button>
                       </div>
-                      <p className="overflow-hidden overflow-ellipsis whitespace-nowrap text-sm leading-6 text-eerie-black dark:text-bright-gray">
-                        {agent.name}
-                      </p>
                     </div>
                   ))}
                 </div>

frontend/src/agents/AgentCard.tsx

@@ -0,0 +1,123 @@
+import { useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+
+import userService from '../api/services/userService';
+import Robot from '../assets/robot.svg';
+import ThreeDots from '../assets/three-dots.svg';
+import ContextMenu, { MenuOption } from '../components/ContextMenu';
+import ConfirmationModal from '../modals/ConfirmationModal';
+import { ActiveState } from '../models/misc';
+import {
+  selectToken,
+  setAgents,
+  setSelectedAgent,
+} from '../preferences/preferenceSlice';
+import { Agent } from './types';
+
+type AgentCardProps = {
+  agent: Agent;
+  agents: Agent[];
+  menuOptions?: MenuOption[];
+  onDelete?: (agentId: string) => void;
+};
+
+export default function AgentCard({
+  agent,
+  agents,
+  menuOptions,
+  onDelete,
+}: AgentCardProps) {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const token = useSelector(selectToken);
+
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [deleteConfirmation, setDeleteConfirmation] =
+    useState<ActiveState>('INACTIVE');
+
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const handleCardClick = () => {
+    if (agent.status === 'published') {
+      dispatch(setSelectedAgent(agent));
+      navigate('/');
+    }
+  };
+
+  const defaultDelete = async (agentId: string) => {
+    const response = await userService.deleteAgent(agentId, token);
+    if (!response.ok) throw new Error('Failed to delete agent');
+    const data = await response.json();
+    dispatch(setAgents(agents.filter((prevAgent) => prevAgent.id !== data.id)));
+  };
+
+  return (
+    <div
+      className={`relative flex h-44 w-48 flex-col justify-between rounded-[1.2rem] bg-[#F6F6F6] px-6 py-5 hover:bg-[#ECECEC] dark:bg-[#383838] hover:dark:bg-[#383838]/80 ${
+        agent.status === 'published' ? 'cursor-pointer' : ''
+      }`}
+      onClick={handleCardClick}
+    >
+      <div
+        ref={menuRef}
+        onClick={(e) => {
+          e.stopPropagation();
+          setIsMenuOpen(true);
+        }}
+        className="absolute right-4 top-4 z-10 cursor-pointer"
+      >
+        <img src={ThreeDots} alt="options" className="h-[19px] w-[19px]" />
+        {menuOptions && (
+          <ContextMenu
+            isOpen={isMenuOpen}
+            setIsOpen={setIsMenuOpen}
+            options={menuOptions}
+            anchorRef={menuRef}
+            position="top-right"
+            offset={{ x: 0, y: 0 }}
+          />
+        )}
+      </div>
+
+      <div className="w-full">
+        <div className="flex w-full items-center gap-1 px-1">
+          <img
+            src={agent.image ?? Robot}
+            alt={`${agent.name}`}
+            className="h-7 w-7 rounded-full"
+          />
+          {agent.status === 'draft' && (
+            <p className="text-xs text-black opacity-50 dark:text-[#E0E0E0]">
+              (Draft)
+            </p>
+          )}
+        </div>
+        <div className="mt-2">
+          <p
+            title={agent.name}
+            className="truncate px-1 text-[13px] font-semibold capitalize leading-relaxed text-[#020617] dark:text-[#E0E0E0]"
+          >
+            {agent.name}
+          </p>
+          <p className="mt-1 h-20 overflow-auto px-1 text-[12px] leading-relaxed text-[#64748B] dark:text-sonic-silver-light">
+            {agent.description}
+          </p>
+        </div>
+      </div>
+
+      <ConfirmationModal
+        message="Are you sure you want to delete this agent?"
+        modalState={deleteConfirmation}
+        setModalState={setDeleteConfirmation}
+        submitLabel="Delete"
+        handleSubmit={() => {
+          onDelete ? onDelete(agent.id || '') : defaultDelete(agent.id || '');
+          setDeleteConfirmation('INACTIVE');
+        }}
+        cancelLabel="Cancel"
+        variant="danger"
+      />
+    </div>
+  );
+}

frontend/src/agents/AgentLogs.tsx

@@ -4,10 +4,10 @@ import { useNavigate, useParams } from 'react-router-dom';
 
 import userService from '../api/services/userService';
 import ArrowLeft from '../assets/arrow-left.svg';
+import Spinner from '../components/Spinner';
 import { selectToken } from '../preferences/preferenceSlice';
 import Analytics from '../settings/Analytics';
 import Logs from '../settings/Logs';
-import Spinner from '../components/Spinner';
 import { Agent } from './types';
 
 export default function AgentLogs() {
@@ -54,11 +54,16 @@ export default function AgentLogs() {
         </h1>
       </div>
       <div className="mt-6 flex flex-col gap-3 px-4">
-        <h2 className="text-sm font-semibold text-black dark:text-[#E0E0E0]">
-          Agent Name
-        </h2>
         {agent && (
-          <p className="text-[#28292E] dark:text-[#E0E0E0]">{agent.name}</p>
+          <div className="flex flex-col gap-1">
+            <p className="text-[#28292E] dark:text-[#E0E0E0]">{agent.name}</p>
+            <p className="text-xs text-[#28292E] dark:text-[#E0E0E0]/40">
+              {agent.last_used_at
+                ? 'Last used at ' +
+                  new Date(agent.last_used_at).toLocaleString()
+                : 'No usage history'}
+            </p>
+          </div>
         )}
       </div>
       {loadingAgent ? (
@@ -74,7 +79,7 @@ export default function AgentLogs() {
           <Spinner />
         </div>
       ) : (
-        agent && <Logs agentId={agentId} tableHeader="Agent endpoint logs" />
+        agent && <Logs agentId={agent.id} tableHeader="Agent endpoint logs" />
       )}
     </div>
   );

frontend/src/agents/SharedAgent.tsx

@@ -0,0 +1,263 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+
+import userService from '../api/services/userService';
+import NoFilesDarkIcon from '../assets/no-files-dark.svg';
+import NoFilesIcon from '../assets/no-files.svg';
+import Robot from '../assets/robot.svg';
+import MessageInput from '../components/MessageInput';
+import Spinner from '../components/Spinner';
+import ConversationMessages from '../conversation/ConversationMessages';
+import { Query } from '../conversation/conversationModels';
+import {
+  addQuery,
+  fetchAnswer,
+  resendQuery,
+  selectQueries,
+  selectStatus,
+} from '../conversation/conversationSlice';
+import { useDarkTheme } from '../hooks';
+import { selectToken, setSelectedAgent } from '../preferences/preferenceSlice';
+import { AppDispatch } from '../store';
+import { Agent } from './types';
+
+export default function SharedAgent() {
+  const { t } = useTranslation();
+  const { agentId } = useParams();
+  const dispatch = useDispatch<AppDispatch>();
+  const [isDarkTheme] = useDarkTheme();
+
+  const token = useSelector(selectToken);
+  const queries = useSelector(selectQueries);
+  const status = useSelector(selectStatus);
+
+  const [sharedAgent, setSharedAgent] = useState<Agent>();
+  const [isLoading, setIsLoading] = useState(true);
+  const [input, setInput] = useState('');
+  const [lastQueryReturnedErr, setLastQueryReturnedErr] = useState(false);
+
+  const fetchStream = useRef<any>(null);
+
+  const getSharedAgent = async () => {
+    try {
+      setIsLoading(true);
+      const response = await userService.getSharedAgent(agentId ?? '', token);
+      if (!response.ok) throw new Error('Failed to fetch Shared Agent');
+      const agent: Agent = await response.json();
+      setSharedAgent(agent);
+    } catch (error) {
+      console.error('Error: ', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleFetchAnswer = useCallback(
+    ({ question, index }: { question: string; index?: number }) => {
+      fetchStream.current = dispatch(
+        fetchAnswer({ question, indx: index, isPreview: false }),
+      );
+    },
+    [dispatch],
+  );
+
+  const handleQuestion = useCallback(
+    ({
+      question,
+      isRetry = false,
+      index = undefined,
+    }: {
+      question: string;
+      isRetry?: boolean;
+      index?: number;
+    }) => {
+      const trimmedQuestion = question.trim();
+      if (trimmedQuestion === '') return;
+
+      if (index !== undefined) {
+        if (!isRetry) dispatch(resendQuery({ index, prompt: trimmedQuestion }));
+        handleFetchAnswer({ question: trimmedQuestion, index });
+      } else {
+        if (!isRetry) {
+          const newQuery: Query = { prompt: trimmedQuestion };
+          dispatch(addQuery(newQuery));
+        }
+        handleFetchAnswer({ question: trimmedQuestion, index: undefined });
+      }
+    },
+    [dispatch, handleFetchAnswer],
+  );
+
+  const handleQuestionSubmission = (
+    updatedQuestion?: string,
+    updated?: boolean,
+    indx?: number,
+  ) => {
+    if (
+      updated === true &&
+      updatedQuestion !== undefined &&
+      indx !== undefined
+    ) {
+      handleQuestion({
+        question: updatedQuestion,
+        index: indx,
+        isRetry: false,
+      });
+    } else if (input.trim() && status !== 'loading') {
+      const currentInput = input.trim();
+      if (lastQueryReturnedErr && queries.length > 0) {
+        const lastQueryIndex = queries.length - 1;
+        handleQuestion({
+          question: currentInput,
+          isRetry: true,
+          index: lastQueryIndex,
+        });
+      } else {
+        handleQuestion({
+          question: currentInput,
+          isRetry: false,
+          index: undefined,
+        });
+      }
+      setInput('');
+    }
+  };
+
+  useEffect(() => {
+    if (agentId) getSharedAgent();
+  }, [agentId, token]);
+
+  useEffect(() => {
+    if (sharedAgent) dispatch(setSelectedAgent(sharedAgent));
+  }, [sharedAgent, dispatch]);
+
+  if (isLoading)
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <Spinner />
+      </div>
+    );
+  if (!sharedAgent)
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <div className="flex w-full flex-col items-center justify-center gap-4">
+          <img
+            src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
+            alt="No agent found"
+            className="mx-auto mb-6 h-32 w-32"
+          />
+          <p className="text-center text-lg text-[#71717A] dark:text-[#949494]">
+            No agent found. Please ensure the agent is shared.
+          </p>
+        </div>
+      </div>
+    );
+  return (
+    <div className="relative h-full w-full">
+      <div className="absolute left-4 top-5 hidden items-center gap-3 sm:flex">
+        <img
+          src={sharedAgent.image ?? Robot}
+          alt="agent-logo"
+          className="h-6 w-6"
+        />
+        <h2 className="text-lg font-semibold text-[#212121] dark:text-[#E0E0E0]">
+          {sharedAgent.name}
+        </h2>
+      </div>
+      <div className="flex h-full w-full flex-col items-center justify-between sm:pt-12">
+        <div className="flex w-full flex-col items-center overflow-y-auto">
+          <ConversationMessages
+            handleQuestion={handleQuestion}
+            handleQuestionSubmission={handleQuestionSubmission}
+            queries={queries}
+            status={status}
+            showHeroOnEmpty={false}
+            headerContent={
+              <div className="flex w-full items-center justify-center py-4">
+                <SharedAgentCard agent={sharedAgent} />
+              </div>
+            }
+          />
+        </div>
+        <div className="flex w-[95%] max-w-[1500px] flex-col items-center gap-4 pb-2 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
+          <MessageInput
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onSubmit={() => handleQuestionSubmission()}
+            loading={status === 'loading'}
+            showSourceButton={sharedAgent ? false : true}
+            showToolButton={sharedAgent ? false : true}
+            autoFocus={false}
+          />
+          <p className="hidden w-[100vw] self-center bg-transparent py-2 text-center text-xs text-gray-4000 dark:text-sonic-silver md:inline md:w-full">
+            {t('tagline')}
+          </p>
+        </div>
+      </div>
+    </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/index.tsx

@@ -1,27 +1,35 @@
-import React, { SyntheticEvent, useEffect, useRef, useState } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import { SyntheticEvent, useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { Route, Routes, useNavigate } from 'react-router-dom';
 
 import userService from '../api/services/userService';
 import Edit from '../assets/edit.svg';
 import Monitoring from '../assets/monitoring.svg';
+import Pin from '../assets/pin.svg';
 import Trash from '../assets/red-trash.svg';
 import Robot from '../assets/robot.svg';
+import Link from '../assets/link-gray.svg';
 import ThreeDots from '../assets/three-dots.svg';
+import UnPin from '../assets/unpin.svg';
 import ContextMenu, { MenuOption } from '../components/ContextMenu';
+import Spinner from '../components/Spinner';
+import {
+  setConversation,
+  updateConversationId,
+} from '../conversation/conversationSlice';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState } from '../models/misc';
 import {
-  selectToken,
-  setSelectedAgent,
-  setAgents,
   selectAgents,
   selectSelectedAgent,
+  selectToken,
+  setAgents,
+  setSelectedAgent,
 } from '../preferences/preferenceSlice';
 import AgentLogs from './AgentLogs';
 import NewAgent from './NewAgent';
+import SharedAgent from './SharedAgent';
 import { Agent } from './types';
-import Spinner from '../components/Spinner';
 
 export default function Agents() {
   return (
@@ -30,10 +38,26 @@ export default function Agents() {
       <Route path="/new" element={<NewAgent mode="new" />} />
       <Route path="/edit/:agentId" element={<NewAgent mode="edit" />} />
       <Route path="/logs/:agentId" element={<AgentLogs />} />
+      <Route path="/shared/:agentId" element={<SharedAgent />} />
     </Routes>
   );
 }
 
+const sectionConfig = {
+  user: {
+    title: 'By me',
+    description: 'Agents created or published by you',
+    showNewAgentButton: true,
+    emptyStateDescription: 'You don’t have any created agents yet',
+  },
+  shared: {
+    title: 'Shared with me',
+    description: 'Agents imported by using a public link',
+    showNewAgentButton: false,
+    emptyStateDescription: 'No shared agents found',
+  },
+};
+
 function AgentsList() {
   const navigate = useNavigate();
   const dispatch = useDispatch();
@@ -41,26 +65,47 @@ function AgentsList() {
   const agents = useSelector(selectAgents);
   const selectedAgent = useSelector(selectSelectedAgent);
 
-  const [userAgents, setUserAgents] = useState<Agent[]>(agents || []);
-  const [loading, setLoading] = useState<boolean>(true);
+  const [sharedAgents, setSharedAgents] = useState<Agent[]>([]);
+  const [loadingUserAgents, setLoadingUserAgents] = useState<boolean>(true);
+  const [loadingSharedAgents, setLoadingSharedAgents] = useState<boolean>(true);
 
   const getAgents = async () => {
     try {
-      setLoading(true);
+      setLoadingUserAgents(true);
       const response = await userService.getAgents(token);
       if (!response.ok) throw new Error('Failed to fetch agents');
       const data = await response.json();
-      setUserAgents(data);
       dispatch(setAgents(data));
-      setLoading(false);
+      setLoadingUserAgents(false);
     } catch (error) {
       console.error('Error:', error);
-      setLoading(false);
+      setLoadingUserAgents(false);
+    }
+  };
+
+  const getSharedAgents = async () => {
+    try {
+      setLoadingSharedAgents(true);
+      const response = await userService.getSharedAgents(token);
+      if (!response.ok) throw new Error('Failed to fetch shared agents');
+      const data = await response.json();
+      setSharedAgents(data);
+      setLoadingSharedAgents(false);
+    } catch (error) {
+      console.error('Error:', error);
+      setLoadingSharedAgents(false);
     }
   };
 
   useEffect(() => {
     getAgents();
+    getSharedAgents();
+    dispatch(setConversation([]));
+    dispatch(
+      updateConversationId({
+        query: { conversationId: null },
+      }),
+    );
     if (selectedAgent) dispatch(setSelectedAgent(null));
   }, [token]);
   return (
@@ -70,7 +115,7 @@ function AgentsList() {
       </h1>
       <p className="mt-5 text-[15px] text-[#71717A] dark:text-[#949494]">
         Discover and create custom versions of DocsGPT that combine
-        instructions, extra knowledge, and any combination of skills.
+        instructions, extra knowledge, and any combination of skills
       </p>
       {/* Premade agents section */}
       {/* <div className="mt-6">
@@ -115,44 +160,77 @@ function AgentsList() {
           ))}
         </div>
       </div> */}
-      <div className="mt-8 flex flex-col gap-4">
-        <div className="flex w-full items-center justify-between">
+      <AgentSection
+        agents={agents ?? []}
+        loading={loadingUserAgents}
+        section="user"
+      />
+      <AgentSection
+        agents={sharedAgents ?? []}
+        loading={loadingSharedAgents}
+        section="shared"
+      />
+    </div>
+  );
+}
+
+function AgentSection({
+  agents,
+  loading,
+  section,
+}: {
+  agents: Agent[];
+  loading: boolean;
+  section: keyof typeof sectionConfig;
+}) {
+  const navigate = useNavigate();
+  return (
+    <div className="mt-8 flex flex-col gap-4">
+      <div className="flex w-full items-center justify-between">
+        <div className="flex flex-col gap-2">
           <h2 className="text-[18px] font-semibold text-[#18181B] dark:text-[#E0E0E0]">
-            Created by You
+            {sectionConfig[section].title}
           </h2>
+          <p className="text-[13px] text-[#71717A]">
+            {sectionConfig[section].description}
+          </p>
+        </div>
+        {sectionConfig[section].showNewAgentButton && (
           <button
             className="rounded-full bg-purple-30 px-4 py-2 text-sm text-white hover:bg-violets-are-blue"
             onClick={() => navigate('/agents/new')}
           >
             New Agent
           </button>
-        </div>
-        <div className="grid w-full grid-cols-2 gap-2 md:flex md:flex-wrap md:gap-4">
-          {loading ? (
-            <div className="flex h-72 w-full items-center justify-center">
-              <Spinner />
-            </div>
-          ) : userAgents.length > 0 ? (
-            userAgents.map((agent) => (
-              <AgentCard
-                key={agent.id}
-                agent={agent}
-                agents={userAgents}
-                setUserAgents={setUserAgents}
-              />
-            ))
-          ) : (
-            <div className="flex h-72 w-full flex-col items-center justify-center gap-3 text-base text-[#18181B] dark:text-[#E0E0E0]">
-              <p>You don’t have any created agents yet </p>
+        )}
+      </div>
+      <div className="grid w-full grid-cols-2 gap-2 md:flex md:flex-wrap md:gap-4">
+        {loading ? (
+          <div className="flex h-72 w-full items-center justify-center">
+            <Spinner />
+          </div>
+        ) : agents && agents.length > 0 ? (
+          agents.map((agent) => (
+            <AgentCard
+              key={agent.id}
+              agent={agent}
+              agents={agents}
+              section={section}
+            />
+          ))
+        ) : (
+          <div className="flex h-72 w-full flex-col items-center justify-center gap-3 text-base text-[#18181B] dark:text-[#E0E0E0]">
+            <p>{sectionConfig[section].emptyStateDescription}</p>
+            {sectionConfig[section].showNewAgentButton && (
               <button
                 className="ml-2 rounded-full bg-purple-30 px-4 py-2 text-sm text-white hover:bg-violets-are-blue"
                 onClick={() => navigate('/agents/new')}
               >
                 New Agent
               </button>
-            </div>
-          )}
-        </div>
+            )}
+          </div>
+        )}
       </div>
     </div>
   );
@@ -161,11 +239,11 @@ function AgentsList() {
 function AgentCard({
   agent,
   agents,
-  setUserAgents,
+  section,
 }: {
   agent: Agent;
   agents: Agent[];
-  setUserAgents: React.Dispatch<React.SetStateAction<Agent[]>>;
+  section: keyof typeof sectionConfig;
 }) {
   const navigate = useNavigate();
   const dispatch = useDispatch();
@@ -177,46 +255,94 @@ function AgentCard({
 
   const menuRef = useRef<HTMLDivElement>(null);
 
-  const menuOptions: MenuOption[] = [
-    {
-      icon: Monitoring,
-      label: 'Logs',
-      onClick: (e: SyntheticEvent) => {
-        e.stopPropagation();
-        navigate(`/agents/logs/${agent.id}`);
+  const togglePin = async () => {
+    try {
+      const response = await userService.togglePinAgent(agent.id ?? '', token);
+      if (!response.ok) throw new Error('Failed to pin agent');
+      const updatedAgents = agents.map((prevAgent) => {
+        if (prevAgent.id === agent.id)
+          return { ...prevAgent, pinned: !prevAgent.pinned };
+        return prevAgent;
+      });
+      dispatch(setAgents(updatedAgents));
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
+
+  const menuOptionsConfig: Record<string, MenuOption[]> = {
+    user: [
+      {
+        icon: Monitoring,
+        label: 'Logs',
+        onClick: (e: SyntheticEvent) => {
+          e.stopPropagation();
+          navigate(`/agents/logs/${agent.id}`);
+        },
+        variant: 'primary',
+        iconWidth: 14,
+        iconHeight: 14,
       },
-      variant: 'primary',
-      iconWidth: 14,
-      iconHeight: 14,
-    },
-    {
-      icon: Edit,
-      label: 'Edit',
-      onClick: (e: SyntheticEvent) => {
-        e.stopPropagation();
-        navigate(`/agents/edit/${agent.id}`);
+      {
+        icon: Edit,
+        label: 'Edit',
+        onClick: (e: SyntheticEvent) => {
+          e.stopPropagation();
+          navigate(`/agents/edit/${agent.id}`);
+        },
+        variant: 'primary',
+        iconWidth: 14,
+        iconHeight: 14,
       },
-      variant: 'primary',
-      iconWidth: 14,
-      iconHeight: 14,
-    },
-    {
-      icon: Trash,
-      label: 'Delete',
-      onClick: (e: SyntheticEvent) => {
-        e.stopPropagation();
-        setDeleteConfirmation('ACTIVE');
+      {
+        icon: agent.pinned ? UnPin : Pin,
+        label: agent.pinned ? 'Unpin' : 'Pin agent',
+        onClick: (e: SyntheticEvent) => {
+          e.stopPropagation();
+          togglePin();
+        },
+        variant: 'primary',
+        iconWidth: 18,
+        iconHeight: 18,
       },
-      variant: 'danger',
-      iconWidth: 12,
-      iconHeight: 12,
-    },
-  ];
+      {
+        icon: Trash,
+        label: 'Delete',
+        onClick: (e: SyntheticEvent) => {
+          e.stopPropagation();
+          setDeleteConfirmation('ACTIVE');
+        },
+        variant: 'danger',
+        iconWidth: 13,
+        iconHeight: 13,
+      },
+    ],
+    shared: [
+      {
+        icon: Link,
+        label: 'Open',
+        onClick: (e: SyntheticEvent) => {
+          e.stopPropagation();
+          navigate(`/agents/shared/${agent.shared_token}`);
+        },
+        variant: 'primary',
+        iconWidth: 14,
+        iconHeight: 14,
+      },
+    ],
+  };
+
+  const menuOptions = menuOptionsConfig[section] || [];
 
   const handleClick = () => {
-    if (agent.status === 'published') {
-      dispatch(setSelectedAgent(agent));
-      navigate(`/`);
+    if (section === 'user') {
+      if (agent.status === 'published') {
+        dispatch(setSelectedAgent(agent));
+        navigate(`/`);
+      }
+    }
+    if (section === 'shared') {
+      navigate(`/agents/shared/${agent.shared_token}`);
     }
   };
 
@@ -224,9 +350,6 @@ function AgentCard({
     const response = await userService.deleteAgent(agentId, token);
     if (!response.ok) throw new Error('Failed to delete agent');
     const data = await response.json();
-    setUserAgents((prevAgents) =>
-      prevAgents.filter((prevAgent) => prevAgent.id !== data.id),
-    );
     dispatch(setAgents(agents.filter((prevAgent) => prevAgent.id !== data.id)));
   };
   return (
@@ -243,7 +366,7 @@ function AgentCard({
           e.stopPropagation();
           setIsMenuOpen(true);
         }}
-        className="absolute right-4 top-4 z-50 cursor-pointer"
+        className="absolute right-4 top-4 z-10 cursor-pointer"
       >
         <img src={ThreeDots} alt={'use-agent'} className="h-[19px] w-[19px]" />
         <ContextMenu

frontend/src/agents/types/index.ts

@@ -11,6 +11,11 @@ export type Agent = {
   agent_type: string;
   status: string;
   key?: string;
+  incoming_webhook_token?: string;
+  pinned?: boolean;
+  shared?: boolean;
+  shared_token?: string;
+  shared_metadata?: any;
   created_at?: string;
   updated_at?: string;
   last_used_at?: string;

frontend/src/api/client.ts

@@ -1,4 +1,5 @@
-const baseURL = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
+export const baseURL =
+  import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
 
 const defaultHeaders = {
   'Content-Type': 'application/json',

frontend/src/api/endpoints.ts

@@ -13,6 +13,11 @@ const endpoints = {
     CREATE_AGENT: '/api/create_agent',
     UPDATE_AGENT: (agent_id: string) => `/api/update_agent/${agent_id}`,
     DELETE_AGENT: (id: string) => `/api/delete_agent?id=${id}`,
+    PINNED_AGENTS: '/api/pinned_agents',
+    TOGGLE_PIN_AGENT: (id: string) => `/api/pin_agent?id=${id}`,
+    SHARED_AGENT: (id: string) => `/api/shared_agent?token=${id}`,
+    SHARED_AGENTS: '/api/shared_agents',
+    SHARE_AGENT: `/api/share_agent`,
     AGENT_WEBHOOK: (id: string) => `/api/agent_webhook?id=${id}`,
     PROMPTS: '/api/get_prompts',
     CREATE_PROMPT: '/api/create_prompt',

frontend/src/api/services/userService.ts

@@ -31,6 +31,16 @@ const userService = {
     apiClient.put(endpoints.USER.UPDATE_AGENT(agent_id), data, token),
   deleteAgent: (id: string, token: string | null): Promise<any> =>
     apiClient.delete(endpoints.USER.DELETE_AGENT(id), token),
+  getPinnedAgents: (token: string | null): Promise<any> =>
+    apiClient.get(endpoints.USER.PINNED_AGENTS, token),
+  togglePinAgent: (id: string, token: string | null): Promise<any> =>
+    apiClient.post(endpoints.USER.TOGGLE_PIN_AGENT(id), {}, token),
+  getSharedAgent: (id: string, token: string | null): Promise<any> =>
+    apiClient.get(endpoints.USER.SHARED_AGENT(id), token),
+  getSharedAgents: (token: string | null): Promise<any> =>
+    apiClient.get(endpoints.USER.SHARED_AGENTS, token),
+  shareAgent: (data: any, token: string | null): Promise<any> =>
+    apiClient.put(endpoints.USER.SHARE_AGENT, data, 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/assets/link-gray.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 1.5H3C2.46957 1.5 1.96086 1.71071 1.58579 2.08579C1.21071 2.46086 1 2.96957 1 3.5V15.5C1 16.0304 1.21071 16.5391 1.58579 16.9142C1.96086 17.2893 2.46957 17.5 3 17.5H15C15.5304 17.5 16.0391 17.2893 16.4142 16.9142C16.7893 16.5391 17 16.0304 17 15.5V11.5M9 9.5L17 1.5M17 1.5V6.5M17 1.5H12" stroke="#949494" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/src/assets/pin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#747474" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pin-icon lucide-pin"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg>

frontend/src/assets/unpin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#747474" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pin-off-icon lucide-pin-off"><path d="M12 17v5"/><path d="M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89"/><path d="m2 2 20 20"/><path d="M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11"/></svg>

frontend/src/components/ContextMenu.tsx

@@ -104,8 +104,8 @@ export default function ContextMenu({
             }}
             className={`flex items-center justify-start gap-4 p-3 transition-colors duration-200 ease-in-out ${index === 0 ? 'rounded-t-xl' : ''} ${index === options.length - 1 ? 'rounded-b-xl' : ''} ${
               option.variant === 'danger'
-                ? 'text-rosso-corsa hover:bg-bright-gray dark:text-red-2000 dark:hover:bg-charcoal-grey'
-                : 'text-eerie-black hover:bg-bright-gray dark:text-bright-gray dark:hover:bg-charcoal-grey'
+                ? 'text-rosso-corsa hover:bg-bright-gray dark:text-red-2000 dark:hover:bg-charcoal-grey/20'
+                : 'text-eerie-black hover:bg-bright-gray dark:text-bright-gray dark:hover:bg-charcoal-grey/20'
             } `}
           >
             {option.icon && (
@@ -115,7 +115,7 @@ export default function ContextMenu({
                   height={option.iconHeight || 16}
                   src={option.icon}
                   alt={option.label}
-                  className={`cursor-pointer hover:opacity-75 ${option.iconClassName || ''}`}
+                  className={`cursor-pointer ${option.iconClassName || ''}`}
                 />
               </div>
             )}

frontend/src/conversation/ConversationMessages.tsx

@@ -1,4 +1,11 @@
-import { Fragment, useEffect, useRef, useState } from 'react';
+import {
+  Fragment,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 
 import ArrowDown from '../assets/arrow-down.svg';
@@ -8,7 +15,12 @@ import { useDarkTheme } from '../hooks';
 import ConversationBubble from './ConversationBubble';
 import { FEEDBACK, Query, Status } from './conversationModels';
 
-interface ConversationMessagesProps {
+const SCROLL_THRESHOLD = 10;
+const LAST_BUBBLE_MARGIN = 'mb-32';
+const DEFAULT_BUBBLE_MARGIN = 'mb-7';
+const FIRST_QUESTION_BUBBLE_MARGIN_TOP = 'mt-5';
+
+type ConversationMessagesProps = {
   handleQuestion: (params: {
     question: string;
     isRetry?: boolean;
@@ -24,7 +36,8 @@ interface ConversationMessagesProps {
   queries: Query[];
   status: Status;
   showHeroOnEmpty?: boolean;
-}
+  headerContent?: ReactNode;
+};
 
 export default function ConversationMessages({
   handleQuestion,
@@ -33,22 +46,23 @@ export default function ConversationMessages({
   status,
   handleFeedback,
   showHeroOnEmpty = true,
+  headerContent,
 }: ConversationMessagesProps) {
   const [isDarkTheme] = useDarkTheme();
   const { t } = useTranslation();
 
   const conversationRef = useRef<HTMLDivElement>(null);
-  const [atLast, setAtLast] = useState(true);
-  const [eventInterrupt, setEventInterrupt] = useState(false);
+  const [hasScrolledToLast, setHasScrolledToLast] = useState(true);
+  const [userInterruptedScroll, setUserInterruptedScroll] = useState(false);
 
-  const handleUserInterruption = () => {
-    if (!eventInterrupt && status === 'loading') {
-      setEventInterrupt(true);
+  const handleUserScrollInterruption = useCallback(() => {
+    if (!userInterruptedScroll && status === 'loading') {
+      setUserInterruptedScroll(true);
     }
-  };
+  }, [userInterruptedScroll, status]);
 
-  const scrollIntoView = () => {
-    if (!conversationRef?.current || eventInterrupt) return;
+  const scrollConversationToBottom = useCallback(() => {
+    if (!conversationRef.current || userInterruptedScroll) return;
 
     requestAnimationFrame(() => {
       if (!conversationRef?.current) return;
@@ -63,41 +77,67 @@ export default function ConversationMessages({
           conversationRef.current.scrollHeight;
       }
     });
-  };
+  }, [userInterruptedScroll, status, queries]);
 
-  const checkScroll = () => {
+  const checkScrollPosition = useCallback(() => {
     const el = conversationRef.current;
     if (!el) return;
-    const isBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 10;
-    setAtLast(isBottom);
-  };
+    const isAtBottom =
+      el.scrollHeight - el.scrollTop - el.clientHeight < SCROLL_THRESHOLD;
+    setHasScrolledToLast(isAtBottom);
+  }, [setHasScrolledToLast]);
 
   useEffect(() => {
-    !eventInterrupt && scrollIntoView();
-  }, [queries.length, queries[queries.length - 1]]);
+    if (!userInterruptedScroll) {
+      scrollConversationToBottom();
+    }
+  }, [
+    queries.length,
+    queries[queries.length - 1]?.response,
+    queries[queries.length - 1]?.error,
+    queries[queries.length - 1]?.thought,
+    userInterruptedScroll,
+    scrollConversationToBottom,
+  ]);
 
   useEffect(() => {
     if (status === 'idle') {
-      setEventInterrupt(false);
+      setUserInterruptedScroll(false);
     }
   }, [status]);
 
   useEffect(() => {
-    conversationRef.current?.addEventListener('scroll', checkScroll);
+    const currentConversationRef = conversationRef.current;
+    currentConversationRef?.addEventListener('scroll', checkScrollPosition);
     return () => {
-      conversationRef.current?.removeEventListener('scroll', checkScroll);
+      currentConversationRef?.removeEventListener(
+        'scroll',
+        checkScrollPosition,
+      );
     };
-  }, []);
+  }, [checkScrollPosition]);
+
+  const retryIconProps = {
+    width: 12,
+    height: 12,
+    fill: isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)',
+    stroke: isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)',
+    strokeWidth: 10,
+  };
+
+  const renderResponseView = (query: Query, index: number) => {
+    const isLastMessage = index === queries.length - 1;
+    const bubbleMargin = isLastMessage
+      ? LAST_BUBBLE_MARGIN
+      : DEFAULT_BUBBLE_MARGIN;
 
-  const prepResponseView = (query: Query, index: number) => {
-    let responseView;
     if (query.thought || query.response) {
       const isCurrentlyStreaming =
         status === 'loading' && index === queries.length - 1;
-      responseView = (
+      return (
         <ConversationBubble
-          className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'}`}
-          key={`${index}ANSWER`}
+          className={bubbleMargin}
+          key={`${index}-ANSWER`}
           message={query.response}
           type={'ANSWER'}
           thought={query.thought}
@@ -112,51 +152,53 @@ export default function ConversationMessages({
           }
         />
       );
-    } else if (query.error) {
-      const retryBtn = (
+    }
+
+    if (query.error) {
+      const retryButton = (
         <button
           className="flex items-center justify-center gap-3 self-center rounded-full px-5 py-3 text-lg text-gray-500 transition-colors delay-100 hover:border-gray-500 disabled:cursor-not-allowed dark:text-bright-gray"
           disabled={status === 'loading'}
           onClick={() => {
+            const questionToRetry = queries[index].prompt;
             handleQuestion({
-              question: queries[queries.length - 1].prompt,
+              question: questionToRetry,
               isRetry: true,
+              indx: index,
             });
           }}
+          aria-label={t('Retry') || 'Retry'}
         >
-          <RetryIcon
-            width={12}
-            height={12}
-            fill={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
-            stroke={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
-            strokeWidth={10}
-          />
+          <RetryIcon {...retryIconProps} />
         </button>
       );
-      responseView = (
+      return (
         <ConversationBubble
-          className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'} `}
-          key={`${index}ERROR`}
+          className={bubbleMargin}
+          key={`${index}-ERROR`}
           message={query.error}
           type="ERROR"
-          retryBtn={retryBtn}
+          retryBtn={retryButton}
         />
       );
     }
-    return responseView;
+    return null;
   };
 
   return (
     <div
       ref={conversationRef}
-      onWheel={handleUserInterruption}
-      onTouchMove={handleUserInterruption}
-      className="flex h-full w-full justify-center overflow-y-auto will-change-scroll sm:pt-12"
+      onWheel={handleUserScrollInterruption}
+      onTouchMove={handleUserScrollInterruption}
+      className="flex h-full w-full justify-center overflow-y-auto sm:pt-12"
     >
-      {queries.length > 0 && !atLast && (
+      {queries.length > 0 && !hasScrolledToLast && (
         <button
-          onClick={scrollIntoView}
-          aria-label="scroll to bottom"
+          onClick={() => {
+            setUserInterruptedScroll(false);
+            scrollConversationToBottom();
+          }}
+          aria-label={t('Scroll to bottom') || 'Scroll to bottom'}
           className="fixed bottom-40 right-14 z-10 flex h-7 w-7 items-center justify-center rounded-full border-[0.5px] border-gray-alpha bg-gray-100 bg-opacity-50 dark:bg-gunmetal md:h-9 md:w-9 md:bg-opacity-100"
         >
           <img
@@ -168,19 +210,21 @@ export default function ConversationMessages({
       )}
 
       <div className="w-full max-w-[1300px] px-2 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
+        {headerContent && headerContent}
+
         {queries.length > 0 ? (
           queries.map((query, index) => (
-            <Fragment key={index}>
+            <Fragment key={`${index}-query-fragment`}>
               <ConversationBubble
-                className={'first:mt-5'}
-                key={`${index}QUESTION`}
+                className={index === 0 ? FIRST_QUESTION_BUBBLE_MARGIN_TOP : ''}
+                key={`${index}-QUESTION`}
                 message={query.prompt}
                 type="QUESTION"
                 handleUpdatedQuestionSubmission={handleQuestionSubmission}
                 questionNumber={index}
                 sources={query.sources}
               />
-              {prepResponseView(query, index)}
+              {renderResponseView(query, index)}
             </Fragment>
           ))
         ) : showHeroOnEmpty ? (

frontend/src/conversation/conversationHandlers.ts

@@ -142,6 +142,7 @@ export function handleFetchAnswerSteaming(
       .then((response) => {
         if (!response.body) throw Error('No response body');
 
+        let buffer = '';
         const reader = response.body.getReader();
         const decoder = new TextDecoder('utf-8');
         let counterrr = 0;
@@ -157,22 +158,24 @@ export function handleFetchAnswerSteaming(
           counterrr += 1;
 
           const chunk = decoder.decode(value);
+          buffer += chunk;
 
-          const lines = chunk.split('\n');
+          const events = buffer.split('\n\n');
+          buffer = events.pop() ?? '';
 
-          for (let line of lines) {
-            if (line.trim() == '') {
-              continue;
+          for (let event of events) {
+            if (event.trim().startsWith('data:')) {
+              const dataLine: string = event
+                .split('\n')
+                .map((line: string) => line.replace(/^data:\s?/, ''))
+                .join('');
+
+              const messageEvent = new MessageEvent('message', {
+                data: dataLine.trim(),
+              });
+
+              onEvent(messageEvent);
             }
-            if (line.startsWith('data:')) {
-              line = line.substring(5);
-            }
-
-            const messageEvent: MessageEvent = new MessageEvent('message', {
-              data: line,
-            });
-
-            onEvent(messageEvent); // handle each message
           }
 
           reader.read().then(processStream).catch(reject);

frontend/src/conversation/conversationSlice.ts

@@ -285,9 +285,7 @@ export const conversationSlice = createSlice({
       action: PayloadAction<{ index: number; query: Partial<Query> }>,
     ) {
       const { index, query } = action.payload;
-      if (!state.queries[index].tool_calls) {
-        state.queries[index].tool_calls = query?.tool_calls;
-      }
+      state.queries[index].tool_calls = query?.tool_calls ?? [];
     },
     updateQuery(
       state,

frontend/src/modals/AgentDetailsModal.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 
 import { Agent } from '../agents/types';
@@ -9,6 +9,8 @@ import { ActiveState } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
 import WrapperModal from './WrapperModal';
 
+const baseURL = import.meta.env.VITE_BASE_URL;
+
 type AgentDetailsModalProps = {
   agent: Agent;
   mode: 'new' | 'edit' | 'draft';
@@ -24,7 +26,9 @@ export default function AgentDetailsModal({
 }: AgentDetailsModalProps) {
   const token = useSelector(selectToken);
 
-  const [publicLink, setPublicLink] = useState<string | null>(null);
+  const [sharedToken, setSharedToken] = useState<string | null>(
+    agent.shared_token ?? null,
+  );
   const [apiKey, setApiKey] = useState<string | null>(null);
   const [webhookUrl, setWebhookUrl] = useState<string | null>(null);
   const [loadingStates, setLoadingStates] = useState({
@@ -40,6 +44,21 @@ export default function AgentDetailsModal({
     setLoadingStates((prev) => ({ ...prev, [key]: state }));
   };
 
+  const handleGeneratePublicLink = async () => {
+    setLoading('publicLink', true);
+    const response = await userService.shareAgent(
+      { id: agent.id ?? '', shared: true },
+      token,
+    );
+    if (!response.ok) {
+      setLoading('publicLink', false);
+      return;
+    }
+    const data = await response.json();
+    setSharedToken(data.shared_token);
+    setLoading('publicLink', false);
+  };
+
   const handleGenerateWebhook = async () => {
     setLoading('webhook', true);
     const response = await userService.getAgentWebhook(agent.id ?? '', token);
@@ -52,6 +71,11 @@ export default function AgentDetailsModal({
     setLoading('webhook', false);
   };
 
+  useEffect(() => {
+    setSharedToken(agent.shared_token ?? null);
+    setApiKey(agent.key ?? null);
+  }, [agent]);
+
   if (modalState !== 'ACTIVE') return null;
   return (
     <WrapperModal
@@ -66,20 +90,45 @@ export default function AgentDetailsModal({
         </h2>
         <div className="mt-8 flex flex-col gap-6">
           <div className="flex flex-col gap-3">
-            <h2 className="text-base font-semibold text-jet dark:text-bright-gray">
-              Public link
-            </h2>
-            <button className="hover:bg-vi</button>olets-are-blue w-28 rounded-3xl border border-solid border-violets-are-blue px-5 py-2 text-sm font-medium text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white">
-              Generate
-            </button>
+            <div className="flex items-center gap-2">
+              <h2 className="text-base font-semibold text-jet dark:text-bright-gray">
+                Public Link
+              </h2>
+              {sharedToken && (
+                <div className="mb-1">
+                  <CopyButton
+                    textToCopy={`${baseURL}/agents/shared/${sharedToken}`}
+                    padding="p-1"
+                  />
+                </div>
+              )}
+            </div>
+            {sharedToken ? (
+              <div className="flex flex-col flex-wrap items-start gap-2">
+                <p className="f break-all font-mono text-sm text-gray-700 dark:text-[#ECECF1]">
+                  {`${baseURL}/agents/shared/${sharedToken}`}
+                </p>
+              </div>
+            ) : (
+              <button
+                className="hover:bg-vi</button>olets-are-blue flex w-28 items-center justify-center rounded-3xl border border-solid border-violets-are-blue px-5 py-2 text-sm font-medium text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
+                onClick={handleGeneratePublicLink}
+              >
+                {loadingStates.publicLink ? (
+                  <Spinner size="small" color="#976af3" />
+                ) : (
+                  'Generate'
+                )}
+              </button>
+            )}
           </div>
           <div className="flex flex-col gap-3">
             <h2 className="text-base font-semibold text-jet dark:text-bright-gray">
               API Key
             </h2>
-            {agent.key ? (
+            {apiKey ? (
               <span className="font-mono text-sm text-gray-700 dark:text-[#ECECF1]">
-                {agent.key}
+                {apiKey}
               </span>
             ) : (
               <button className="hover:bg-vi</button>olets-are-blue w-28 rounded-3xl border border-solid border-violets-are-blue px-5 py-2 text-sm font-medium text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white">