Skip to content

Commit 818091e

Browse files
Acorn221Acorn221
committed
feat: added creator mode bar
1 parent d75b11d commit 818091e

3 files changed

Lines changed: 184 additions & 0 deletions

File tree

‎webview-ui/src/components/chat/ChatView.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ import {
4444
vscInputBorder,
4545
vscSidebarBorder,
4646
} from "../ui"
47+
import { CreatorModeBar } from "./CreatorModeBar"
4748

4849
interface ChatViewProps {
4950
isHidden: boolean
@@ -1138,6 +1139,9 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
11381139
flexDirection: "column",
11391140
overflow: "hidden",
11401141
}}>
1142+
{apiConfiguration?.creatorMode === true && (
1143+
<CreatorModeBar requestedPlan="YEET" isGenerating={isStreaming} />
1144+
)}
11411145
{task ? (
11421146
<>
11431147
<TaskHeader

‎webview-ui/src/components/chat/CreatorModeBar.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { CodeBracketIcon, PlayIcon, DocumentTextIcon as OutlineDocumentTextIcon } from "@heroicons/react/24/outline"
2+
import { Button } from "./button"
3+
import { DocumentTextIcon as SolidDocumentTextIcon } from "@heroicons/react/24/solid"
4+
import { FC } from "react"
5+
import { cn } from "@/lib/utils"
6+
7+
export type PlanningBarProps = {
8+
isGenerating?: boolean
9+
requestedPlan: string
10+
playCallback?: () => void
11+
nextCallback?: () => void
12+
className?: string
13+
}
14+
// from: https://vscode.dev/github/trypear/pearai-submodule/blob/acorn/253-submodule-api-fixed/gui/src/pages/creator/ui/planningBar.tsx#L15-L50
15+
// TODO: UI LIBRARY COMPONENT SHARING SHIZZ HERE!
16+
17+
export const CreatorModeBar: FC<PlanningBarProps> = ({
18+
isGenerating,
19+
requestedPlan,
20+
playCallback,
21+
nextCallback,
22+
className,
23+
}) => {
24+
return (
25+
<div
26+
className={cn(
27+
"bg-[#161718] w-full rounded-full flex text-white justify-between min-w-64 h-10 gap-4 relative",
28+
className,
29+
)}>
30+
{isGenerating && <div className="absolute inset-0 rainbow-border-glow" />}
31+
<div className="flex-1 flex h-full align-middle ml-5 gap-4 relative">
32+
<div className="relative h-full my-auto mr-1">
33+
<div className={`circle ${isGenerating ? "animated-circle" : ""}`} />
34+
</div>
35+
<div className="my-auto text-sm">Planning</div>
36+
<div className="relative my-auto">
37+
<div className="text-muted-foreground text-sm max-w-64 text-ellipsis truncate">{requestedPlan}</div>
38+
</div>
39+
</div>
40+
41+
<div className="flex justify-center align-middle mr-2 gap-4">
42+
<div className="my-auto">
43+
<Button variant="default" toggled>
44+
<SolidDocumentTextIcon />
45+
</Button>
46+
<Button>
47+
<CodeBracketIcon />
48+
</Button>
49+
<Button onClick={playCallback}>
50+
<PlayIcon />
51+
</Button>
52+
</div>
53+
<Button
54+
size="default"
55+
variant="secondary"
56+
className="my-auto rounded-lg text-[0.9em]"
57+
onClick={nextCallback}>
58+
Next
59+
</Button>
60+
{/* <ArrowTurnDownLeftIcon className="size-4" /> */}
61+
</div>
62+
</div>
63+
)
64+
}

‎webview-ui/src/components/chat/button/index.tsx‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import * as React from "react"
2+
import { Slot } from "@radix-ui/react-slot"
3+
import { cva, type VariantProps } from "class-variance-authority"
4+
5+
import { cn } from "@/lib/utils"
6+
// FROM: https://vscode.dev/github/trypear/pearai-submodule/blob/acorn/253-submodule-api-fixed/gui/src/pages/creator/ui/button/index.tsx#L1-L121
7+
// TODO: UI LIBRARY COMPONENT SHARING SHIZZ HERE!
8+
const buttonVariants = cva(
9+
"inline-flex items-center justify-center gap-2 border-none whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#a1a1aa] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
10+
{
11+
variants: {
12+
variant: {
13+
default: "bg-[#18181b] text-[#fafafa] shadow hover:bg-[#27272a]",
14+
destructive: "bg-[#ef4444] text-[#fafafa] shadow-sm hover:bg-[#dc2626]",
15+
outline: "border border-[#e4e4e7] bg-[#ffffff] shadow-sm hover:bg-[#f4f4f5] hover:text-[#18181b]",
16+
secondary: "bg-[#f4f4f5] text-[#18181b] hover:bg-[#e4e4e7]",
17+
ghost: "hover:bg-[#f4f4f5] hover:text-[#18181b]",
18+
link: "text-[#18181b] underline-offset-4 hover:underline",
19+
},
20+
size: {
21+
// default: "h-9 px-4 py-2",
22+
default: "h-7 rounded-md px-2 text-md",
23+
sm: "h-6 rounded-md px-2 text-xs",
24+
lg: "h-10 rounded-md px-8",
25+
icon: "h-9 w-9",
26+
},
27+
toggled: {
28+
true: "",
29+
},
30+
},
31+
compoundVariants: [
32+
{
33+
variant: "default",
34+
toggled: true,
35+
className: " bg-[#3030ad] text-[#0B84FF] hover:bg-[#3a3ad2]", // bg-[#27272a] text-[#fafafa]
36+
},
37+
{
38+
variant: "destructive",
39+
toggled: true,
40+
className: "bg-[#dc2626] text-[#fafafa]",
41+
},
42+
{
43+
variant: "outline",
44+
toggled: true,
45+
className: "bg-[#f4f4f5] text-[#18181b] border-[#a1a1aa]",
46+
},
47+
{
48+
variant: "secondary",
49+
toggled: true,
50+
// className: "bg-[#e4e4e7] text-[#18181b]"
51+
className: "bg-[#E3EFFF] text-[#4388F8] hover:bg-[#D1E3FF]",
52+
},
53+
{
54+
variant: "ghost",
55+
toggled: true,
56+
className: "bg-[#f4f4f5] text-[#18181b]",
57+
},
58+
{
59+
variant: "link",
60+
toggled: true,
61+
className: "text-[#18181b] underline",
62+
},
63+
],
64+
defaultVariants: {
65+
variant: "default",
66+
size: "default",
67+
toggled: false,
68+
},
69+
},
70+
)
71+
72+
export interface ButtonProps
73+
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
74+
VariantProps<typeof buttonVariants> {
75+
asChild?: boolean
76+
onToggle?: (toggled: boolean) => void
77+
}
78+
79+
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
80+
(
81+
{ className, variant, size, toggled: initialToggled = false, asChild = false, onToggle, onClick, ...props },
82+
ref,
83+
) => {
84+
const Comp = asChild ? Slot : "button"
85+
const [toggled, setToggled] = React.useState(initialToggled)
86+
87+
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
88+
if (onToggle) {
89+
const newToggled = !toggled
90+
setToggled(newToggled)
91+
onToggle(newToggled)
92+
}
93+
94+
onClick?.(event)
95+
}
96+
97+
return (
98+
<Comp
99+
className={cn(
100+
buttonVariants({
101+
variant,
102+
size,
103+
toggled: onToggle ? toggled : initialToggled,
104+
className,
105+
}),
106+
)}
107+
ref={ref}
108+
onClick={onToggle ? handleClick : onClick}
109+
{...props}
110+
/>
111+
)
112+
},
113+
)
114+
Button.displayName = "Button"
115+
116+
export { Button, buttonVariants }

0 commit comments

Comments
 (0)