Skip to content

Commit 1908467

Browse files
Wendong-FanWendong-Fan
authored
enhance: Add Worker, add simple tooltip and fix empty message bug (#365)
2 parents 019cd5f + 482f265 commit 1908467

8 files changed

Lines changed: 152 additions & 135 deletions

File tree

‎src/components/AddWorker/IntegrationList.tsx‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
import { Button } from "@/components/ui/button";
2-
import {
3-
Tooltip,
4-
TooltipContent,
5-
TooltipTrigger,
6-
} from "@/components/ui/tooltip";
2+
import { TooltipSimple } from "@/components/ui/tooltip";
73
import { CircleAlert } from "lucide-react";
84
import { proxyFetchGet, proxyFetchPost, proxyFetchDelete } from "@/api/http";
95

@@ -341,14 +337,9 @@ export default function IntegrationList({
341337
{item.name}
342338
</div>
343339
<div className="flex items-center">
344-
<Tooltip>
345-
<TooltipTrigger asChild>
340+
<TooltipSimple content={item.desc}>
346341
<CircleAlert className="w-4 h-4 text-icon-secondary" />
347-
</TooltipTrigger>
348-
<TooltipContent>
349-
<p>{item.desc}</p>
350-
</TooltipContent>
351-
</Tooltip>
342+
</TooltipSimple>
352343
</div>
353344
</div>
354345
{item.env_vars.length !== 0 && (

‎src/components/AddWorker/ToolSelect.tsx‎

Lines changed: 10 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { proxyFetchGet, proxyFetchPost } from "@/api/http";
1111
import { Input } from "../ui/input";
1212
import { Button } from "../ui/button";
1313
import githubIcon from "@/assets/github.svg";
14-
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
14+
import { TooltipSimple } from "../ui/tooltip";
1515
import IntegrationList from "./IntegrationList";
1616
import { getProxyBaseURL } from "@/lib";
1717
import { capitalizeFirstLetter } from "@/lib";
@@ -368,19 +368,12 @@ const ToolSelect = forwardRef<
368368
<div className="text-sm font-bold leading-17 text-text-action overflow-hidden text-ellipsis break-words line-clamp-1">
369369
{item.name}
370370
</div>
371-
<Tooltip>
372-
<TooltipTrigger asChild>
373-
<CircleAlert
371+
<TooltipSimple content={item.description}>
372+
<CircleAlert
374373
className="w-4 h-4 text-icon-primary cursor-pointer"
375374
onClick={(e) => e.stopPropagation()}
376375
/>
377-
</TooltipTrigger>
378-
<TooltipContent>
379-
<div className="text-xs font-bold leading-17 text-text-body">
380-
{item.description}
381-
</div>
382-
</TooltipContent>
383-
</Tooltip>
376+
</TooltipSimple>
384377
</div>
385378
<div className="flex items-center gap-1">
386379
{getGithubRepoName(item.home_page) && (
@@ -434,19 +427,12 @@ const ToolSelect = forwardRef<
434427
<div className="text-sm font-bold leading-17 text-text-action overflow-hidden text-ellipsis break-words line-clamp-1">
435428
{item.mcp_name}
436429
</div>
437-
<Tooltip>
438-
<TooltipTrigger asChild>
439-
<CircleAlert
440-
className="w-4 h-4 text-icon-primary cursor-pointer"
441-
onClick={(e) => e.stopPropagation()}
442-
/>
443-
</TooltipTrigger>
444-
<TooltipContent>
445-
<div className="text-xs font-bold leading-17 text-text-body">
446-
{item.mcp_desc}
447-
</div>
448-
</TooltipContent>
449-
</Tooltip>
430+
<TooltipSimple content={item.mcp_desc}>
431+
<CircleAlert
432+
className="w-4 h-4 text-icon-primary cursor-pointer"
433+
onClick={(e) => e.stopPropagation()}
434+
/>
435+
</TooltipSimple>
450436
</div>
451437
<div className="flex items-center gap-1">
452438
<Button

‎src/components/AddWorker/index.tsx‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { fetchPost } from "@/api/http";
2626
import { useChatStore } from "@/store/chatStore";
2727
import { useAuthStore, useWorkerList } from "@/store/authStore";
2828
import { useTranslation } from "react-i18next";
29+
import { TooltipSimple } from "../ui/tooltip";
2930

3031
interface EnvValue {
3132
value: string;
@@ -57,7 +58,8 @@ export function AddWorker({
5758
}) {
5859
const { t } = useTranslation();
5960
const [dialogOpen, setDialogOpen] = useState(false);
60-
const chatStore = useChatStore();
61+
const activeTaskId = useChatStore((state) => state.activeTaskId);
62+
const tasks = useChatStore((state) => state.tasks);
6163
const [showEnvConfig, setShowEnvConfig] = useState(false);
6264
const [activeMcp, setActiveMcp] = useState<McpItem | null>(null);
6365
const [envValues, setEnvValues] = useState<{ [key: string]: EnvValue }>({});
@@ -79,7 +81,7 @@ export function AddWorker({
7981
console.log(mcp);
8082
if (mcp?.install_command?.env) {
8183
const initialValues: { [key: string]: EnvValue } = {};
82-
Object.keys(mcp.install_command.env).forEach((key) => {
84+
for(const key of Object.keys(mcp.install_command.env)) {
8385
initialValues[key] = {
8486
value: "",
8587
required: true,
@@ -88,7 +90,7 @@ export function AddWorker({
8890
?.replace(/{{/g, "")
8991
?.replace(/}}/g, "") || "",
9092
};
91-
});
93+
}
9294
setEnvValues(initialValues);
9395
}
9496
};
@@ -189,21 +191,19 @@ export function AddWorker({
189191
}
190192
const localTool: string[] = [];
191193
const mcpList: string[] = [];
192-
selectedTools.map((tool: any) => {
194+
selectedTools.forEach((tool: any) => {
193195
if (tool.isLocal) {
194196
localTool.push(tool.toolkit as string);
195197
} else {
196198
mcpList.push(tool?.key || tool?.mcp_name);
197199
}
198200
});
199-
Object.keys(mcpLocal.mcpServers).map((key) => {
200-
console.log("mcpList", mcpList);
201-
console.log("mcpLocal.mcpServers", mcpLocal.mcpServers);
202-
201+
console.log("mcpLocal.mcpServers", mcpLocal.mcpServers);
202+
for(const key of Object.keys(mcpLocal.mcpServers)) {
203203
if (!mcpList.includes(key)) {
204204
delete mcpLocal.mcpServers[key];
205205
}
206-
});
206+
}
207207
if (edit) {
208208
const newWorkerList = workerList.map((worker) => {
209209
if (worker.type === workerInfo?.type) {
@@ -232,8 +232,7 @@ export function AddWorker({
232232
});
233233
setWorkerList(newWorkerList);
234234
} else if (
235-
chatStore.activeTaskId &&
236-
chatStore.tasks[chatStore.activeTaskId].messages.length === 0
235+
activeTaskId && tasks[activeTaskId].messages.length === 0
237236
) {
238237
const worker: Agent = {
239238
tasks: [],
@@ -255,7 +254,7 @@ export function AddWorker({
255254
};
256255
setWorkerList([...workerList, worker]);
257256
} else {
258-
fetchPost(`/task/${chatStore.activeTaskId}/add-agent`, {
257+
fetchPost(`/task/${activeTaskId}/add-agent`, {
259258
name: workerName,
260259
description: workerDescription,
261260
tools: localTool,
@@ -331,7 +330,9 @@ export function AddWorker({
331330
? t("workforce.configure-mcp-server")
332331
: t("workforce.add-your-mcp-server")}
333332
</div>
334-
<CircleAlert size={16} />
333+
<TooltipSimple content="Configure your MCP worker node here.">
334+
<CircleAlert size={16} />
335+
</TooltipSimple>
335336
</div>
336337
</DialogTitle>
337338
</DialogHeader>
@@ -420,7 +421,7 @@ export function AddWorker({
420421
<div className="flex items-center gap-sm pb-md border-[0px] border-b border-solid border-border-secondary">
421422
<Bot size={32} className="text-icon-primary" />
422423
<Input
423-
placeholder=""
424+
placeholder="Server Name"
424425
value={workerName}
425426
onChange={(e) => {
426427
setWorkerName(e.target.value);
@@ -430,6 +431,7 @@ export function AddWorker({
430431
className={`!border-none !bg-transparent !shadow-none text-xl leading-2xl font-bold !ring-0 !ring-offset-0 ${
431432
nameError ? "border-red-500" : ""
432433
}`}
434+
required
433435
/>
434436
<RefreshCw
435437
size={16}
@@ -447,7 +449,7 @@ export function AddWorker({
447449
{t("workforce.description-optional")}
448450
</div>
449451
<Textarea
450-
placeholder=""
452+
placeholder="Mcp for ..."
451453
value={workerDescription}
452454
onChange={(e) => setWorkerDescription(e.target.value)}
453455
className="rounded-sm border border-solid border-input-border-default bg-input-bg-default !shadow-none text-sm leading-normal !ring-0 !ring-offset-0 resize-none"
@@ -458,7 +460,9 @@ export function AddWorker({
458460
<div className="text-text-body text-sm leading-normal font-bold">
459461
{t("workforce.agent-tool")}
460462
</div>
461-
<CircleAlert size={16} />
463+
<TooltipSimple content="Select MCP tools for your worker node.">
464+
<CircleAlert size={16} />
465+
</TooltipSimple>
462466
</div>
463467
</div>
464468
<ToolSelect

‎src/components/ChatBox/BottomInput.tsx‎

Lines changed: 72 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ import { useState, useEffect } from "react";
2323
import { fetchPut } from "@/api/http";
2424
import { Tag } from "../ui/tag";
2525
import { useTranslation } from "react-i18next";
26+
import { TooltipSimple } from "../ui/tooltip";
27+
import { toast } from "sonner";
2628

2729
export const BottomInput = ({
2830
message,
@@ -385,74 +387,82 @@ export const BottomInput = ({
385387
)}
386388
<div className="flex items-center justify-between">
387389
<div className="flex items-center gap-1">
388-
<Button
389-
disabled={!privacy || isPending}
390-
onClick={handleFileSelect}
391-
variant="ghost"
392-
size="icon"
393-
className="rounded"
394-
title="Select File"
395-
>
396-
<Paperclip
397-
size={16}
398-
className="text-button-transparent-icon-disabled"
399-
/>
400-
</Button>
390+
<TooltipSimple content="Select File">
391+
<Button
392+
disabled={!privacy || isPending || useCloudModelInDev}
393+
onClick={handleFileSelect}
394+
variant="ghost"
395+
size="icon"
396+
className="rounded"
397+
>
398+
<Paperclip
399+
size={16}
400+
className="text-button-transparent-icon-disabled"
401+
/>
402+
</Button>
403+
</TooltipSimple>
401404
</div>
402-
<Button
403-
disabled={!privacy || isPending}
404-
onClick={() => {
405-
if (isPending) {
406-
if (isTakeControl) {
407-
handleTakeControl("resume");
408-
setIsTakeControl && setIsTakeControl(false);
405+
<TooltipSimple content={message.trim().length > 0 ? "Send Message" : "Enter message to send first"}>
406+
<Button
407+
disabled={!privacy || isPending || useCloudModelInDev}
408+
onClick={() => {
409+
if (isPending) {
410+
if (isTakeControl) {
411+
handleTakeControl("resume");
412+
setIsTakeControl && setIsTakeControl(false);
413+
} else {
414+
setIsTakeControl && setIsTakeControl(true);
415+
handleTakeControl("pause");
416+
}
417+
} else if(message.trim().length > 0) {
418+
onSend();
419+
onPendingChange(true);
409420
} else {
410-
setIsTakeControl && setIsTakeControl(true);
411-
handleTakeControl("pause");
421+
console.log("Message is empty ", message);
422+
toast.error("Message cannot be empty", {
423+
closeButton: true,
424+
});
412425
}
413-
} else {
414-
onSend();
415-
onPendingChange(true);
416-
}
417-
}}
418-
size="icon"
419-
variant={
420-
isPending
421-
? isTakeControl
426+
}}
427+
size="icon"
428+
variant={
429+
isPending
430+
? isTakeControl
431+
? "success"
432+
: "cuation"
433+
: message.trim().length > 0
422434
? "success"
423-
: "cuation"
424-
: message.length > 0
425-
? "success"
426-
: "primary"
427-
}
428-
className={`rounded-full transition-all w-6`}
429-
>
430-
{isPending ? (
431-
// <CircleLoader className="w-4 h-4" />
432-
<>
433-
{isTakeControl ? (
434-
<Play
435-
color="white"
436-
className="w-4 h-4 text-button-primary-icon-default"
437-
/>
438-
) : (
439-
<img
440-
src={racPause}
441-
alt="racPause"
442-
className="w-4 h-4 text-text-inverse-primary"
435+
: "primary"
436+
}
437+
className={`rounded-full transition-all w-6`}
438+
>
439+
{isPending ? (
440+
// <CircleLoader className="w-4 h-4" />
441+
<>
442+
{isTakeControl ? (
443+
<Play
444+
color="white"
445+
className="w-4 h-4 text-button-primary-icon-default"
446+
/>
447+
) : (
448+
<img
449+
src={racPause}
450+
alt="racPause"
451+
className="w-4 h-4 text-text-inverse-primary"
452+
/>
453+
)}
454+
</>
455+
) : (
456+
<ArrowRight
457+
size={16}
458+
style={{
459+
transform: message ? "rotate(-90deg)" : "rotate(0deg)",
460+
}}
461+
className="transition-all text-button-primary-icon-default"
443462
/>
444463
)}
445-
</>
446-
) : (
447-
<ArrowRight
448-
size={16}
449-
style={{
450-
transform: message ? "rotate(-90deg)" : "rotate(0deg)",
451-
}}
452-
className="transition-all text-button-primary-icon-default"
453-
/>
454-
)}
455-
</Button>
464+
</Button>
465+
</TooltipSimple>
456466
</div>
457467
</div>
458468
)}

0 commit comments

Comments
 (0)