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

2025-11-29 16:43:16 +00:00 · 2025-05-16 04:12:27 +05:30
parent ab32eff588 130ece7bc0
commit c24e90eaae
27 changed files with 1435 additions and 296 deletions
--- a/frontend/.env.development
+++ b/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
--- a/frontend/package-lock.json
+++ b/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"
--- a/frontend/src/Navigation.tsx
+++ b/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>
--- a/frontend/src/agents/AgentCard.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/agents/AgentLogs.tsx
+++ b/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>
  );
--- a/frontend/src/agents/NewAgent.tsx
+++ b/frontend/src/agents/NewAgent.tsx
@@ -102,12 +102,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {

  const isPublishable = () => {
    return (
-      agent.name &&
-      agent.description &&
-      (agent.source || agent.retriever) &&
-      agent.chunks &&
-      agent.prompt_id &&
-      agent.agent_type
+      agent.name && agent.description && agent.prompt_id && agent.agent_type
    );
  };

--- a/frontend/src/agents/SharedAgent.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/agents/index.tsx
+++ b/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
--- a/frontend/src/agents/types/index.ts
+++ b/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;
--- a/frontend/src/api/client.ts
+++ b/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',
--- a/frontend/src/api/endpoints.ts
+++ b/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',
--- a/frontend/src/api/services/userService.ts
+++ b/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> =>
--- a/frontend/src/assets/link-gray.svg
+++ b/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>
--- a/frontend/src/assets/pin.svg
+++ b/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>
--- a/frontend/src/assets/unpin.svg
+++ b/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>
--- a/frontend/src/components/ContextMenu.tsx
+++ b/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>
            )}
--- a/frontend/src/conversation/ConversationMessages.tsx
+++ b/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}
+      onWheel={handleUserScrollInterruption}
+      onTouchMove={handleUserScrollInterruption}
      className="flex h-full w-full justify-center overflow-y-auto will-change-scroll sm:pt-6 lg: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 ? (
--- a/frontend/src/conversation/conversationHandlers.ts
+++ b/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 (const 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);
--- a/frontend/src/conversation/conversationSlice.ts
+++ b/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,
--- a/frontend/src/modals/AgentDetailsModal.tsx
+++ b/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">
				`@@ -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>`