(feat:toolConfig) ui details, no actions placeholder

This commit is contained in:
ManishMadan2882
2025-05-27 19:02:41 +05:30
parent 7e826d5002
commit 5097f77469

View File

@@ -16,6 +16,9 @@ import { selectToken } from '../preferences/preferenceSlice';
import { APIActionType, APIToolType, UserToolType } from './types';
import { useTranslation } from 'react-i18next';
import { areObjectsEqual } from '../utils/objectUtils';
import { useDarkTheme } from '../hooks';
import NoFilesIcon from '../assets/no-files.svg';
import NoFilesDarkIcon from '../assets/no-files-dark.svg';
export default function ToolConfig({
tool,
@@ -44,6 +47,7 @@ export default function ToolConfig({
const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(false);
const [showUnsavedModal, setShowUnsavedModal] = React.useState(false);
const { t } = useTranslation();
const [isDarkTheme] = useDarkTheme();
const handleBackClick = () => {
if (hasUnsavedChanges) {
@@ -211,29 +215,44 @@ export default function ToolConfig({
</div>
</div>
<div className="flex flex-col gap-4">
<div className="mx-1 my-2 h-[0.8px] w-full rounded-full bg-[#C4C4C4]/40 lg:w-[95%]"></div>
<div className="mx-0 my-2 h-[0.8px] w-full rounded-full bg-[#C4C4C4]/40"></div>
<div className="flex w-full flex-row items-center justify-between gap-2">
<p className="text-base font-semibold text-eerie-black dark:text-bright-gray">
Actions
</p>
</div>
{tool.name === 'api_tool' ? (
<>
<APIToolConfig tool={tool as APIToolType} setTool={setTool} />
<div className="mt-4 flex justify-end">
{tool.name === 'api_tool' &&
(!tool.config.actions ||
Object.keys(tool.config.actions).length === 0) && (
<button
onClick={() => setActionModalState('ACTIVE')}
className="rounded-full border border-solid border-violets-are-blue px-5 py-1 text-sm text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
>
Add action
</button>
)}
</div>
{tool.name === 'api_tool' ? (
<>
{tool.config.actions &&
Object.keys(tool.config.actions).length > 0 ? (
<APIToolConfig tool={tool as APIToolType} setTool={setTool} />
) : (
<div className="flex flex-col items-center justify-center py-8">
<img
src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
alt="No actions found"
className="mx-auto mb-4 h-24 w-24"
/>
<p className="text-center text-gray-500 dark:text-gray-400">
No actions found
</p>
</div>
)}
</>
) : (
<div className="flex flex-col gap-12">
{'actions' in tool &&
tool.actions.map((action, actionIndex) => {
return (
{'actions' in tool && tool.actions && tool.actions.length > 0 ? (
tool.actions.map((action, actionIndex) => (
<div
key={actionIndex}
className="w-full rounded-xl border border-silver dark:border-silver/40"
@@ -404,8 +423,19 @@ export default function ToolConfig({
</table>
</div>
</div>
);
})}
))
) : (
<div className="flex flex-col items-center justify-center py-8">
<img
src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
alt="No actions found"
className="mx-auto mb-4 h-24 w-24"
/>
<p className="text-center text-gray-500 dark:text-gray-400">
No actions found
</p>
</div>
)}
</div>
)}
<AddActionModal