LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-29 08:33:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1608 from siiddhantt/feat/api-tool

Browse Source 
feat: API Tool
This commit is contained in:
Alex
2025-02-03 11:48:57 +00:00
committed by GitHub
parent 9583095734 a5b2eb3a28
commit fa01f86b19
15 changed files with 1150 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/assets/circle-check.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgb(34 197 94)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 281 B

1
frontend/src/assets/circle-x.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgb(239 68 68)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-x"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 293 B

10
frontend/src/index.css
View File

@@ -50,11 +50,11 @@ body.dark {
@layer components {
.table-default {
@apply block w-full table-auto content-start justify-center rounded-xl border border-silver dark:border-silver/40 text-center dark:text-bright-gray overflow-auto;
@apply block w-full table-auto justify-center rounded-xl border border-silver dark:border-silver/40 text-center dark:text-bright-gray overflow-auto;
}
.table-default th {
@apply p-4 font-normal text-gray-400 text-nowrap; /* Remove border-r */
@apply p-4 font-normal text-gray-400 text-nowrap;
}
.table-default th {
@@ -62,15 +62,15 @@ body.dark {
}
.table-default th:last-child {
flex: 0; /* Ensure the last column does not stretch unnecessarily */
flex: 0;
}
.table-default td {
@apply border-t w-full border-silver dark:border-silver/40 px-4 py-2; /* Remove border-r */
@apply border-t w-full border-silver dark:border-silver/40 px-4 py-2;
}
.table-default td:last-child {
@apply border-r-0; /* Ensure no right border on the last column */
@apply border-r-0;
}
.table-default th,

75
frontend/src/modals/AddActionModal.tsx Normal file
View File

@@ -0,0 +1,75 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import Exit from '../assets/exit.svg';
import Input from '../components/Input';
import { ActiveState } from '../models/misc';
export default function AddActionModal({
modalState,
setModalState,
handleSubmit,
}: {
modalState: ActiveState;
setModalState: (state: ActiveState) => void;
handleSubmit: (actionName: string) => void;
}) {
const { t } = useTranslation();
const [actionName, setActionName] = React.useState('');
return (
<div
className={`${
modalState === 'ACTIVE' ? 'visible' : 'hidden'
} fixed top-0 left-0 z-30 h-screen w-screen bg-gray-alpha flex items-center justify-center`}
>
<article className="flex w-11/12 sm:w-[512px] flex-col gap-4 rounded-2xl bg-white shadow-lg dark:bg-[#26272E]">
<div className="relative">
<button
className="absolute top-3 right-4 m-2 w-3"
onClick={() => {
setModalState('INACTIVE');
}}
>
<img className="filter dark:invert" src={Exit} />
</button>
<div className="p-6">
<h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
New Action
</h2>
<div className="mt-6 relative px-3">
<span className="absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
Action Name
</span>
<Input
type="text"
value={actionName}
onChange={(e) => setActionName(e.target.value)}
borderVariant="thin"
placeholder={'Enter name'}
></Input>
</div>
<div className="mt-8 flex flex-row-reverse gap-1 px-3">
<button
onClick={() => {
handleSubmit(actionName);
setModalState('INACTIVE');
}}
className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-[#6F3FD1]"
>
Add
</button>
<button
onClick={() => {
setModalState('INACTIVE');
}}
className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
>
{t('modals.configTool.closeButton')}
</button>
</div>
</div>
</div>
</article>
</div>
);
}

22
frontend/src/modals/AddToolModal.tsx
View File

@@ -1,11 +1,12 @@
import React, { useRef } from 'react';
import { useTranslation } from 'react-i18next';
import userService from '../api/services/userService';
import Exit from '../assets/exit.svg';
import { ActiveState } from '../models/misc';
import { AvailableTool } from './types';
import ConfigToolModal from './ConfigToolModal';
import { useOutsideAlerter } from '../hooks';
import { useTranslation } from 'react-i18next';
import { ActiveState } from '../models/misc';
import ConfigToolModal from './ConfigToolModal';
import { AvailableToolType } from './types';
export default function AddToolModal({
message,
@@ -18,12 +19,11 @@ export default function AddToolModal({
setModalState: (state: ActiveState) => void;
getUserTools: () => void;
}) {
const [availableTools, setAvailableTools] = React.useState<AvailableTool[]>(
[],
);
const [selectedTool, setSelectedTool] = React.useState<AvailableTool | null>(
null,
);
const [availableTools, setAvailableTools] = React.useState<
AvailableToolType[]
>([]);
const [selectedTool, setSelectedTool] =
React.useState<AvailableToolType | null>(null);
const [configModalState, setConfigModalState] =
React.useState<ActiveState>('INACTIVE');
const modalRef = useRef<HTMLDivElement>(null);
@@ -46,7 +46,7 @@ export default function AddToolModal({
});
};
const handleAddTool = (tool: AvailableTool) => {
const handleAddTool = (tool: AvailableToolType) => {
if (Object.keys(tool.configRequirements).length === 0) {
userService
.createTool({

8
frontend/src/modals/ConfigToolModal.tsx
View File

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
import Exit from '../assets/exit.svg';
import Input from '../components/Input';
import { ActiveState } from '../models/misc';
import { AvailableTool } from './types';
import { AvailableToolType } from './types';
import userService from '../api/services/userService';
export default function ConfigToolModal({
@@ -15,13 +15,13 @@ export default function ConfigToolModal({
}: {
modalState: ActiveState;
setModalState: (state: ActiveState) => void;
tool: AvailableTool | null;
tool: AvailableToolType | null;
getUserTools: () => void;
}) {
const { t } = useTranslation();
const [authKey, setAuthKey] = React.useState<string>('');
const handleAddTool = (tool: AvailableTool) => {
const handleAddTool = (tool: AvailableToolType) => {
userService
.createTool({
name: tool.name,
@@ -75,7 +75,7 @@ export default function ConfigToolModal({
<div className="mt-8 flex flex-row-reverse gap-1 px-3">
<button
onClick={() => {
handleAddTool(tool as AvailableTool);
handleAddTool(tool as AvailableToolType);
}}
className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-[#6F3FD1]"
>

4
frontend/src/modals/WrapperModal.tsx
View File

@@ -1,13 +1,13 @@
import React, { useEffect, useRef } from 'react';
import Exit from '../assets/exit.svg';
import { WrapperModalProps } from './types';
import { WrapperModalPropsType } from './types';
export default function WrapperModal({
children,
close,
isPerformingTask,
}: WrapperModalProps) {
}: WrapperModalPropsType) {
const modalRef = useRef<HTMLDivElement>(null);
useEffect(() => {

4
frontend/src/modals/types/index.ts
View File

@@ -1,4 +1,4 @@
export type AvailableTool = {
export type AvailableToolType = {
name: string;
displayName: string;
description: string;
@@ -10,7 +10,7 @@ export type AvailableTool = {
}[];
};
export type WrapperModalProps = {
export type WrapperModalPropsType = {
children?: React.ReactNode;
isPerformingTask?: boolean;
close: () => void;

1044
frontend/src/settings/ToolConfig.tsx
View File

File diff suppressed because it is too large Load Diff

10
frontend/src/settings/Tools.tsx
View File

@@ -10,7 +10,7 @@ import { useDarkTheme } from '../hooks';
import AddToolModal from '../modals/AddToolModal';
import { ActiveState } from '../models/misc';
import ToolConfig from './ToolConfig';
import { UserTool } from './types';
import { APIToolType, UserToolType } from './types';
export default function Tools() {
const { t } = useTranslation();
@@ -18,8 +18,10 @@ export default function Tools() {
const [searchTerm, setSearchTerm] = React.useState('');
const [addToolModalState, setAddToolModalState] =
React.useState<ActiveState>('INACTIVE');
const [userTools, setUserTools] = React.useState<UserTool[]>([]);
const [selectedTool, setSelectedTool] = React.useState<UserTool | null>(null);
const [userTools, setUserTools] = React.useState<UserToolType[]>([]);
const [selectedTool, setSelectedTool] = React.useState<
UserToolType | APIToolType | null
>(null);
const getUserTools = () => {
userService
@@ -47,7 +49,7 @@ export default function Tools() {
});
};
const handleSettingsClick = (tool: UserTool) => {
const handleSettingsClick = (tool: UserToolType) => {
setSelectedTool(tool);
};

34
frontend/src/settings/types/index.ts
View File

@@ -19,7 +19,19 @@ export type LogData = {
timestamp: string;
};
export type UserTool = {
export type ParameterGroupType = {
type: 'object';
properties: {
[key: string]: {
type: 'string' | 'integer';
description: string;
value: string | number;
filled_by_llm: boolean;
};
};
};
export type UserToolType = {
id: string;
name: string;
displayName: string;
@@ -47,3 +59,23 @@ export type UserTool = {
active: boolean;
}[];
};
export type APIActionType = {
name: string;
url: string;
description: string;
method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
query_params: ParameterGroupType;
headers: ParameterGroupType;
body: ParameterGroupType;
active: boolean;
};
export type APIToolType = {
id: string;
name: string;
displayName: string;
description: string;
status: boolean;
config: { actions: { [key: string]: APIActionType } };
};