Skip to content

Commit

Permalink
refactor: adjust shadcn-ui template to follow decomposition guide nam…
Browse files Browse the repository at this point in the history 
…e conventions (#724)
  • Loading branch information
@Yonom
Yonom authored Sep 2, 2024
1 parent d512764 commit 3a56c14
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 77 deletions.
6 changes: 3 additions & 3 deletions packages/shadcn-registry/registry/assistant-ui/assistant-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ import { BotIcon, ChevronDownIcon } from "lucide-react";
import { type FC, forwardRef } from "react";
import { AssistantModalPrimitive } from "@assistant-ui/react";

import { Thread } from "@/components/ui/assistant-ui/thread";
import { MyThread } from "@/components/ui/assistant-ui/thread";
import { TooltipIconButton } from "@/components/ui/assistant-ui/tooltip-icon-button";

export const AssistantModal: FC = () => {
export const MyAssistantModal: FC = () => {
return (
<AssistantModalPrimitive.Root>
<AssistantModalPrimitive.Anchor className="fixed bottom-4 right-4 size-11">
Expand All @@ -20,7 +20,7 @@ export const AssistantModal: FC = () => {
sideOffset={16}
className="bg-popover text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out data-[state=open]:zoom-in data-[state=open]:slide-in-from-bottom-1/2 data-[state=open]:slide-in-from-right-1/2 data-[state=closed]:slide-out-to-bottom-1/2 data-[state=closed]:slide-out-to-right-1/2 z-50 h-[500px] w-[400px] overflow-clip rounded-xl border p-0 shadow-md outline-none [&>div]:bg-inherit"
>
<Thread />
<MyThread />
</AssistantModalPrimitive.Content>
</AssistantModalPrimitive.Root>
);
Expand Down
6 changes: 3 additions & 3 deletions packages/shadcn-registry/registry/assistant-ui/assistant-sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ import {
} from "@/components/ui/resizable";
import type { FC, PropsWithChildren } from "react";

import { Thread } from "@/components/ui/assistant-ui/thread";
import { MyThread } from "@/components/ui/assistant-ui/thread";

export const AssistantSidebar: FC<PropsWithChildren> = ({ children }) => {
export const MyAssistantSidebar: FC<PropsWithChildren> = ({ children }) => {
return (
<ResizablePanelGroup direction="horizontal">
<ResizablePanel>{children}</ResizablePanel>
<ResizableHandle />
<ResizablePanel>
<Thread />
<MyThread />
</ResizablePanel>
</ResizablePanelGroup>
);
Expand Down
136 changes: 74 additions & 62 deletions packages/shadcn-registry/registry/assistant-ui/full/thread.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,30 +28,30 @@ import { MarkdownText } from "@/components/ui/assistant-ui/markdown-text";
import { TooltipIconButton } from "@/components/ui/assistant-ui/tooltip-icon-button";
import { cn } from "@/lib/utils";

export const Thread: FC = () => {
export const MyThread: FC = () => {
return (
<ThreadPrimitive.Root className="bg-background h-full">
<ThreadPrimitive.Viewport className="flex h-full flex-col items-center overflow-y-scroll scroll-smooth bg-inherit px-4 pt-8">
<ThreadWelcome />
<MyThreadWelcome />

<ThreadPrimitive.Messages
components={{
UserMessage,
EditComposer,
AssistantMessage,
UserMessage: MyUserMessage,
EditComposer: MyEditComposer,
AssistantMessage: MyAssistantMessage,
}}
/>

<div className="sticky bottom-0 mt-4 flex w-full max-w-2xl flex-grow flex-col items-center justify-end rounded-t-lg bg-inherit pb-4">
<ThreadScrollToBottom />
<Composer />
<MyThreadScrollToBottom />
<MyComposer />
</div>
</ThreadPrimitive.Viewport>
</ThreadPrimitive.Root>
);
};

const ThreadScrollToBottom: FC = () => {
const MyThreadScrollToBottom: FC = () => {
return (
<ThreadPrimitive.ScrollToBottom asChild>
<TooltipIconButton
Expand All @@ -65,7 +65,7 @@ const ThreadScrollToBottom: FC = () => {
);
};

const ThreadWelcome: FC = () => {
const MyThreadWelcome: FC = () => {
return (
<ThreadPrimitive.Empty>
<div className="flex flex-grow basis-full flex-col items-center justify-center">
Expand All @@ -78,7 +78,7 @@ const ThreadWelcome: FC = () => {
);
};

const Composer: FC = () => {
const MyComposer: FC = () => {
return (
<ComposerPrimitive.Root className="flex w-full flex-wrap items-end rounded-lg border px-2.5 transition-shadow focus-within:shadow-sm">
<ComposerPrimitive.Input
Expand Down Expand Up @@ -113,31 +113,37 @@ const Composer: FC = () => {
);
};

const UserMessage: FC = () => {
const MyUserMessage: FC = () => {
return (
<MessagePrimitive.Root className="grid w-full max-w-2xl auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] gap-y-2 py-4">
<ActionBarPrimitive.Root
hideWhenRunning
autohide="not-last"
className="col-start-1 mr-3 mt-2.5 flex flex-col items-end"
>
<ActionBarPrimitive.Edit asChild>
<TooltipIconButton tooltip="Edit">
<PencilIcon />
</TooltipIconButton>
</ActionBarPrimitive.Edit>
</ActionBarPrimitive.Root>
<MyUserActionBar />

<div className="bg-muted text-foreground col-start-2 row-start-1 max-w-xl break-words rounded-3xl px-5 py-2.5">
<MessagePrimitive.Content />
</div>

<BranchPicker className="col-span-full col-start-1 row-start-2 -mr-1 justify-end" />
<MyBranchPicker className="col-span-full col-start-1 row-start-2 -mr-1 justify-end" />
</MessagePrimitive.Root>
);
};

const EditComposer: FC = () => {
const MyUserActionBar: FC = () => {
return (
<ActionBarPrimitive.Root
hideWhenRunning
autohide="not-last"
className="col-start-1 mr-3 mt-2.5 flex flex-col items-end"
>
<ActionBarPrimitive.Edit asChild>
<TooltipIconButton tooltip="Edit">
<PencilIcon />
</TooltipIconButton>
</ActionBarPrimitive.Edit>
</ActionBarPrimitive.Root>
);
};

const MyEditComposer: FC = () => {
return (
<ComposerPrimitive.Root className="bg-muted my-4 flex w-full max-w-2xl flex-col gap-2 rounded-xl">
<ComposerPrimitive.Input className="text-foreground flex h-8 w-full resize-none border-none bg-transparent p-4 pb-0 outline-none focus:ring-0" />
Expand All @@ -154,7 +160,7 @@ const EditComposer: FC = () => {
);
};

const AssistantMessage: FC = () => {
const MyAssistantMessage: FC = () => {
return (
<MessagePrimitive.Root className="relative grid w-full max-w-2xl grid-cols-[auto_auto_1fr] grid-rows-[auto_1fr] py-4">
<Avatar className="col-start-1 row-span-full row-start-1 mr-4">
Expand All @@ -165,49 +171,55 @@ const AssistantMessage: FC = () => {
<MessagePrimitive.Content components={{ Text: MarkdownText }} />
</div>

<BranchPicker className="col-start-2 row-start-2 -ml-2 mr-2" />
<MyAssistantActionBar />

<ActionBarPrimitive.Root
hideWhenRunning
autohide="not-last"
autohideFloat="single-branch"
className="text-muted-foreground data-[floating]:bg-background col-start-3 row-start-2 -ml-1 flex gap-1 data-[floating]:absolute data-[floating]:rounded-md data-[floating]:border data-[floating]:p-1 data-[floating]:shadow-sm"
>
<MessagePrimitive.If speaking={false}>
<ActionBarPrimitive.Speak asChild>
<TooltipIconButton tooltip="Read aloud">
<AudioLinesIcon />
</TooltipIconButton>
</ActionBarPrimitive.Speak>
</MessagePrimitive.If>
<MessagePrimitive.If speaking>
<ActionBarPrimitive.StopSpeaking asChild>
<TooltipIconButton tooltip="Stop">
<StopCircleIcon />
</TooltipIconButton>
</ActionBarPrimitive.StopSpeaking>
</MessagePrimitive.If>
<ActionBarPrimitive.Copy asChild>
<TooltipIconButton tooltip="Copy">
<MessagePrimitive.If copied>
<CheckIcon />
</MessagePrimitive.If>
<MessagePrimitive.If copied={false}>
<CopyIcon />
</MessagePrimitive.If>
<MyBranchPicker className="col-start-2 row-start-2 -ml-2 mr-2" />
</MessagePrimitive.Root>
);
};

const MyAssistantActionBar: FC = () => {
return (
<ActionBarPrimitive.Root
hideWhenRunning
autohide="not-last"
autohideFloat="single-branch"
className="text-muted-foreground data-[floating]:bg-background col-start-3 row-start-2 -ml-1 flex gap-1 data-[floating]:absolute data-[floating]:rounded-md data-[floating]:border data-[floating]:p-1 data-[floating]:shadow-sm"
>
<MessagePrimitive.If speaking={false}>
<ActionBarPrimitive.Speak asChild>
<TooltipIconButton tooltip="Read aloud">
<AudioLinesIcon />
</TooltipIconButton>
</ActionBarPrimitive.Copy>
<ActionBarPrimitive.Reload asChild>
<TooltipIconButton tooltip="Refresh">
<RefreshCwIcon />
</ActionBarPrimitive.Speak>
</MessagePrimitive.If>
<MessagePrimitive.If speaking>
<ActionBarPrimitive.StopSpeaking asChild>
<TooltipIconButton tooltip="Stop">
<StopCircleIcon />
</TooltipIconButton>
</ActionBarPrimitive.Reload>
</ActionBarPrimitive.Root>
</MessagePrimitive.Root>
</ActionBarPrimitive.StopSpeaking>
</MessagePrimitive.If>
<ActionBarPrimitive.Copy asChild>
<TooltipIconButton tooltip="Copy">
<MessagePrimitive.If copied>
<CheckIcon />
</MessagePrimitive.If>
<MessagePrimitive.If copied={false}>
<CopyIcon />
</MessagePrimitive.If>
</TooltipIconButton>
</ActionBarPrimitive.Copy>
<ActionBarPrimitive.Reload asChild>
<TooltipIconButton tooltip="Refresh">
<RefreshCwIcon />
</TooltipIconButton>
</ActionBarPrimitive.Reload>
</ActionBarPrimitive.Root>
);
};

const BranchPicker: FC<BranchPickerPrimitiveRootProps> = ({
const MyBranchPicker: FC<BranchPickerPrimitiveRootProps> = ({
className,
...rest
}) => {
Expand Down
18 changes: 9 additions & 9 deletions packages/shadcn-registry/registry/assistant-ui/thread.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,28 +11,28 @@ import { SendHorizontalIcon } from "lucide-react";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { TooltipIconButton } from "@/components/ui/assistant-ui/tooltip-icon-button";

export const Thread: FC = () => {
export const MyThread: FC = () => {
return (
<ThreadPrimitive.Root className="bg-background h-full">
<ThreadPrimitive.Viewport className="flex h-full flex-col items-center overflow-y-scroll scroll-smooth bg-inherit px-4 pt-8">
<ThreadWelcome />
<MyThreadWelcome />

<ThreadPrimitive.Messages
components={{
UserMessage,
AssistantMessage,
UserMessage: MyUserMessage,
AssistantMessage: MyAssistantMessage,
}}
/>

<div className="sticky bottom-0 mt-4 flex w-full max-w-2xl flex-grow flex-col items-center justify-end rounded-t-lg bg-inherit pb-4">
<Composer />
<MyComposer />
</div>
</ThreadPrimitive.Viewport>
</ThreadPrimitive.Root>
);
};

const ThreadWelcome: FC = () => {
const MyThreadWelcome: FC = () => {
return (
<ThreadPrimitive.Empty>
<div className="flex flex-grow basis-full flex-col items-center justify-center">
Expand All @@ -45,7 +45,7 @@ const ThreadWelcome: FC = () => {
);
};

const Composer: FC = () => {
const MyComposer: FC = () => {
return (
<ComposerPrimitive.Root className="flex w-full flex-wrap items-end rounded-lg border px-2.5 transition-shadow focus-within:shadow-sm">
<ComposerPrimitive.Input
Expand All @@ -67,7 +67,7 @@ const Composer: FC = () => {
);
};

const UserMessage: FC = () => {
const MyUserMessage: FC = () => {
return (
<MessagePrimitive.Root className="grid w-full max-w-2xl auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] gap-y-2 py-4">
<div className="bg-muted text-foreground col-start-2 row-start-1 max-w-xl break-words rounded-3xl px-5 py-2.5">
Expand All @@ -77,7 +77,7 @@ const UserMessage: FC = () => {
);
};

const AssistantMessage: FC = () => {
const MyAssistantMessage: FC = () => {
return (
<MessagePrimitive.Root className="relative grid w-full max-w-2xl grid-cols-[auto_1fr] grid-rows-[auto_1fr] py-4">
<Avatar className="col-start-1 row-span-full row-start-1 mr-4">
Expand Down

0 comments on commit 3a56c14

Please sign in to comment.