{tooltip}
+div]:pb-0', className)}
+ {...props}
+ />
+
+ );
+};
+
+export type BranchMessagesProps = HTMLAttributes;
+
+export const BranchMessages = ({ children, ...props }: BranchMessagesProps) => {
+ const { currentBranch, setBranches, branches } = useBranch();
+ const childrenArray = Array.isArray(children) ? children : [children];
+
+ // Use useEffect to update branches when they change
+ useEffect(() => {
+ if (branches.length !== childrenArray.length) {
+ setBranches(childrenArray);
+ }
+ }, [childrenArray, branches, setBranches]);
+
+ return childrenArray.map((branch, index) => (
+ & {
+ from: UIMessage['role'];
+};
+
+export const BranchSelector = ({
+ className,
+ from,
+ ...props
+}: BranchSelectorProps) => {
+ const { totalBranches } = useBranch();
+
+ // Don't render if there's only one branch
+ if (totalBranches <= 1) {
+ return null;
+ }
+
+ return (
+
+ );
+};
+
+export type BranchPreviousProps = ComponentProps;
+
+export const BranchPrevious = ({
+ className,
+ children,
+ ...props
+}: BranchPreviousProps) => {
+ const { goToPrevious, totalBranches } = useBranch();
+
+ return (
+
+ );
+};
+
+export type BranchNextProps = ComponentProps;
+
+export const BranchNext = ({
+ className,
+ children,
+ ...props
+}: BranchNextProps) => {
+ const { goToNext, totalBranches } = useBranch();
+
+ return (
+
+ );
+};
+
+export type BranchPageProps = HTMLAttributes;
+
+export const BranchPage = ({ className, ...props }: BranchPageProps) => {
+ const { currentBranch, totalBranches } = useBranch();
+
+ return (
+
+ {currentBranch + 1} of {totalBranches}
+
+ );
+};
diff --git a/inspiration-engine/src/components/ui/shadcn-io/ai/code-block.tsx b/inspiration-engine/src/components/ui/shadcn-io/ai/code-block.tsx
new file mode 100644
index 0000000..2b0a5a5
--- /dev/null
+++ b/inspiration-engine/src/components/ui/shadcn-io/ai/code-block.tsx
@@ -0,0 +1,148 @@
+'use client';
+
+import { Button } from '@repo/shadcn-ui/components/ui/button';
+import { cn } from '@repo/shadcn-ui/lib/utils';
+import { CheckIcon, CopyIcon } from 'lucide-react';
+import type { ComponentProps, HTMLAttributes, ReactNode } from 'react';
+import { createContext, useContext, useState } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import {
+ oneDark,
+ oneLight,
+} from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+type CodeBlockContextType = {
+ code: string;
+};
+
+const CodeBlockContext = createContext({
+ code: '',
+});
+
+export type CodeBlockProps = HTMLAttributes & {
+ code: string;
+ language: string;
+ showLineNumbers?: boolean;
+ children?: ReactNode;
+};
+
+export const CodeBlock = ({
+ code,
+ language,
+ showLineNumbers = false,
+ className,
+ children,
+ ...props
+}: CodeBlockProps) => (
+
+
+);
+
+export type CodeBlockCopyButtonProps = ComponentProps & {
+ onCopy?: () => void;
+ onError?: (error: Error) => void;
+ timeout?: number;
+};
+
+export const CodeBlockCopyButton = ({
+ onCopy,
+ onError,
+ timeout = 2000,
+ children,
+ className,
+ ...props
+}: CodeBlockCopyButtonProps) => {
+ const [isCopied, setIsCopied] = useState(false);
+ const { code } = useContext(CodeBlockContext);
+
+ const copyToClipboard = async () => {
+ if (typeof window === 'undefined' || !navigator.clipboard.writeText) {
+ onError?.(new Error('Clipboard API not available'));
+ return;
+ }
+
+ try {
+ await navigator.clipboard.writeText(code);
+ setIsCopied(true);
+ onCopy?.();
+ setTimeout(() => setIsCopied(false), timeout);
+ } catch (error) {
+ onError?.(error as Error);
+ }
+ };
+
+ const Icon = isCopied ? CheckIcon : CopyIcon;
+
+ return (
+
+ );
+};
diff --git a/inspiration-engine/src/components/ui/shadcn-io/ai/conversation.tsx b/inspiration-engine/src/components/ui/shadcn-io/ai/conversation.tsx
new file mode 100644
index 0000000..4db4a84
--- /dev/null
+++ b/inspiration-engine/src/components/ui/shadcn-io/ai/conversation.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import { Button } from '@repo/shadcn-ui/components/ui/button';
+import { cn } from '@repo/shadcn-ui/lib/utils';
+import { ArrowDownIcon } from 'lucide-react';
+import type { ComponentProps } from 'react';
+import { useCallback } from 'react';
+import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';
+
+export type ConversationProps = ComponentProps;
+
+export const Conversation = ({ className, ...props }: ConversationProps) => (
+ ;
+
+export const ConversationScrollButton = ({
+ className,
+ ...props
+}: ConversationScrollButtonProps) => {
+ const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+
+ const handleScrollToBottom = useCallback(() => {
+ scrollToBottom();
+ }, [scrollToBottom]);
+
+ return (
+ !isAtBottom && (
+
+ )
+ );
+};
diff --git a/inspiration-engine/src/components/ui/shadcn-io/ai/image.tsx b/inspiration-engine/src/components/ui/shadcn-io/ai/image.tsx
new file mode 100644
index 0000000..9cd0daf
--- /dev/null
+++ b/inspiration-engine/src/components/ui/shadcn-io/ai/image.tsx
@@ -0,0 +1,24 @@
+import { cn } from '@repo/shadcn-ui/lib/utils';
+import type { Experimental_GeneratedImage } from 'ai';
+
+export type ImageProps = Experimental_GeneratedImage & {
+ className?: string;
+ alt?: string;
+};
+
+export const Image = ({
+ base64,
+ uint8Array,
+ mediaType,
+ ...props
+}: ImageProps) => (
+ 
+);
diff --git a/inspiration-engine/src/components/ui/shadcn-io/ai/inline-citation.tsx b/inspiration-engine/src/components/ui/shadcn-io/ai/inline-citation.tsx
new file mode 100644
index 0000000..f353ced
--- /dev/null
+++ b/inspiration-engine/src/components/ui/shadcn-io/ai/inline-citation.tsx
@@ -0,0 +1,283 @@
+'use client';
+
+import { Badge } from '@repo/shadcn-ui/components/ui/badge';
+import {
+ Carousel,
+ CarouselContent,
+ CarouselItem,
+ type CarouselApi,
+} from '@repo/shadcn-ui/components/ui/carousel';
+import {
+ HoverCard,
+ HoverCardContent,
+ HoverCardTrigger,
+} from '@repo/shadcn-ui/components/ui/hover-card';
+import { cn } from '@repo/shadcn-ui/lib/utils';
+import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react';
+import { type ComponentProps, useCallback, useEffect, useState, useRef, createContext, useContext } from 'react';
+
+// Context to share carousel API with child components
+const CarouselApiContext = createContext(undefined);
+
+// Hook to access carousel API from the nearest InlineCitationCarousel parent
+const useCarouselApi = () => {
+ const api = useContext(CarouselApiContext);
+ return api;
+};
+
+export type InlineCitationProps = ComponentProps<'span'>;
+
+export const InlineCitation = ({
+ className,
+ ...props
+}: InlineCitationProps) => (
+
+);
+
+export type InlineCitationTextProps = ComponentProps<'span'>;
+
+export const InlineCitationText = ({
+ className,
+ ...props
+}: InlineCitationTextProps) => (
+
+);
+
+export type InlineCitationCardProps = ComponentProps;
+
+export const InlineCitationCard = (props: InlineCitationCardProps) => (
+ & {
+ sources: string[];
+};
+
+export const InlineCitationCardTrigger = ({
+ sources,
+ className,
+ ...props
+}: InlineCitationCardTriggerProps) => (
+
+
+ {sources.length ? (
+ <>
+ {new URL(sources[0]).hostname}{' '}
+ {sources.length > 1 && `+${sources.length - 1}`}
+
+ ) : (
+ 'unknown'
+ )}
+
+
+);
+
+export type InlineCitationCardBodyProps = ComponentProps<'div'>;
+
+export const InlineCitationCardBody = ({
+ className,
+ ...props
+}: InlineCitationCardBodyProps) => (
+ ;
+
+export const InlineCitationCarousel = ({
+ className,
+ children,
+ ...props
+}: InlineCitationCarouselProps) => {
+ const [api, setApi] = useState();
+
+ return (
+
+
+ {children}
+
+
+ );
+};
+
+export type InlineCitationCarouselContentProps = ComponentProps<'div'>;
+
+export const InlineCitationCarouselContent = (
+ props: InlineCitationCarouselContentProps
+) => & {
+ size?: number;
+};
+
+export const Loader = ({ className, size = 16, ...props }: LoaderProps) => (
+ & {
+ from: UIMessage['role'];
+};
+
+export const Message = ({ className, from, ...props }: MessageProps) => (
+
div]:pb-0',
+ index === currentBranch ? 'block' : 'hidden'
+ )}
+ key={branch.key}
+ {...props}
+ >
+ {branch}
+
+ ));
+};
+
+export type BranchSelectorProps = HTMLAttributes
+
+
+
+ {code}
+
+
+ {code}
+
+ {children && (
+
+
+ {children}
+
+ )}
+
+ {children ?? `${current}/${count}`}
+
+ );
+};
+
+export type InlineCitationCarouselPrevProps = ComponentProps<'button'>;
+
+export const InlineCitationCarouselPrev = ({
+ className,
+ ...props
+}: InlineCitationCarouselPrevProps) => {
+ const api = useCarouselApi();
+
+ const handleClick = useCallback(() => {
+ if (api) {
+ api.scrollPrev();
+ }
+ }, [api]);
+
+ return (
+
+ );
+};
+
+export type InlineCitationCarouselNextProps = ComponentProps<'button'>;
+
+export const InlineCitationCarouselNext = ({
+ className,
+ ...props
+}: InlineCitationCarouselNextProps) => {
+ const api = useCarouselApi();
+
+ const handleClick = useCallback(() => {
+ if (api) {
+ api.scrollNext();
+ }
+ }, [api]);
+
+ return (
+
+ );
+};
+
+export type InlineCitationSourceProps = ComponentProps<'div'> & {
+ title?: string;
+ url?: string;
+ description?: string;
+};
+
+export const InlineCitationSource = ({
+ title,
+ url,
+ description,
+ className,
+ children,
+ ...props
+}: InlineCitationSourceProps) => (
+
+ {title && (
+
+);
+
+export type InlineCitationQuoteProps = ComponentProps<'blockquote'>;
+
+export const InlineCitationQuote = ({
+ children,
+ className,
+ ...props
+}: InlineCitationQuoteProps) => (
+ {title}
+ )} + {url && ( +{url}
+ )} + {description && ( ++ {description} +
+ )} + {children} ++ {children} ++); diff --git a/inspiration-engine/src/components/ui/shadcn-io/ai/loader.tsx b/inspiration-engine/src/components/ui/shadcn-io/ai/loader.tsx new file mode 100644 index 0000000..28df347 --- /dev/null +++ b/inspiration-engine/src/components/ui/shadcn-io/ai/loader.tsx @@ -0,0 +1,96 @@ +import { cn } from '@repo/shadcn-ui/lib/utils'; +import type { HTMLAttributes } from 'react'; + +type LoaderIconProps = { + size?: number; +}; + +const LoaderIcon = ({ size = 16 }: LoaderIconProps) => ( + +); + +export type LoaderProps = HTMLAttributes
+
+);
diff --git a/inspiration-engine/src/components/ui/shadcn-io/ai/message.tsx b/inspiration-engine/src/components/ui/shadcn-io/ai/message.tsx
new file mode 100644
index 0000000..2dcf3fe
--- /dev/null
+++ b/inspiration-engine/src/components/ui/shadcn-io/ai/message.tsx
@@ -0,0 +1,64 @@
+import {
+ Avatar,
+ AvatarFallback,
+ AvatarImage,
+} from '@repo/shadcn-ui/components/ui/avatar';
+import { cn } from '@repo/shadcn-ui/lib/utils';
+import type { UIMessage } from 'ai';
+import type { ComponentProps, HTMLAttributes } from 'react';
+
+export type MessageProps = HTMLAttributesdiv]:max-w-[80%]',
+ className
+ )}
+ {...props}
+ />
+);
+
+export type MessageContentProps = HTMLAttributes;
+
+export const MessageContent = ({
+ children,
+ className,
+ ...props
+}: MessageContentProps) => (
+ & {
+ src: string;
+ name?: string;
+};
+
+export const MessageAvatar = ({
+ src,
+ name,
+ className,
+ ...props
+}: MessageAvatarProps) => (
+
+ {name?.slice(0, 2) || 'ME'}
+
+);
diff --git a/inspiration-engine/src/components/ui/shadcn-io/ai/prompt-input.tsx b/inspiration-engine/src/components/ui/shadcn-io/ai/prompt-input.tsx
new file mode 100644
index 0000000..24356f3
--- /dev/null
+++ b/inspiration-engine/src/components/ui/shadcn-io/ai/prompt-input.tsx
@@ -0,0 +1,225 @@
+'use client';
+
+import { Button } from '@repo/shadcn-ui/components/ui/button';
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@repo/shadcn-ui/components/ui/select';
+import { Textarea } from '@repo/shadcn-ui/components/ui/textarea';
+import { cn } from '@repo/shadcn-ui/lib/utils';
+import type { ChatStatus } from 'ai';
+import { Loader2Icon, SendIcon, SquareIcon, XIcon } from 'lucide-react';
+import type {
+ ComponentProps,
+ HTMLAttributes,
+ KeyboardEventHandler,
+} from 'react';
+import { Children } from 'react';
+
+export type PromptInputProps = HTMLAttributes;
+
+export const PromptInput = ({ className, ...props }: PromptInputProps) => (
+
+);
+
+export type PromptInputTextareaProps = ComponentProps & {
+ minHeight?: number;
+ maxHeight?: number;
+};
+
+export const PromptInputTextarea = ({
+ onChange,
+ className,
+ placeholder = 'What would you like to know?',
+ minHeight = 48,
+ maxHeight = 164,
+ ...props
+}: PromptInputTextareaProps) => {
+ const handleKeyDown: KeyboardEventHandler = (e) => {
+ if (e.key === 'Enter') {
+ if (e.shiftKey) {
+ // Allow newline
+ return;
+ }
+
+ // Submit on Enter (without Shift)
+ e.preventDefault();
+ const form = e.currentTarget.form;
+ if (form) {
+ form.requestSubmit();
+ }
+ }
+ };
+
+ return (
+
+
+);
+
+export type MessageAvatarProps = ComponentProps{children}
+