From 37f05ff02c8d1d4e00808dd58e4f521ce5a9a870 Mon Sep 17 00:00:00 2001
From: zzgu <guzhizhou28@gmail.com>
Date: Tue, 5 Nov 2024 19:54:00 -0800
Subject: [PATCH] feat(chat-ui): agent steps mock

---
 ee/tabby-ui/app/search/components/search.tsx  |   4 +
 .../components/agent-steps/agent-steps.tsx    |  80 ++++++++++++
 ee/tabby-ui/components/agent-steps/styles.css | 117 ++++++++++++++++++
 ee/tabby-ui/components/ui/icons.tsx           |  25 +++-
 4 files changed, 225 insertions(+), 1 deletion(-)
 create mode 100644 ee/tabby-ui/components/agent-steps/agent-steps.tsx
 create mode 100644 ee/tabby-ui/components/agent-steps/styles.css

diff --git a/ee/tabby-ui/app/search/components/search.tsx b/ee/tabby-ui/app/search/components/search.tsx
index adb54475d6f5..a1908516feb2 100644
--- a/ee/tabby-ui/app/search/components/search.tsx
+++ b/ee/tabby-ui/app/search/components/search.tsx
@@ -84,6 +84,7 @@ import TextAreaSearch from '@/components/textarea-search'
 import { ThemeToggle } from '@/components/theme-toggle'
 import { MyAvatar } from '@/components/user-avatar'
 import UserPanel from '@/components/user-panel'
+import { AgentSteps } from '@/components/agent-steps/agent-steps'
 
 import { AssistantMessageSection } from './assistant-message-section'
 import { DevPanel } from './dev-panel'
