mirror of
https://github.com/arc53/DocsGPT.git
synced 2025-11-29 08:33:20 +00:00
(feat:toolConfig) ui details, no actions placeholder
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user