mirror of
https://github.com/arc53/DocsGPT.git
synced 2025-11-29 08:33:20 +00:00
feat: add clsx dependency, enhance logging in agent logic, and improve agent logs component
This commit is contained in:
Siddhant Rai
17
frontend/package-lock.json
generated
17
frontend/package-lock.json
generated
@@ -10,6 +10,7 @@
|
||||
"dependencies": {
|
||||
"@reduxjs/toolkit": "^2.5.1",
|
||||
"chart.js": "^4.4.4",
|
||||
"clsx": "^2.1.1",
|
||||
"i18next": "^24.2.0",
|
||||
"i18next-browser-languagedetector": "^8.0.2",
|
||||
"prop-types": "^15.8.1",
|
||||
@@ -2751,6 +2752,15 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/clsx": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
|
||||
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
@@ -9405,6 +9415,13 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/undici-types": {
|
||||
"version": "6.21.0",
|
||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
|
||||
"integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/unified": {
|
||||
"version": "11.0.5",
|
||||
"resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
"dependencies": {
|
||||
"@reduxjs/toolkit": "^2.5.1",
|
||||
"chart.js": "^4.4.4",
|
||||
"clsx": "^2.1.1",
|
||||
"i18next": "^24.2.0",
|
||||
"i18next-browser-languagedetector": "^8.0.2",
|
||||
"prop-types": "^15.8.1",
|
||||
|
||||
@@ -1,12 +1,40 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
|
||||
import userService from '../api/services/userService';
|
||||
import ArrowLeft from '../assets/arrow-left.svg';
|
||||
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() {
|
||||
const navigate = useNavigate();
|
||||
const { agentId } = useParams();
|
||||
const token = useSelector(selectToken);
|
||||
|
||||
const [agent, setAgent] = useState<Agent>();
|
||||
const [loadingAgent, setLoadingAgent] = useState<boolean>(true);
|
||||
|
||||
const fetchAgent = async (agentId: string) => {
|
||||
setLoadingAgent(true);
|
||||
try {
|
||||
const response = await userService.getAgent(agentId ?? '', token);
|
||||
if (!response.ok) throw new Error('Failed to fetch Chatbots');
|
||||
const agent = await response.json();
|
||||
setAgent(agent);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoadingAgent(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (agentId) fetchAgent(agentId);
|
||||
}, [agentId, token]);
|
||||
return (
|
||||
<div className="p-4 md:p-12">
|
||||
<div className="flex items-center gap-3 px-4">
|
||||
@@ -25,8 +53,29 @@ export default function AgentLogs() {
|
||||
Agent Logs
|
||||
</h1>
|
||||
</div>
|
||||
<Analytics agentId={agentId} />
|
||||
<Logs agentId={agentId} tableHeader="Agent endpoint logs" />
|
||||
<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>
|
||||
{loadingAgent ? (
|
||||
<div className="flex h-[345px] w-full items-center justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
agent && <Analytics agentId={agent.id} />
|
||||
)}
|
||||
{loadingAgent ? (
|
||||
<div className="flex h-[55vh] w-full items-center justify-center">
|
||||
{' '}
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
agent && <Logs agentId={agentId} tableHeader="Agent endpoint logs" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -11,10 +11,7 @@ import AgentDetailsModal from '../modals/AgentDetailsModal';
|
||||
import ConfirmationModal from '../modals/ConfirmationModal';
|
||||
import { ActiveState, Doc, Prompt } from '../models/misc';
|
||||
import {
|
||||
selectSelectedAgent,
|
||||
selectSourceDocs,
|
||||
selectToken,
|
||||
setSelectedAgent,
|
||||
selectSelectedAgent, selectSourceDocs, selectToken, setSelectedAgent
|
||||
} from '../preferences/preferenceSlice';
|
||||
import PromptsModal from '../preferences/PromptsModal';
|
||||
import { UserToolType } from '../settings/types';
|
||||
@@ -287,9 +284,10 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
|
||||
)}
|
||||
{modeConfig[effectiveMode].showAccessDetails && (
|
||||
<button
|
||||
className="hover:bg-vi</button>olets-are-blue 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="group flex items-center gap-2 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={() => navigate(`/agents/logs/${agent.id}`)}
|
||||
>
|
||||
<span className="block h-5 w-5 bg-[url('/src/assets/monitoring-purple.svg')] bg-contain bg-center bg-no-repeat transition-all group-hover:bg-[url('/src/assets/monitoring-white.svg')]" />
|
||||
Logs
|
||||
</button>
|
||||
)}
|
||||
|
||||
@@ -138,6 +138,7 @@ function AgentsList() {
|
||||
<AgentCard
|
||||
key={agent.id}
|
||||
agent={agent}
|
||||
agents={userAgents}
|
||||
setUserAgents={setUserAgents}
|
||||
/>
|
||||
))
|
||||
@@ -160,9 +161,11 @@ function AgentsList() {
|
||||
|
||||
function AgentCard({
|
||||
agent,
|
||||
agents,
|
||||
setUserAgents,
|
||||
}: {
|
||||
agent: Agent;
|
||||
agents: Agent[];
|
||||
setUserAgents: React.Dispatch<React.SetStateAction<Agent[]>>;
|
||||
}) {
|
||||
const navigate = useNavigate();
|
||||
@@ -225,6 +228,7 @@ function AgentCard({
|
||||
setUserAgents((prevAgents) =>
|
||||
prevAgents.filter((prevAgent) => prevAgent.id !== data.id),
|
||||
);
|
||||
dispatch(setAgents(agents.filter((prevAgent) => prevAgent.id !== data.id)));
|
||||
};
|
||||
return (
|
||||
<div
|
||||
|
||||
3
frontend/src/assets/monitoring-purple.svg
Normal file
3
frontend/src/assets/monitoring-purple.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.50195 17.1494C3.68072 17.1503 3.83797 17.2119 3.96289 17.3359C4.08842 17.4607 4.15029 17.6188 4.15039 17.7988V18.5869C4.15039 18.7666 4.08775 18.9248 3.96191 19.0498C3.83677 19.1741 3.68038 19.2364 3.50098 19.2373H3.5C3.36498 19.2373 3.24235 19.2024 3.13672 19.1318L3.03613 19.0488C2.91173 18.9234 2.84961 18.7657 2.84961 18.5869V17.7988C2.84971 17.6193 2.91265 17.4614 3.03809 17.3359C3.16377 17.2104 3.32208 17.1486 3.50195 17.1494ZM7.50195 12.6494C7.68072 12.6503 7.83797 12.7119 7.96289 12.8359C8.08842 12.9607 8.15029 13.1188 8.15039 13.2988V18.5869C8.15039 18.7666 8.08775 18.9248 7.96191 19.0498C7.83656 19.1743 7.67907 19.2364 7.5 19.2373H7.49902C7.31988 19.2373 7.16245 19.175 7.03711 19.0498C6.91161 18.9243 6.84884 18.7663 6.84961 18.5869V13.2988C6.84971 13.1193 6.91265 12.9614 7.03809 12.8359C7.16377 12.7104 7.32208 12.6486 7.50195 12.6494ZM11.502 14.6494C11.6807 14.6503 11.838 14.7119 11.9629 14.8359C12.0884 14.9607 12.1503 15.1188 12.1504 15.2988V18.5869C12.1504 18.7666 12.0878 18.9248 11.9619 19.0498C11.8366 19.1743 11.6791 19.2364 11.5 19.2373H11.499C11.3193 19.2373 11.1611 19.1747 11.0361 19.0488C10.9117 18.9234 10.8496 18.7657 10.8496 18.5869V15.2988C10.8497 15.1193 10.9127 14.9614 11.0381 14.8359C11.1638 14.7104 11.3221 14.6486 11.502 14.6494ZM15.502 13.1494C15.6807 13.1503 15.838 13.2119 15.9629 13.3359C16.0884 13.4607 16.1503 13.6188 16.1504 13.7988V18.5869C16.1504 18.7666 16.0878 18.9248 15.9619 19.0498C15.8366 19.1743 15.6791 19.2364 15.5 19.2373H15.499C15.3199 19.2373 15.1625 19.175 15.0371 19.0498C14.9116 18.9243 14.8488 18.7663 14.8496 18.5869V13.7988C14.8497 13.6193 14.9127 13.4614 15.0381 13.3359C15.1638 13.2104 15.3221 13.1486 15.502 13.1494ZM19.502 9.14941C19.6807 9.15031 19.838 9.2119 19.9629 9.33594C20.0884 9.46066 20.1503 9.61875 20.1504 9.79883V18.5869C20.1504 18.7666 20.0878 18.9248 19.9619 19.0498C19.8366 19.1743 19.6791 19.2364 19.5 19.2373H19.499C19.3199 19.2373 19.1625 19.175 19.0371 19.0498C18.9116 18.9243 18.8488 18.7663 18.8496 18.5869V9.79883C18.8497 9.61927 18.9127 9.46137 19.0381 9.33594C19.1638 9.21036 19.3221 9.14857 19.502 9.14941ZM19.499 3.35156C19.6838 3.34567 19.8427 3.41642 19.9678 3.55469H19.9688C20.0596 3.64961 20.1156 3.761 20.1357 3.88477L20.1436 4.0127C20.1385 4.18363 20.079 4.33405 19.9609 4.45312H19.96L14.7422 9.6709C14.5779 9.83222 14.3846 9.95688 14.1641 10.0439C13.9451 10.1304 13.7235 10.1738 13.5 10.1738C13.3327 10.1738 13.1678 10.1497 13.0059 10.1006L12.8457 10.043C12.6325 9.95623 12.4382 9.83371 12.2637 9.67578L12.2578 9.6709L12.3643 9.56445L12.2578 9.66992L9.83594 7.24902C9.75169 7.16486 9.64381 7.12012 9.5 7.12012C9.39199 7.12012 9.30408 7.14514 9.23145 7.19336L9.16406 7.24902L3.95996 12.4531C3.83505 12.578 3.67971 12.6445 3.50195 12.6504H3.50098C3.31619 12.6556 3.1575 12.583 3.0332 12.4443V12.4453C2.91072 12.3194 2.85137 12.1633 2.85645 11.9873L2.87012 11.8623C2.89478 11.7425 2.95119 11.6357 3.04004 11.5469L8.25879 6.32812L8.39453 6.20703C8.53435 6.09371 8.68597 6.00535 8.84961 5.94434L9.00977 5.89258C9.17067 5.84784 9.33418 5.8252 9.5 5.8252C9.72114 5.8252 9.94159 5.86551 10.1602 5.94434C10.3843 6.02524 10.5789 6.15388 10.7422 6.3291L13.1641 8.75L13.2314 8.80566C13.3041 8.854 13.3919 8.87891 13.5 8.87891C13.6439 8.87891 13.7517 8.83427 13.8359 8.75L19.04 3.54688C19.165 3.42139 19.321 3.35565 19.499 3.35059V3.35156Z" fill="#7D54D1" stroke="#7D54D1" stroke-width="0.3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
3
frontend/src/assets/monitoring-white.svg
Normal file
3
frontend/src/assets/monitoring-white.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.50195 17.1494C3.68072 17.1503 3.83797 17.2119 3.96289 17.3359C4.08842 17.4607 4.15029 17.6188 4.15039 17.7988V18.5869C4.15039 18.7666 4.08775 18.9248 3.96191 19.0498C3.83677 19.1741 3.68038 19.2364 3.50098 19.2373H3.5C3.36498 19.2373 3.24235 19.2024 3.13672 19.1318L3.03613 19.0488C2.91173 18.9234 2.84961 18.7657 2.84961 18.5869V17.7988C2.84971 17.6193 2.91265 17.4614 3.03809 17.3359C3.16377 17.2104 3.32208 17.1486 3.50195 17.1494ZM7.50195 12.6494C7.68072 12.6503 7.83797 12.7119 7.96289 12.8359C8.08842 12.9607 8.15029 13.1188 8.15039 13.2988V18.5869C8.15039 18.7666 8.08775 18.9248 7.96191 19.0498C7.83656 19.1743 7.67907 19.2364 7.5 19.2373H7.49902C7.31988 19.2373 7.16245 19.175 7.03711 19.0498C6.91161 18.9243 6.84884 18.7663 6.84961 18.5869V13.2988C6.84971 13.1193 6.91265 12.9614 7.03809 12.8359C7.16377 12.7104 7.32208 12.6486 7.50195 12.6494ZM11.502 14.6494C11.6807 14.6503 11.838 14.7119 11.9629 14.8359C12.0884 14.9607 12.1503 15.1188 12.1504 15.2988V18.5869C12.1504 18.7666 12.0878 18.9248 11.9619 19.0498C11.8366 19.1743 11.6791 19.2364 11.5 19.2373H11.499C11.3193 19.2373 11.1611 19.1747 11.0361 19.0488C10.9117 18.9234 10.8496 18.7657 10.8496 18.5869V15.2988C10.8497 15.1193 10.9127 14.9614 11.0381 14.8359C11.1638 14.7104 11.3221 14.6486 11.502 14.6494ZM15.502 13.1494C15.6807 13.1503 15.838 13.2119 15.9629 13.3359C16.0884 13.4607 16.1503 13.6188 16.1504 13.7988V18.5869C16.1504 18.7666 16.0878 18.9248 15.9619 19.0498C15.8366 19.1743 15.6791 19.2364 15.5 19.2373H15.499C15.3199 19.2373 15.1625 19.175 15.0371 19.0498C14.9116 18.9243 14.8488 18.7663 14.8496 18.5869V13.7988C14.8497 13.6193 14.9127 13.4614 15.0381 13.3359C15.1638 13.2104 15.3221 13.1486 15.502 13.1494ZM19.502 9.14941C19.6807 9.15031 19.838 9.2119 19.9629 9.33594C20.0884 9.46066 20.1503 9.61875 20.1504 9.79883V18.5869C20.1504 18.7666 20.0878 18.9248 19.9619 19.0498C19.8366 19.1743 19.6791 19.2364 19.5 19.2373H19.499C19.3199 19.2373 19.1625 19.175 19.0371 19.0498C18.9116 18.9243 18.8488 18.7663 18.8496 18.5869V9.79883C18.8497 9.61927 18.9127 9.46137 19.0381 9.33594C19.1638 9.21036 19.3221 9.14857 19.502 9.14941ZM19.499 3.35156C19.6838 3.34567 19.8427 3.41642 19.9678 3.55469H19.9688C20.0596 3.64961 20.1156 3.761 20.1357 3.88477L20.1436 4.0127C20.1385 4.18363 20.079 4.33405 19.9609 4.45312H19.96L14.7422 9.6709C14.5779 9.83222 14.3846 9.95688 14.1641 10.0439C13.9451 10.1304 13.7235 10.1738 13.5 10.1738C13.3327 10.1738 13.1678 10.1497 13.0059 10.1006L12.8457 10.043C12.6325 9.95623 12.4382 9.83371 12.2637 9.67578L12.2578 9.6709L12.3643 9.56445L12.2578 9.66992L9.83594 7.24902C9.75169 7.16486 9.64381 7.12012 9.5 7.12012C9.39199 7.12012 9.30408 7.14514 9.23145 7.19336L9.16406 7.24902L3.95996 12.4531C3.83505 12.578 3.67971 12.6445 3.50195 12.6504H3.50098C3.31619 12.6556 3.1575 12.583 3.0332 12.4443V12.4453C2.91072 12.3194 2.85137 12.1633 2.85645 11.9873L2.87012 11.8623C2.89478 11.7425 2.95119 11.6357 3.04004 11.5469L8.25879 6.32812L8.39453 6.20703C8.53435 6.09371 8.68597 6.00535 8.84961 5.94434L9.00977 5.89258C9.17067 5.84784 9.33418 5.8252 9.5 5.8252C9.72114 5.8252 9.94159 5.86551 10.1602 5.94434C10.3843 6.02524 10.5789 6.15388 10.7422 6.3291L13.1641 8.75L13.2314 8.80566C13.3041 8.854 13.3919 8.87891 13.5 8.87891C13.6439 8.87891 13.7517 8.83427 13.8359 8.75L19.04 3.54688C19.165 3.42139 19.321 3.35565 19.499 3.35059V3.35156Z" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="0.3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
@@ -1,58 +1,136 @@
|
||||
import clsx from 'clsx';
|
||||
import copy from 'copy-to-clipboard';
|
||||
import { useState } from 'react';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import CheckMark from '../assets/checkmark.svg?react';
|
||||
import Copy from '../assets/copy.svg?react';
|
||||
import CopyIcon from '../assets/copy.svg?react';
|
||||
|
||||
type CopyButtonProps = {
|
||||
textToCopy: string;
|
||||
bgColorLight?: string;
|
||||
bgColorDark?: string;
|
||||
hoverBgColorLight?: string;
|
||||
hoverBgColorDark?: string;
|
||||
iconSize?: string;
|
||||
padding?: string;
|
||||
showText?: boolean;
|
||||
copiedDuration?: number;
|
||||
className?: string;
|
||||
iconWrapperClassName?: string;
|
||||
textClassName?: string;
|
||||
};
|
||||
|
||||
const DEFAULT_ICON_SIZE = 'w-4 h-4';
|
||||
const DEFAULT_PADDING = 'p-2';
|
||||
const DEFAULT_COPIED_DURATION = 2000;
|
||||
const DEFAULT_BG_LIGHT = '#FFFFFF';
|
||||
const DEFAULT_BG_DARK = 'transparent';
|
||||
const DEFAULT_HOVER_BG_LIGHT = '#EEEEEE';
|
||||
const DEFAULT_HOVER_BG_DARK = '#4A4A4A';
|
||||
|
||||
export default function CopyButton({
|
||||
text,
|
||||
colorLight,
|
||||
colorDark,
|
||||
textToCopy,
|
||||
bgColorLight = DEFAULT_BG_LIGHT,
|
||||
bgColorDark = DEFAULT_BG_DARK,
|
||||
hoverBgColorLight = DEFAULT_HOVER_BG_LIGHT,
|
||||
hoverBgColorDark = DEFAULT_HOVER_BG_DARK,
|
||||
iconSize = DEFAULT_ICON_SIZE,
|
||||
padding = DEFAULT_PADDING,
|
||||
showText = false,
|
||||
}: {
|
||||
text: string;
|
||||
colorLight?: string;
|
||||
colorDark?: string;
|
||||
showText?: boolean;
|
||||
}) {
|
||||
copiedDuration = DEFAULT_COPIED_DURATION,
|
||||
className,
|
||||
iconWrapperClassName,
|
||||
textClassName,
|
||||
}: CopyButtonProps) {
|
||||
const { t } = useTranslation();
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [isCopyHovered, setIsCopyHovered] = useState(false);
|
||||
const [isCopied, setIsCopied] = useState(false);
|
||||
const timeoutIdRef = useRef<number | null>(null);
|
||||
|
||||
const handleCopyClick = (text: string) => {
|
||||
copy(text);
|
||||
setCopied(true);
|
||||
setTimeout(() => {
|
||||
setCopied(false);
|
||||
}, 3000);
|
||||
};
|
||||
const iconWrapperClasses = clsx(
|
||||
'flex items-center justify-center rounded-full transition-colors duration-150 ease-in-out',
|
||||
padding,
|
||||
`bg-[${bgColorLight}] dark:bg-[${bgColorDark}]`,
|
||||
`hover:bg-[${hoverBgColorLight}] dark:hover:bg-[${hoverBgColorDark}]`,
|
||||
{
|
||||
'bg-green-100 dark:bg-green-900 hover:bg-green-100 dark:hover:bg-green-900':
|
||||
isCopied,
|
||||
},
|
||||
iconWrapperClassName,
|
||||
);
|
||||
|
||||
const rootButtonClasses = clsx(
|
||||
'flex items-center gap-2 group',
|
||||
'focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 rounded-full',
|
||||
className,
|
||||
);
|
||||
|
||||
const textSpanClasses = clsx(
|
||||
'text-xs text-gray-600 dark:text-gray-400 transition-opacity duration-150 ease-in-out',
|
||||
{ 'opacity-75': isCopied },
|
||||
textClassName,
|
||||
);
|
||||
|
||||
const IconComponent = isCopied ? CheckMark : CopyIcon;
|
||||
const iconClasses = clsx(iconSize, {
|
||||
'stroke-green-600 dark:stroke-green-400': isCopied,
|
||||
'fill-none text-gray-700 dark:text-gray-300': !isCopied,
|
||||
});
|
||||
|
||||
const buttonTitle = isCopied
|
||||
? t('conversation.copied')
|
||||
: t('conversation.copy');
|
||||
const displayedText = isCopied
|
||||
? t('conversation.copied')
|
||||
: t('conversation.copy');
|
||||
|
||||
const handleCopy = useCallback(() => {
|
||||
if (isCopied) return;
|
||||
|
||||
try {
|
||||
const success = copy(textToCopy);
|
||||
if (success) {
|
||||
setIsCopied(true);
|
||||
|
||||
if (timeoutIdRef.current) {
|
||||
clearTimeout(timeoutIdRef.current);
|
||||
}
|
||||
|
||||
timeoutIdRef.current = setTimeout(() => {
|
||||
setIsCopied(false);
|
||||
timeoutIdRef.current = null;
|
||||
}, copiedDuration);
|
||||
} else {
|
||||
console.warn('Copy command failed.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to copy text:', error);
|
||||
}
|
||||
}, [textToCopy, copiedDuration, isCopied]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (timeoutIdRef.current) {
|
||||
clearTimeout(timeoutIdRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
return (
|
||||
<button
|
||||
onClick={() => handleCopyClick(text)}
|
||||
onMouseEnter={() => setIsCopyHovered(true)}
|
||||
onMouseLeave={() => setIsCopyHovered(false)}
|
||||
className="flex items-center gap-2"
|
||||
type="button"
|
||||
onClick={handleCopy}
|
||||
className={rootButtonClasses}
|
||||
title={buttonTitle}
|
||||
aria-label={buttonTitle}
|
||||
disabled={isCopied}
|
||||
>
|
||||
<div
|
||||
className={`flex items-center justify-center rounded-full p-2 ${
|
||||
isCopyHovered
|
||||
? `bg-[#EEEEEE] dark:bg-purple-taupe`
|
||||
: `bg-[${colorLight ? colorLight : '#FFFFFF'}] dark:bg-[${colorDark ? colorDark : 'transparent'}]`
|
||||
}`}
|
||||
>
|
||||
{copied ? (
|
||||
<CheckMark className="cursor-pointer stroke-green-2000" />
|
||||
) : (
|
||||
<Copy className="w-4 cursor-pointer fill-none" />
|
||||
)}
|
||||
<div className={iconWrapperClasses}>
|
||||
<IconComponent className={iconClasses} aria-hidden="true" />
|
||||
</div>
|
||||
{showText && (
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400">
|
||||
{copied ? t('conversation.copied') : t('conversation.copy')}
|
||||
</span>
|
||||
)}
|
||||
{showText && <span className={textSpanClasses}>{displayedText}</span>}
|
||||
<span className="sr-only" aria-live="polite" aria-atomic="true">
|
||||
{isCopied ? t('conversation.copied', 'Copied to clipboard') : ''}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,10 +5,7 @@ import { useTranslation } from 'react-i18next';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import {
|
||||
oneLight,
|
||||
vscDarkPlus,
|
||||
} from 'react-syntax-highlighter/dist/cjs/styles/prism';
|
||||
import { oneLight, vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
|
||||
import rehypeKatex from 'rehype-katex';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import remarkMath from 'remark-math';
|
||||
@@ -29,10 +26,7 @@ import CopyButton from '../components/CopyButton';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
import SpeakButton from '../components/TextToSpeechButton';
|
||||
import { useDarkTheme, useOutsideAlerter } from '../hooks';
|
||||
import {
|
||||
selectChunks,
|
||||
selectSelectedDocs,
|
||||
} from '../preferences/preferenceSlice';
|
||||
import { selectChunks, selectSelectedDocs } from '../preferences/preferenceSlice';
|
||||
import classes from './ConversationBubble.module.css';
|
||||
import { FEEDBACK, MESSAGE_TYPE } from './conversationModels';
|
||||
import { ToolCallsType } from './types';
|
||||
@@ -377,7 +371,7 @@ const ConversationBubble = forwardRef<
|
||||
{language}
|
||||
</span>
|
||||
<CopyButton
|
||||
text={String(children).replace(/\n$/, '')}
|
||||
textToCopy={String(children).replace(/\n$/, '')}
|
||||
/>
|
||||
</div>
|
||||
<SyntaxHighlighter
|
||||
@@ -462,7 +456,7 @@ const ConversationBubble = forwardRef<
|
||||
${type !== 'ERROR' ? 'group-hover:lg:visible' : 'hidden'}`}
|
||||
>
|
||||
<div>
|
||||
<CopyButton text={message} />
|
||||
<CopyButton textToCopy={message} />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@@ -671,7 +665,7 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
|
||||
Arguments
|
||||
</span>{' '}
|
||||
<CopyButton
|
||||
text={JSON.stringify(toolCall.arguments, null, 2)}
|
||||
textToCopy={JSON.stringify(toolCall.arguments, null, 2)}
|
||||
/>
|
||||
</p>
|
||||
<p className="p-2 font-mono text-sm dark:tex dark:bg-[#222327] rounded-b-2xl break-words">
|
||||
@@ -689,7 +683,7 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
|
||||
Response
|
||||
</span>{' '}
|
||||
<CopyButton
|
||||
text={JSON.stringify(toolCall.result, null, 2)}
|
||||
textToCopy={JSON.stringify(toolCall.result, null, 2)}
|
||||
/>
|
||||
</p>
|
||||
<p className="p-2 font-mono text-sm dark:tex dark:bg-[#222327] rounded-b-2xl break-words">
|
||||
@@ -766,7 +760,7 @@ function Thought({
|
||||
{language}
|
||||
</span>
|
||||
<CopyButton
|
||||
text={String(children).replace(/\n$/, '')}
|
||||
textToCopy={String(children).replace(/\n$/, '')}
|
||||
/>
|
||||
</div>
|
||||
<SyntaxHighlighter
|
||||
|
||||
@@ -2,11 +2,12 @@ import { useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
import { Agent } from '../agents/types';
|
||||
import { ActiveState } from '../models/misc';
|
||||
import WrapperModal from './WrapperModal';
|
||||
import userService from '../api/services/userService';
|
||||
import { selectToken } from '../preferences/preferenceSlice';
|
||||
import CopyButton from '../components/CopyButton';
|
||||
import Spinner from '../components/Spinner';
|
||||
import { ActiveState } from '../models/misc';
|
||||
import { selectToken } from '../preferences/preferenceSlice';
|
||||
import WrapperModal from './WrapperModal';
|
||||
|
||||
type AgentDetailsModalProps = {
|
||||
agent: Agent;
|
||||
@@ -87,24 +88,32 @@ export default function AgentDetailsModal({
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
<h2 className="text-base font-semibold text-jet dark:text-bright-gray">
|
||||
Webhooks
|
||||
</h2>
|
||||
<div className="flex items-center gap-2">
|
||||
<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-wrap items-center gap-2">
|
||||
<span className="font-mono text-sm text-gray-700 dark:text-[#ECECF1]">
|
||||
<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]">
|
||||
{webhookUrl}
|
||||
</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">
|
||||
Copy
|
||||
</button>
|
||||
</p>
|
||||
</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"
|
||||
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={handleGenerateWebhook}
|
||||
>
|
||||
{loadingStates.webhook ? <Spinner /> : 'Generate'}
|
||||
{loadingStates.webhook ? (
|
||||
<Spinner size="small" color="#976af3" />
|
||||
) : (
|
||||
'Generate'
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,5 @@
|
||||
import {
|
||||
BarElement,
|
||||
CategoryScale,
|
||||
Chart as ChartJS,
|
||||
Legend,
|
||||
LinearScale,
|
||||
Title,
|
||||
Tooltip,
|
||||
BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip
|
||||
} from 'chart.js';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Bar } from 'react-chartjs-2';
|
||||
@@ -71,7 +65,6 @@ export default function Analytics({ agentId }: AnalyticsProps) {
|
||||
string,
|
||||
{ positive: number; negative: number }
|
||||
> | null>(null);
|
||||
const [agent, setAgent] = useState<Agent>();
|
||||
const [messagesFilter, setMessagesFilter] = useState<{
|
||||
label: string;
|
||||
value: string;
|
||||
@@ -97,21 +90,6 @@ export default function Analytics({ agentId }: AnalyticsProps) {
|
||||
const [loadingMessages, setLoadingMessages] = useLoaderState(true);
|
||||
const [loadingTokens, setLoadingTokens] = useLoaderState(true);
|
||||
const [loadingFeedback, setLoadingFeedback] = useLoaderState(true);
|
||||
const [loadingAgent, setLoadingAgent] = useLoaderState(true);
|
||||
|
||||
const fetchAgent = async (agentId: string) => {
|
||||
setLoadingAgent(true);
|
||||
try {
|
||||
const response = await userService.getAgent(agentId ?? '', token);
|
||||
if (!response.ok) throw new Error('Failed to fetch Chatbots');
|
||||
const agent = await response.json();
|
||||
setAgent(agent);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoadingAgent(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchMessagesData = async (agent_id?: string, filter?: string) => {
|
||||
setLoadingMessages(true);
|
||||
@@ -174,27 +152,22 @@ export default function Analytics({ agentId }: AnalyticsProps) {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (agentId) fetchAgent(agentId);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const id = agent?.id;
|
||||
const id = agentId;
|
||||
const filter = messagesFilter;
|
||||
fetchMessagesData(id, filter?.value);
|
||||
}, [agent, messagesFilter]);
|
||||
}, [agentId, messagesFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
const id = agent?.id;
|
||||
const id = agentId;
|
||||
const filter = tokenUsageFilter;
|
||||
fetchTokenData(id, filter?.value);
|
||||
}, [agent, tokenUsageFilter]);
|
||||
}, [agentId, tokenUsageFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
const id = agent?.id;
|
||||
const id = agentId;
|
||||
const filter = feedbackFilter;
|
||||
fetchFeedbackData(id, filter?.value);
|
||||
}, [agent, feedbackFilter]);
|
||||
|
||||
}, [agentId, feedbackFilter]);
|
||||
return (
|
||||
<div className="mt-12">
|
||||
{/* Messages Analytics */}
|
||||
|
||||
@@ -181,8 +181,7 @@ function Log({
|
||||
</p>
|
||||
<div className="my-px w-fit">
|
||||
<CopyButton
|
||||
text={JSON.stringify(filteredLog)}
|
||||
colorLight="transparent"
|
||||
textToCopy={JSON.stringify(filteredLog)}
|
||||
showText={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user