@@ -781,6 +782,9 @@ export function Search() {
                       } else if (message.role === Role.Assistant) {
                         return (
                           <>
+                            <div className="flex justify-center flex flex-col gap-y-5 pb-8 pt-2">
+                              <AgentSteps />
+                            </div>
                             <AssistantMessageSection
                               key={message.id}
                               className="pb-8 pt-2"
diff --git a/ee/tabby-ui/components/agent-steps/agent-steps.tsx b/ee/tabby-ui/components/agent-steps/agent-steps.tsx
new file mode 100644
index 000000000000..5ecba3edf7d0
--- /dev/null
+++ b/ee/tabby-ui/components/agent-steps/agent-steps.tsx
@@ -0,0 +1,80 @@
+import React from "react";
+import * as Accordion from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import "./styles.css";
+import { cn } from '@/lib/utils'
+import { IconAgent, IconResult, IconSearch } from '@/components/ui/icons'
+
+export const AgentSteps = () => (
+	<Accordion.Root
+		className="AccordionRoot"
+		type="single"
+		defaultValue="item-1"
+		collapsible
+	>
+		<Accordion.Item className="AccordionItem" value="item-1">
+			<AccordionTrigger>
+				<div className="AgentHeader">
+					<div className="AgentName">Tabby Agent</div>
+					<div className="StepCounts">3-steps</div>
+				</div>
+			</AccordionTrigger>
+			<AccordionContent>
+				<div className="step">
+					<div className="step-title text-sm font-bold leading-none flex items-center">
+						<span className="inline-flex px-2">
+							<IconAgent />
+						</span>
+						
+						<span>Thinking</span></div>
+					<div className="step-content p-2">task</div>
+				</div>
+				<div className="step">
+					<div className="step-title text-sm font-bold leading-none flex items-center">
+						<span className="inline-flex px-2"><IconResult /></span>
+						Searching web</div>
+					<div className="step-content p-2">task</div>
+				</div>
+				<div className="step">
+					<div className="step-title text-sm font-bold leading-none flex items-center">
+						<span className="inline-flex px-2"><IconSearch /></span>
+						Combining results</div>
+					<div className="step-content p-2">task</div>
+				</div>
+			</AccordionContent>
+		</Accordion.Item>
+	</Accordion.Root>
+);
+
+const AccordionTrigger = React.forwardRef<
+	React.ElementRef<typeof Accordion.Trigger>,
+	React.ComponentPropsWithoutRef<typeof Accordion.Trigger>
+	>(
+	({ children, className, ...props }, forwardedRef) => (
+		<Accordion.Header className="AccordionHeader">
+			<Accordion.Trigger
+				className={cn("AccordionTrigger", className)}
+				{...props}
+				ref={forwardedRef}
+			>
+				{children}
+				<ChevronDownIcon className="AccordionChevron" aria-hidden />
+			</Accordion.Trigger>
+		</Accordion.Header>
+	),
+);
+
+const AccordionContent = React.forwardRef<
+	React.ElementRef<typeof Accordion.Content>,
+	React.ComponentPropsWithoutRef<typeof Accordion.Content>
+>(
+	({ children, className, ...props }, forwardedRef) => (
+		<Accordion.Content
+			className={cn("AccordionContent", className)}
+			{...props}
+			ref={forwardedRef}
+		>
+			<div className="AccordionContentText">{children}</div>
+		</Accordion.Content>
+	),
+);
diff --git a/ee/tabby-ui/components/agent-steps/styles.css b/ee/tabby-ui/components/agent-steps/styles.css
new file mode 100644
index 000000000000..f6c8af3cbdc4
--- /dev/null
+++ b/ee/tabby-ui/components/agent-steps/styles.css
@@ -0,0 +1,117 @@
+@import "@radix-ui/colors/black-alpha.css";
+@import "@radix-ui/colors/mauve.css";
+@import "@radix-ui/colors/violet.css";
+
+/* reset */
+button,
+h3 {
+	all: unset;
+}
+
+.AccordionRoot {
+	border-radius: 6px;
+	width: 100%;
+	background-color: var(--mauve-6);
+	box-shadow: 0 2px 10px var(--black-a4);
+}
+
+.AccordionItem {
+	overflow: hidden;
+	margin-top: 1px;
+}
+
+.AccordionItem:first-child {
+	margin-top: 0;
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+}
+
+.AccordionItem:last-child {
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+}
+
+.AccordionItem:focus-within {
+	position: relative;
+	z-index: 1;
+	box-shadow: 0 0 0 2px var(--mauve-12);
+}
+
+.AccordionHeader {
+	display: flex;
+}
+
+.step-title {
+    color: black;
+}
+
+.AgentHeader {
+    width: 100%;
+    padding-right: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.AccordionTrigger {
+	font-family: inherit;
+	background-color: transparent;
+	padding: 0 20px;
+	height: 45px;
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	font-size: 15px;
+	line-height: 1;
+	/* color: var(--violet-11); */
+	box-shadow: 0 1px 0 var(--mauve-6);
+	background-color: white;
+}
+
+.AccordionTrigger:hover {
+	background-color: var(--mauve-2);
+}
+
+.AccordionContent {
+	overflow: hidden;
+	font-size: 15px;
+	color: var(--mauve-11);
+	background-color: var(--mauve-2);
+}
+.AccordionContent[data-state="open"] {
+	animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+.AccordionContent[data-state="closed"] {
+	animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+
+.AccordionContentText {
+	padding: 15px 20px;
+}
+
+.AccordionChevron {
+	color: var(--violet-10);
+	transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+.AccordionTrigger[data-state="open"] > .AccordionChevron {
+	transform: rotate(180deg);
+}
+
+@keyframes slideDown {
+	from {
+		height: 0;
+	}
+	to {
+		height: var(--radix-accordion-content-height);
+	}
+}
+
+@keyframes slideUp {
+	from {
+		height: var(--radix-accordion-content-height);
+	}
+	to {
+		height: 0;
+	}
+}
diff --git a/ee/tabby-ui/components/ui/icons.tsx b/ee/tabby-ui/components/ui/icons.tsx
index 31f9e2c2f776..1b811a48305b 100644
--- a/ee/tabby-ui/components/ui/icons.tsx
+++ b/ee/tabby-ui/components/ui/icons.tsx
@@ -1484,6 +1484,27 @@ function IconJetBrains({ className, ...props }: React.ComponentProps<'svg'>) {
   )
 }
 
+
+function IconAgent({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg viewBox="0 0 15 15" width="15" height="15" xmlns="http://www.w3.org/2000/svg">
+      <path
+        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"
+        fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
+    </svg>
+  )
+}
+
+function IconResult({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+<svg viewBox="0 0 15 15" width="15" height="15" xmlns="http://www.w3.org/2000/svg">
+    <path
+        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"
+        fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
+</svg>
+  )
+}
+
 function IconLayers({
   className,
   ...props
@@ -1788,5 +1809,7 @@ export {
   IconRegex,
   IconSquareActivity,
   IconCircleAlert,
-  IconCircleHelp
+  IconCircleHelp,
+  IconAgent,
+  IconResult,  
 }