Skip to content

Commit 37f05ff

Browse files
antimonyGuantimonyGu
committed
feat(chat-ui): agent steps mock
1 parent 28a5328 commit 37f05ff

File tree

4 files changed

+225
-1
lines changed

4 files changed

+225
-1
lines changed

‎ee/tabby-ui/app/search/components/search.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ import TextAreaSearch from '@/components/textarea-search'
8484
import { ThemeToggle } from '@/components/theme-toggle'
8585
import { MyAvatar } from '@/components/user-avatar'
8686
import UserPanel from '@/components/user-panel'
87+
import { AgentSteps } from '@/components/agent-steps/agent-steps'
8788

8889
import { AssistantMessageSection } from './assistant-message-section'
8990
import { DevPanel } from './dev-panel'
@@ -781,6 +782,9 @@ export function Search() {
781782
} else if (message.role === Role.Assistant) {
782783
return (
783784
<>
785+
<div className="flex justify-center flex flex-col gap-y-5 pb-8 pt-2">
786+
<AgentSteps />
787+
</div>
784788
<AssistantMessageSection
785789
key={message.id}
786790
className="pb-8 pt-2"

‎ee/tabby-ui/components/agent-steps/agent-steps.tsx

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React from "react";
2+
import * as Accordion from "@radix-ui/react-accordion";
3+
import { ChevronDownIcon } from "@radix-ui/react-icons";
4+
import "./styles.css";
5+
import { cn } from '@/lib/utils'
6+
import { IconAgent, IconResult, IconSearch } from '@/components/ui/icons'
7+
8+
export const AgentSteps = () => (
9+
<Accordion.Root
10+
className="AccordionRoot"
11+
type="single"
12+
defaultValue="item-1"
13+
collapsible
14+
>
15+
<Accordion.Item className="AccordionItem" value="item-1">
16+
<AccordionTrigger>
17+
<div className="AgentHeader">
18+
<div className="AgentName">Tabby Agent</div>
19+
<div className="StepCounts">3-steps</div>
20+
</div>
21+
</AccordionTrigger>
22+
<AccordionContent>
23+
<div className="step">
24+
<div className="step-title text-sm font-bold leading-none flex items-center">
25+
<span className="inline-flex px-2">
26+
<IconAgent />
27+
</span>
28+
29+
<span>Thinking</span></div>
30+
<div className="step-content p-2">task</div>
31+
</div>
32+
<div className="step">
33+
<div className="step-title text-sm font-bold leading-none flex items-center">
34+
<span className="inline-flex px-2"><IconResult /></span>
35+
Searching web</div>
36+
<div className="step-content p-2">task</div>
37+
</div>
38+
<div className="step">
39+
<div className="step-title text-sm font-bold leading-none flex items-center">
40+
<span className="inline-flex px-2"><IconSearch /></span>
41+
Combining results</div>
42+
<div className="step-content p-2">task</div>
43+
</div>
44+
</AccordionContent>
45+
</Accordion.Item>
46+
</Accordion.Root>
47+
);
48+
49+
const AccordionTrigger = React.forwardRef<
50+
React.ElementRef<typeof Accordion.Trigger>,
51+
React.ComponentPropsWithoutRef<typeof Accordion.Trigger>
52+
>(
53+
({ children, className, ...props }, forwardedRef) => (
54+
<Accordion.Header className="AccordionHeader">
55+
<Accordion.Trigger
56+
className={cn("AccordionTrigger", className)}
57+
{...props}
58+
ref={forwardedRef}
59+
>
60+
{children}
61+
<ChevronDownIcon className="AccordionChevron" aria-hidden />
62+
</Accordion.Trigger>
63+
</Accordion.Header>
64+
),
65+
);
66+
67+
const AccordionContent = React.forwardRef<
68+
React.ElementRef<typeof Accordion.Content>,
69+
React.ComponentPropsWithoutRef<typeof Accordion.Content>
70+
>(
71+
({ children, className, ...props }, forwardedRef) => (
72+
<Accordion.Content
73+
className={cn("AccordionContent", className)}
74+
{...props}
75+
ref={forwardedRef}
76+
>
77+
<div className="AccordionContentText">{children}</div>
78+
</Accordion.Content>
79+
),
80+
);

‎ee/tabby-ui/components/agent-steps/styles.css

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
@import "@radix-ui/colors/black-alpha.css";
2+
@import "@radix-ui/colors/mauve.css";
3+
@import "@radix-ui/colors/violet.css";
4+
5+
/* reset */
6+
button,
7+
h3 {
8+
all: unset;
9+
}
10+
11+
.AccordionRoot {
12+
border-radius: 6px;
13+
width: 100%;
14+
background-color: var(--mauve-6);
15+
box-shadow: 0 2px 10px var(--black-a4);
16+
}
17+
18+
.AccordionItem {
19+
overflow: hidden;
20+
margin-top: 1px;
21+
}
22+
23+
.AccordionItem:first-child {
24+
margin-top: 0;
25+
border-top-left-radius: 4px;
26+
border-top-right-radius: 4px;
27+
}
28+
29+
.AccordionItem:last-child {
30+
border-bottom-left-radius: 4px;
31+
border-bottom-right-radius: 4px;
32+
}
33+
34+
.AccordionItem:focus-within {
35+
position: relative;
36+
z-index: 1;
37+
box-shadow: 0 0 0 2px var(--mauve-12);
38+
}
39+
40+
.AccordionHeader {
41+
display: flex;
42+
}
43+
44+
.step-title {
45+
color: black;
46+
}
47+
48+
.AgentHeader {
49+
width: 100%;
50+
padding-right: 20px;
51+
display: flex;
52+
justify-content: space-between;
53+
align-items: center;
54+
}
55+
56+
.AccordionTrigger {
57+
font-family: inherit;
58+
background-color: transparent;
59+
padding: 0 20px;
60+
height: 45px;
61+
flex: 1;
62+
display: flex;
63+
align-items: center;
64+
justify-content: space-between;
65+
font-size: 15px;
66+
line-height: 1;
67+
/* color: var(--violet-11); */
68+
box-shadow: 0 1px 0 var(--mauve-6);
69+
background-color: white;
70+
}
71+
72+
.AccordionTrigger:hover {
73+
background-color: var(--mauve-2);
74+
}
75+
76+
.AccordionContent {
77+
overflow: hidden;
78+
font-size: 15px;
79+
color: var(--mauve-11);
80+
background-color: var(--mauve-2);
81+
}
82+
.AccordionContent[data-state="open"] {
83+
animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
84+
}
85+
.AccordionContent[data-state="closed"] {
86+
animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
87+
}
88+
89+
.AccordionContentText {
90+
padding: 15px 20px;
91+
}
92+
93+
.AccordionChevron {
94+
color: var(--violet-10);
95+
transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
96+
}
97+
.AccordionTrigger[data-state="open"] > .AccordionChevron {
98+
transform: rotate(180deg);
99+
}
100+
101+
@keyframes slideDown {
102+
from {
103+
height: 0;
104+
}
105+
to {
106+
height: var(--radix-accordion-content-height);
107+
}
108+
}
109+
110+
@keyframes slideUp {
111+
from {
112+
height: var(--radix-accordion-content-height);
113+
}
114+
to {
115+
height: 0;
116+
}
117+
}

‎ee/tabby-ui/components/ui/icons.tsx

+24-1
Original file line numberDiff line numberDiff line change
@@ -1484,6 +1484,27 @@ function IconJetBrains({ className, ...props }: React.ComponentProps<'svg'>) {
14841484
)
14851485
}
14861486

1487+
1488+
function IconAgent({ className, ...props }: React.ComponentProps<'svg'>) {
1489+
return (
1490+
<svg viewBox="0 0 15 15" width="15" height="15" xmlns="http://www.w3.org/2000/svg">
1491+
<path
1492+
d="M7.5 0.875C5.49797 0.875 3.875 2.49797 3.875 4.5C3.875 6.15288 4.98124 7.54738 6.49373 7.98351C5.2997 8.12901 4.27557 8.55134 3.50407 9.31167C2.52216 10.2794 2.02502 11.72 2.02502 13.5999C2.02502 13.8623 2.23769 14.0749 2.50002 14.0749C2.76236 14.0749 2.97502 13.8623 2.97502 13.5999C2.97502 11.8799 3.42786 10.7206 4.17091 9.9883C4.91536 9.25463 6.02674 8.87499 7.49995 8.87499C8.97317 8.87499 10.0846 9.25463 10.8291 9.98831C11.5721 10.7206 12.025 11.8799 12.025 13.5999C12.025 13.8623 12.2376 14.0749 12.5 14.0749C12.7623 14.075 12.975 13.8623 12.975 13.6C12.975 11.72 12.4778 10.2794 11.4959 9.31166C10.7244 8.55135 9.70025 8.12903 8.50625 7.98352C10.0187 7.5474 11.125 6.15289 11.125 4.5C11.125 2.49797 9.50203 0.875 7.5 0.875ZM4.825 4.5C4.825 3.02264 6.02264 1.825 7.5 1.825C8.97736 1.825 10.175 3.02264 10.175 4.5C10.175 5.97736 8.97736 7.175 7.5 7.175C6.02264 7.175 4.825 5.97736 4.825 4.5Z"
1493+
fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
1494+
</svg>
1495+
)
1496+
}
1497+
1498+
function IconResult({ className, ...props }: React.ComponentProps<'svg'>) {
1499+
return (
1500+
<svg viewBox="0 0 15 15" width="15" height="15" xmlns="http://www.w3.org/2000/svg">
1501+
<path
1502+
d="M11.8536 1.14645C11.6583 0.951184 11.3417 0.951184 11.1465 1.14645L3.71455 8.57836C3.62459 8.66832 3.55263 8.77461 3.50251 8.89155L2.04044 12.303C1.9599 12.491 2.00189 12.709 2.14646 12.8536C2.29103 12.9981 2.50905 13.0401 2.69697 12.9596L6.10847 11.4975C6.2254 11.4474 6.3317 11.3754 6.42166 11.2855L13.8536 3.85355C14.0488 3.65829 14.0488 3.34171 13.8536 3.14645L11.8536 1.14645ZM4.42166 9.28547L11.5 2.20711L12.7929 3.5L5.71455 10.5784L4.21924 11.2192L3.78081 10.7808L4.42166 9.28547Z"
1503+
fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
1504+
</svg>
1505+
)
1506+
}
1507+
14871508
function IconLayers({
14881509
className,
14891510
...props
@@ -1788,5 +1809,7 @@ export {
17881809
IconRegex,
17891810
IconSquareActivity,
17901811
IconCircleAlert,
1791-
IconCircleHelp
1812+
IconCircleHelp,
1813+
IconAgent,
1814+
IconResult,
17921815
}

0 commit comments

Comments
 (0)