feat(agent): 抽屉与会话页统一成一个对话界面,子会话在父会话里实时可见
- 抽屉和会话页渲染同一套 GoalComposer / AgentRunPanel;抽屉标题即最近会话切换, 头部只有新对话、在页面打开、关闭;去掉右下角悬浮按钮和最小化小窗 - 会话列表合一:对话与巡检混排带类型小标签,搜索 + 一个状态下拉,只列顶层会话 (GET /agent/runs?roots=true,新增可选参数) - 子会话卡片:由镜像的 subagent_* 事件折成,显示任务、状态、当前步骤、用时、调用次数、费用, 可展开看过程、可打开;顶部「N 个子会话运行中」跳到卡片;subagent_completed 加可选 durationMs - 回答去内部字段:汇报规则禁止照抄键值与字段表;展示层 stripInternalFields 把字段行 / 字段表移进技术信息 - 开场建议按页面给 2 条完整问法、点了直接发;指令只留 /先给方案,/重跑 改成「重新运行」按钮 Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01Cxwgnn2pbzQ7rXv3rq7fei
This commit is contained in:
1 parent
dd0f6e2c09
commit
3692793dff
35 files changed
+1454
-1137
No files matched your search
@@ -1,27 +1,24 @@
|
||||
import { FlaskConical } from "lucide-react";
|
||||
import { Outlet, useParams } from "react-router";
|
||||
import { agentMockEnabled } from "~/api/agent.ts";
|
||||
import { agentRunHref, pageListMemory, usePageListGroup, useRunGroup } from "~/components/agent/agent-nav.ts";
|
||||
import { agentRunHref, pageListMemory } from "~/components/agent/agent-nav.ts";
|
||||
import { AgentSessionList } from "~/components/agent/agent-session-list.tsx";
|
||||
import { PageHeader } from "~/components/console/page-header.tsx";
|
||||
import { Button } from "~/components/ui/button.tsx";
|
||||
import { cn } from "~/lib/utils.ts";
|
||||
|
||||
/**
|
||||
* 智能体页的外壳(AGUI-3):列表页与会话页共用。标题、演示提示与左栏会话列表在这里,只挂载一次;
|
||||
* 右栏是子路由(新对话输入框 / 某个会话)。切换会话、回到列表都不重挂载左栏,也不重播入场动画,
|
||||
* 标题与两栏的位置不跳。
|
||||
* 智能体会话页的外壳:列表页与会话页共用。标题、演示提示与左栏会话列表在这里,只挂载一次;
|
||||
* 右栏是子路由(新对话 / 某个会话),和抽屉里是同一个组件。切换会话、回到列表都不重挂载左栏,
|
||||
* 也不重播入场动画,标题与两栏的位置不跳。
|
||||
*/
|
||||
export default function AgentLayout() {
|
||||
const { runId } = useParams();
|
||||
const mock = agentMockEnabled();
|
||||
const runGroupOf = useRunGroup(runId);
|
||||
// 列表页没有 tab 就是「对话」;会话页的左栏分栏跟随当前会话(巡检会话及其子会话在「自动巡检」),也可以手动切换(记在 URL)
|
||||
const [group, setGroup] = usePageListGroup(runId ? runGroupOf : undefined);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader title="智能体" className="mb-4 md:mb-6" />
|
||||
<PageHeader title="智能体会话" className="mb-4 md:mb-6" />
|
||||
{mock ? (
|
||||
<div className="mb-4 flex flex-wrap items-center gap-3 rounded-xl border border-warning/40 bg-warning/10 px-4 py-3 text-caption text-warning">
|
||||
<FlaskConical className="h-4 w-4 shrink-0" />
|
||||
@@ -33,10 +30,9 @@ export default function AgentLayout() {
|
||||
) : null}
|
||||
<div
|
||||
data-agent-page
|
||||
// 智能体页没有右下角悬浮按钮,收回主内容区为它留的底部空白,两栏正好占满一屏
|
||||
className="-mb-16 grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,19rem)_minmax(0,1fr)] lg:items-start"
|
||||
className="grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,19rem)_minmax(0,1fr)] lg:items-start"
|
||||
>
|
||||
{/* 窄屏:列表页把会话列表排在输入框下面;会话页不显示列表(顶部有「全部会话」返回) */}
|
||||
{/* 窄屏:列表页把会话列表排在新对话下面;会话页不显示列表(顶部有「全部会话」返回) */}
|
||||
<aside
|
||||
className={cn(
|
||||
"pg-slab order-2 rounded-2xl p-3 lg:order-1 lg:block lg:h-[calc(100dvh-11.25rem)] lg:overflow-hidden",
|
||||
@@ -46,18 +42,14 @@ export default function AgentLayout() {
|
||||
<AgentSessionList
|
||||
activeId={runId}
|
||||
hrefFor={(id) => agentRunHref(id, mock)}
|
||||
group={group}
|
||||
onGroupChange={setGroup}
|
||||
memory={pageListMemory}
|
||||
className="h-full"
|
||||
className="h-full max-lg:max-h-[32rem]"
|
||||
/>
|
||||
</aside>
|
||||
<div className="order-1 min-w-0 lg:order-2">
|
||||
<Outlet context={{ group } satisfies AgentOutletContext} />
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export type AgentOutletContext = { group: ReturnType<typeof usePageListGroup>[0] };
|
||||
Reference in new issue
Block a user