LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-30 09:03:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: api tool config section + agent refactor for more llm fields

Browse Source
This commit is contained in:
Siddhant Rai
2025-02-03 06:07:10 +05:30
parent 9319ec5bb2
commit a5b2eb3a28
13 changed files with 1048 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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;