You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
4.0 KiB
118 lines
4.0 KiB
import { useEffect, useRef, useState } from "react";
|
|
import { Tooltip } from "react-tooltip";
|
|
import { At } from "@phosphor-icons/react";
|
|
import { useIsAgentSessionActive } from "@/utils/chat/agent";
|
|
|
|
export default function AvailableAgentsButton({ showing, setShowAgents }) {
|
|
const agentSessionActive = useIsAgentSessionActive();
|
|
if (agentSessionActive) return null;
|
|
return (
|
|
<div
|
|
id="agent-list-btn"
|
|
data-tooltip-id="tooltip-agent-list-btn"
|
|
data-tooltip-content="查看可用于聊天的所有可用座席."
|
|
aria-label="查看可用于聊天的所有可用座席."
|
|
onClick={() => setShowAgents(!showing)}
|
|
className={`flex justify-center items-center cursor-pointer ${
|
|
showing ? "!opacity-100" : ""
|
|
}`}
|
|
>
|
|
<At
|
|
color="var(--theme-sidebar-footer-icon-fill)"
|
|
className={`w-[22px] h-[22px] pointer-events-none text-theme-text-primary opacity-60 hover:opacity-100 light:opacity-100 light:hover:opacity-60`}
|
|
/>
|
|
<Tooltip
|
|
id="tooltip-agent-list-btn"
|
|
place="top"
|
|
delayShow={300}
|
|
className="tooltip !text-xs z-99"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function AbilityTag({ text }) {
|
|
return (
|
|
<div className="px-2 bg-theme-action-menu-item-hover text-theme-text-secondary text-xs w-fit rounded-sm">
|
|
<p>{text}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function AvailableAgents({
|
|
showing,
|
|
setShowing,
|
|
sendCommand,
|
|
promptRef,
|
|
}) {
|
|
const formRef = useRef(null);
|
|
const agentSessionActive = useIsAgentSessionActive();
|
|
useEffect(() => {
|
|
function listenForOutsideClick() {
|
|
if (!showing || !formRef.current) return false;
|
|
document.addEventListener("click", closeIfOutside);
|
|
}
|
|
listenForOutsideClick();
|
|
}, [showing, formRef.current]);
|
|
|
|
const closeIfOutside = ({ target }) => {
|
|
if (target.id === "agent-list-btn") return;
|
|
const isOutside = !formRef?.current?.contains(target);
|
|
if (!isOutside) return;
|
|
setShowing(false);
|
|
};
|
|
|
|
if (agentSessionActive) return null;
|
|
return (
|
|
<>
|
|
<div hidden={!showing}>
|
|
<div className="w-full flex justify-center absolute bottom-[130px] md:bottom-[150px] left-0 z-10 px-4">
|
|
<div
|
|
ref={formRef}
|
|
className="w-[600px] p-2 bg-theme-action-menu-bg rounded-2xl shadow flex-col justify-center items-start gap-2.5 inline-flex"
|
|
>
|
|
<button
|
|
onClick={() => {
|
|
setShowing(false);
|
|
sendCommand("@agent ", false);
|
|
promptRef?.current?.focus();
|
|
}}
|
|
className="border-none w-full hover:cursor-pointer hover:bg-theme-action-menu-item-hover px-2 py-2 rounded-xl flex flex-col justify-start group"
|
|
>
|
|
<div className="w-full flex-col text-left flex pointer-events-none">
|
|
<div className="text-theme-text-primary text-sm">
|
|
<b>@代理</b> - 此工作区的默认代理.
|
|
</div>
|
|
<div className="flex flex-wrap gap-2 mt-2">
|
|
<AbilityTag text="rag-search" />
|
|
<AbilityTag text="web-scraping" />
|
|
<AbilityTag text="web-browsing" />
|
|
<AbilityTag text="save-file-to-browser" />
|
|
<AbilityTag text="list-documents" />
|
|
<AbilityTag text="summarize-document" />
|
|
<AbilityTag text="chart-generation" />
|
|
</div>
|
|
</div>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled={true}
|
|
className="w-full rounded-xl flex flex-col justify-start group"
|
|
>
|
|
<div className="w-full flex-col text-center flex pointer-events-none">
|
|
<div className="text-theme-text-secondary text-xs italic">
|
|
海关代理很快就要来了！
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function useAvailableAgents() {
|
|
const [showAgents, setShowAgents] = useState(false);
|
|
return { showAgents, setShowAgents };
|
|
}
|