From 7b45a6b95631f6525222c1916448213abfe859df Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 17 Jun 2025 12:03:36 +0530
Subject: [PATCH 1/3] (feat:agentDetails) copy button ui

---
 frontend/src/index.css                    |  2 +
 frontend/src/modals/AgentDetailsModal.tsx | 53 +++++++++++++----------
 frontend/tailwind.config.cjs              |  3 ++
 3 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index ee9aa0c2..7d2f958a 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/frontend/src/modals/AgentDetailsModal.tsx b/frontend/src/modals/AgentDetailsModal.tsx
index b18eb1ca..0c94ce6e 100644
--- a/frontend/src/modals/AgentDetailsModal.tsx
+++ b/frontend/src/modals/AgentDetailsModal.tsx
@@ -94,24 +94,21 @@ export default function AgentDetailsModal({
               <h2 className="text-base font-semibold text-jet dark:text-bright-gray">
                 Public Link
               </h2>
-              {sharedToken && (
-                <div className="mb-1">
+            </div>
+            {sharedToken ? (
+              <div className="items-center gap-2">
+                <p className="inline break-all font-roboto text-[14px] font-medium leading-normal text-gray-700 dark:text-[#ECECF1]">
+                  {`${baseURL}/shared/agent/${sharedToken}`}
                   <CopyButton
                     textToCopy={`${baseURL}/shared/agent/${sharedToken}`}
                     padding="p-1"
+                    className="ml-1 inline-flex"
                   />
-                </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}/shared/agent/${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"
+                className="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 ? (
@@ -127,11 +124,23 @@ export default function AgentDetailsModal({
               API Key
             </h2>
             {apiKey ? (
-              <span className="font-mono text-sm text-gray-700 dark:text-[#ECECF1]">
-                {apiKey}
-              </span>
+              <div className="flex items-center gap-2">
+                <span className="break-all font-roboto text-[14px] font-medium leading-normal text-gray-700 dark:text-[#ECECF1]">
+                  {apiKey}
+                  {!apiKey.includes('...') && (
+                    <CopyButton
+                      textToCopy={apiKey}
+                      padding="p-1"
+                      className="ml-1 inline-flex"
+                    />
+                  )}
+                </span>
+                {!apiKey.includes('...') && (
+                  <CopyButton textToCopy={apiKey} padding="p-1" />
+                )}
+              </div>
             ) : (
-              <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">
+              <button className="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>
             )}
@@ -141,21 +150,21 @@ export default function AgentDetailsModal({
               <h2 className="text-base font-semibold text-jet dark:text-bright-gray">
                 Webhook URL
               </h2>
-              {webhookUrl && (
-                <div className="mb-1">
-                  <CopyButton textToCopy={webhookUrl} padding="p-1" />
-                </div>
-              )}
             </div>
             {webhookUrl ? (
-              <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]">
+              <div className="flex items-center gap-2">
+                <p className="break-all font-roboto text-[14px] font-medium leading-normal text-gray-700 dark:text-[#ECECF1]">
                   {webhookUrl}
+                  <CopyButton
+                    textToCopy={webhookUrl}
+                    padding="p-1"
+                    className="ml-1 inline-flex"
+                  />
                 </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"
+                className="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={handleGenerateWebhook}
               >
                 {loadingStates.webhook ? (
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 65e434dd..43d1c45c 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -4,6 +4,9 @@ module.exports = {
   darkMode: 'class',
   theme: {
     extend: {
+      fontFamily: {
+        'roboto': ['Roboto', 'sans-serif'],
+      },
       spacing: {
         112: '28rem',
         128: '32rem',

From 7f1cc30ed86d4b53c8eb6dbc32c0adeee9fa0259 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 17 Jun 2025 16:04:08 +0530
Subject: [PATCH 2/3] (feat:agent-details) test, learn more redirects

---
 frontend/src/agents/NewAgent.tsx          | 12 +++-
 frontend/src/assets/external-link.svg     |  3 +
 frontend/src/modals/AgentDetailsModal.tsx | 78 +++++++++++++++++------
 3 files changed, 72 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/assets/external-link.svg

diff --git a/frontend/src/agents/NewAgent.tsx b/frontend/src/agents/NewAgent.tsx
index 464b49fe..a224f8d9 100644
--- a/frontend/src/agents/NewAgent.tsx
+++ b/frontend/src/agents/NewAgent.tsx
@@ -333,7 +333,11 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                 <button
                   ref={sourceAnchorButtonRef}
                   onClick={() => setIsSourcePopupOpen(!isSourcePopupOpen)}
-                  className="w-full truncate rounded-3xl border border-silver bg-white px-5 py-3 text-left text-sm text-gray-400 dark:border-[#7E7E7E] dark:bg-[#222327] dark:text-silver"
+                  className={`w-full truncate rounded-3xl border border-silver bg-white px-5 py-3 text-left text-sm dark:border-[#7E7E7E] dark:bg-[#222327] ${
+                    selectedSourceIds.size > 0
+                      ? 'text-jet dark:text-bright-gray'
+                      : 'text-gray-400 dark:text-silver'
+                  }`}
                 >
                   {selectedSourceIds.size > 0
                     ? Array.from(selectedSourceIds)
@@ -436,7 +440,11 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
               <button
                 ref={toolAnchorButtonRef}
                 onClick={() => setIsToolsPopupOpen(!isToolsPopupOpen)}
-                className="w-full truncate rounded-3xl border border-silver bg-white px-5 py-3 text-left text-sm text-gray-400 dark:border-[#7E7E7E] dark:bg-[#222327] dark:text-silver"
+                className={`w-full truncate rounded-3xl border border-silver bg-white px-5 py-3 text-left text-sm dark:border-[#7E7E7E] dark:bg-[#222327] ${
+                  selectedToolIds.size > 0
+                    ? 'text-jet dark:text-bright-gray'
+                    : 'text-gray-400 dark:text-silver'
+                }`}
               >
                 {selectedToolIds.size > 0
                   ? Array.from(selectedToolIds)
diff --git a/frontend/src/assets/external-link.svg b/frontend/src/assets/external-link.svg
new file mode 100644
index 00000000..835fcc67
--- /dev/null
+++ b/frontend/src/assets/external-link.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4028 7.35671V12.6427C12.4043 12.844 12.3655 13.0436 12.2889 13.2298C12.2122 13.4159 12.0991 13.5849 11.9564 13.7269C11.8136 13.8688 11.6439 13.9808 11.4573 14.0563C11.2706 14.1318 11.0708 14.1694 10.8695 14.1667H3.36483C3.16278 14.1693 2.96226 14.1314 2.77509 14.0553C2.58792 13.9791 2.41789 13.8663 2.27504 13.7234C2.13219 13.5804 2.01941 13.4104 1.94335 13.2232C1.86728 13.036 1.82948 12.8354 1.83217 12.6334V5.12871C1.82975 4.92668 1.86776 4.7262 1.94396 4.53908C2.02017 4.35196 2.13302 4.18196 2.27589 4.0391C2.41875 3.89623 2.58875 3.78338 2.77587 3.70717C2.963 3.63097 3.16347 3.59296 3.3655 3.59537H8.65083M14.1648 1.83337L7.1175 8.88071M14.1648 1.83337H10.6408M14.1648 1.83337V5.35737" stroke="#7D54D1" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/src/modals/AgentDetailsModal.tsx b/frontend/src/modals/AgentDetailsModal.tsx
index 0c94ce6e..e4c064ad 100644
--- a/frontend/src/modals/AgentDetailsModal.tsx
+++ b/frontend/src/modals/AgentDetailsModal.tsx
@@ -96,19 +96,32 @@ export default function AgentDetailsModal({
               </h2>
             </div>
             {sharedToken ? (
-              <div className="items-center gap-2">
+              <div className="flex flex-col gap-2">
                 <p className="inline break-all font-roboto text-[14px] font-medium leading-normal text-gray-700 dark:text-[#ECECF1]">
                   {`${baseURL}/shared/agent/${sharedToken}`}
                   <CopyButton
                     textToCopy={`${baseURL}/shared/agent/${sharedToken}`}
                     padding="p-1"
-                    className="ml-1 inline-flex"
+                    className="absolute -mt-0.5 ml-1 inline-flex"
                   />
                 </p>
+                <a
+                  href="https://docs.docsgpt.cloud/Agents/basics#core-components-of-an-agent"
+                  className="flex w-fit items-center gap-1 text-purple-30 hover:underline"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <span className="text-sm">Learn more</span>
+                  <img
+                    src="/src/assets/external-link.svg"
+                    alt="External link"
+                    className="h-3 w-3"
+                  />
+                </a>
               </div>
             ) : (
               <button
-                className="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"
+                className="flex w-28 items-center justify-center rounded-3xl border border-solid border-purple-30 px-5 py-2 text-sm font-medium text-purple-30 transition-colors hover:bg-purple-30 hover:text-white"
                 onClick={handleGeneratePublicLink}
               >
                 {loadingStates.publicLink ? (
@@ -124,23 +137,37 @@ export default function AgentDetailsModal({
               API Key
             </h2>
             {apiKey ? (
-              <div className="flex items-center gap-2">
-                <span className="break-all font-roboto text-[14px] font-medium leading-normal text-gray-700 dark:text-[#ECECF1]">
-                  {apiKey}
+              <div className="flex flex-col gap-2">
+                <div className="flex items-center gap-2">
+                  <div className="break-all font-roboto text-[14px] font-medium leading-normal text-gray-700 dark:text-[#ECECF1]">
+                    {apiKey}
+                    {!apiKey.includes('...') && (
+                      <CopyButton
+                        textToCopy={apiKey}
+                        padding="p-1"
+                        className="absolute -mt-0.5 ml-1 inline-flex"
+                      />
+                    )}
+                  </div>
                   {!apiKey.includes('...') && (
-                    <CopyButton
-                      textToCopy={apiKey}
-                      padding="p-1"
-                      className="ml-1 inline-flex"
-                    />
+                    <a
+                      href={`https://widget.docsgpt.cloud/?api-key=${apiKey}`}
+                      className="group ml-8 flex w-[101px] items-center justify-center gap-1 rounded-[62px] border border-purple-30 py-1.5 text-sm font-medium text-purple-30 transition-colors hover:bg-purple-30 hover:text-white"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Test
+                      <img
+                        src="/src/assets/external-link.svg"
+                        alt="External link"
+                        className="h-3 w-3 group-hover:brightness-0 group-hover:invert"
+                      />
+                    </a>
                   )}
-                </span>
-                {!apiKey.includes('...') && (
-                  <CopyButton textToCopy={apiKey} padding="p-1" />
-                )}
+                </div>
               </div>
             ) : (
-              <button className="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">
+              <button className="w-28 rounded-3xl border border-solid border-purple-30 px-5 py-2 text-sm font-medium text-purple-30 transition-colors hover:bg-purple-30 hover:text-white">
                 Generate
               </button>
             )}
@@ -152,19 +179,32 @@ export default function AgentDetailsModal({
               </h2>
             </div>
             {webhookUrl ? (
-              <div className="flex items-center gap-2">
+              <div className="flex flex-col gap-2">
                 <p className="break-all font-roboto text-[14px] font-medium leading-normal text-gray-700 dark:text-[#ECECF1]">
                   {webhookUrl}
                   <CopyButton
                     textToCopy={webhookUrl}
                     padding="p-1"
-                    className="ml-1 inline-flex"
+                    className="absolute -mt-0.5 ml-1 inline-flex"
                   />
                 </p>
+                <a
+                  href="https://docs.docsgpt.cloud/Agents/basics#core-components-of-an-agent"
+                  className="flex w-fit items-center gap-1 text-purple-30 hover:underline"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <span className="text-sm">Learn more</span>
+                  <img
+                    src="/src/assets/external-link.svg"
+                    alt="External link"
+                    className="h-3 w-3"
+                  />
+                </a>
               </div>
             ) : (
               <button
-                className="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"
+                className="flex w-28 items-center justify-center rounded-3xl border border-solid border-purple-30 px-5 py-2 text-sm font-medium text-purple-30 transition-colors hover:bg-purple-30 hover:text-white"
                 onClick={handleGenerateWebhook}
               >
                 {loadingStates.webhook ? (

From 98dc418a51c00a58429b6698e35410b8c8453b47 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 17 Jun 2025 18:30:11 +0530
Subject: [PATCH 3/3] (feat:agent-details) redirect on url

---
 frontend/src/modals/AgentDetailsModal.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/modals/AgentDetailsModal.tsx b/frontend/src/modals/AgentDetailsModal.tsx
index e4c064ad..7c2c9b34 100644
--- a/frontend/src/modals/AgentDetailsModal.tsx
+++ b/frontend/src/modals/AgentDetailsModal.tsx
@@ -98,7 +98,13 @@ export default function AgentDetailsModal({
             {sharedToken ? (
               <div className="flex flex-col gap-2">
                 <p className="inline break-all font-roboto text-[14px] font-medium leading-normal text-gray-700 dark:text-[#ECECF1]">
-                  {`${baseURL}/shared/agent/${sharedToken}`}
+                  <a
+                    href={`${baseURL}/shared/agent/${sharedToken}`}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    {`${baseURL}/shared/agent/${sharedToken}`}
+                  </a>
                   <CopyButton
                     textToCopy={`${baseURL}/shared/agent/${sharedToken}`}
                     padding="p-1"
@@ -181,7 +187,9 @@ export default function AgentDetailsModal({
             {webhookUrl ? (
               <div className="flex flex-col gap-2">
                 <p className="break-all font-roboto text-[14px] font-medium leading-normal text-gray-700 dark:text-[#ECECF1]">
-                  {webhookUrl}
+                  <a href={webhookUrl} target="_blank" rel="noreferrer">
+                    {webhookUrl}
+                  </a>
                   <CopyButton
                     textToCopy={webhookUrl}
                     padding="p-1"