diff --git a/components/button-scroll-to-bottom.tsx b/components/button-scroll-to-bottom.tsx index 9ec0659..b94f34a 100644 --- a/components/button-scroll-to-bottom.tsx +++ b/components/button-scroll-to-bottom.tsx @@ -1,10 +1,10 @@ 'use client' import * as React from 'react' -import { ArrowDown } from 'lucide-react' import { cn } from '@/lib/utils' import { Button, type ButtonProps } from '@/components/ui/button' +import { IconArrowDown } from '@/components/ui/icons' export function ButtonScrollToBottom({ className, ...props }: ButtonProps) { const [isAtBottom, setIsAtBottom] = React.useState(false) @@ -41,7 +41,7 @@ export function ButtonScrollToBottom({ className, ...props }: ButtonProps) { } {...props} > - + Scroll to bottom ) diff --git a/components/chat-message.tsx b/components/chat-message.tsx index 1de2707..f3c6635 100644 --- a/components/chat-message.tsx +++ b/components/chat-message.tsx @@ -1,12 +1,11 @@ import { Message } from 'ai-connector' -import { User } from 'lucide-react' import remarkGfm from 'remark-gfm' import remarkMath from 'remark-math' import { cn } from '@/lib/utils' import { CodeBlock } from '@/components/ui/codeblock' -import { OpenAI } from '@/components/icons' import { MemoizedReactMarkdown } from '@/components/markdown' +import { IconOpenAI, IconUser } from '@/components/ui/icons' export interface ChatMessageProps { message: Message @@ -23,11 +22,7 @@ export function ChatMessage({ message, ...props }: ChatMessageProps) { : 'bg-primary text-primary-foreground' )} > - {message.role === 'user' ? ( - - ) : ( - - )} + {message.role === 'user' ? : }
stop()} className="bg-background" > - + Stop generating ) : ( @@ -44,7 +44,7 @@ export function ChatPanel({ onClick={() => reload()} className="bg-background" > - + Regenerate response ) diff --git a/components/empty-screen.tsx b/components/empty-screen.tsx index 88a6d29..b2804c4 100644 --- a/components/empty-screen.tsx +++ b/components/empty-screen.tsx @@ -1,9 +1,8 @@ -import { ArrowRight } from 'lucide-react' - import { useChatStore } from '@/lib/hooks/use-chat-store' import { cn } from '@/lib/utils' import { Button } from '@/components/ui/button' import { ExternalLink } from '@/components/external-link' +import { IconArrowRight } from '@/components/ui/icons' const exampleMessages = [ { @@ -47,7 +46,7 @@ export function EmptyScreen({ className }: React.ComponentProps<'div'>) { className="h-auto p-0 text-base" onClick={() => setDefaultMessage(message.message)} > - + {message.heading} ))} diff --git a/components/header.tsx b/components/header.tsx index c3b2d6f..b2ffc03 100644 --- a/components/header.tsx +++ b/components/header.tsx @@ -1,11 +1,12 @@ +import { Suspense } from 'react' + import { auth } from '@/auth' import { cn } from '@/lib/utils' import { buttonVariants } from '@/components/ui/button' -import { GitHub, Separator, Vercel } from '@/components/icons' import { Sidebar } from '@/components/sidebar' import { UserMenu } from '@/components/user-menu' -import { SidebarList } from './sidebar-list' -import { Suspense } from 'react' +import { SidebarList } from '@/components/sidebar-list' +import { IconGitHub, IconSeparator, IconVercel } from '@/components/ui/icons' export async function Header() { const session = await auth() @@ -21,7 +22,7 @@ export async function Header() {
- +
@@ -32,7 +33,7 @@ export async function Header() { rel="noopener noreferrer" className={cn(buttonVariants({ variant: 'outline' }))} > - + GitHub - + Deploy to Vercel Deploy diff --git a/components/icons.tsx b/components/icons.tsx deleted file mode 100644 index b94d72f..0000000 --- a/components/icons.tsx +++ /dev/null @@ -1,160 +0,0 @@ -'use client' - -import * as React from 'react' - -import { cn } from '@/lib/utils' - -export function NextChat({ - className, - inverted, - ...props -}: React.ComponentProps<'svg'> & { inverted?: boolean }) { - const id = React.useId() - - return ( - - - - - - - - - - - - - - - - - - - - - - ) -} - -export function OpenAI({ className, ...props }: React.ComponentProps<'svg'>) { - return ( - - OpenAI icon - - - ) -} - -export function Vercel({ className, ...props }: React.ComponentProps<'svg'>) { - return ( - - - - ) -} - -export function GitHub({ className, ...props }: React.ComponentProps<'svg'>) { - return ( - - GitHub - - - ) -} - -export function Separator({ - className, - ...props -}: React.ComponentProps<'svg'>) { - return ( - - ) -} diff --git a/components/prompt-form.tsx b/components/prompt-form.tsx index e90cca8..c250dcb 100644 --- a/components/prompt-form.tsx +++ b/components/prompt-form.tsx @@ -2,7 +2,6 @@ import * as React from 'react' import Link from 'next/link' -import { CornerDownLeft, Plus } from 'lucide-react' import Textarea from 'react-textarea-autosize' import { useChatStore } from '@/lib/hooks/use-chat-store' @@ -15,6 +14,7 @@ import { TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip' +import { IconArrowElbow, IconPlus } from '@/components/ui/icons' export interface PromptProps { onSubmit: (value: string) => void @@ -60,7 +60,7 @@ export function PromptForm({ onSubmit, isLoading }: PromptProps) { 'absolute left-0 top-4 h-8 w-8 rounded-full bg-background p-0 sm:left-4' )} > - + New Chat @@ -85,7 +85,7 @@ export function PromptForm({ onSubmit, isLoading }: PromptProps) { size="icon" disabled={isLoading || input === ''} > - + Send message diff --git a/components/sidebar-item.tsx b/components/sidebar-item.tsx index 55f55a6..ea0295d 100644 --- a/components/sidebar-item.tsx +++ b/components/sidebar-item.tsx @@ -4,7 +4,6 @@ import * as React from 'react' import { useTransition } from 'react' import Link from 'next/link' import { usePathname, useRouter } from 'next/navigation' -import { Loader2Icon, MessageSquare, Trash2Icon } from 'lucide-react' import { cn } from '@/lib/utils' import { @@ -19,6 +18,7 @@ import { } from '@/components/ui/alert-dialog' import { Button, buttonVariants } from '@/components/ui/button' import { removeChat } from '@/app/actions' +import { IconMessage, IconSpinner, IconTrash } from '@/components/ui/icons' export function SidebarItem({ title, @@ -49,7 +49,7 @@ export function SidebarItem({ isActive && 'bg-accent' )} > - +
setIsOpen(true)} > - + Delete )} @@ -91,9 +91,7 @@ export function SidebarItem({ }) }} > - {isPending && ( - - )} + {isPending && } Delete diff --git a/components/sidebar.tsx b/components/sidebar.tsx index 66d7a27..75554e4 100644 --- a/components/sidebar.tsx +++ b/components/sidebar.tsx @@ -3,7 +3,6 @@ import * as React from 'react' import { signOut } from '@auth/nextjs/client' import { type Session } from '@auth/nextjs/types' -import { Sidebar as SidebarIcon } from 'lucide-react' import { Button } from '@/components/ui/button' import { @@ -14,6 +13,7 @@ import { SheetTrigger } from '@/components/ui/sheet' import { ThemeToggle } from '@/components/theme-toggle' +import { IconSidebar } from '@/components/ui/icons' export interface SidebarProps { session?: Session @@ -25,7 +25,7 @@ export function Sidebar({ session, children }: SidebarProps) { diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx index 56f559d..67d3f1a 100644 --- a/components/theme-toggle.tsx +++ b/components/theme-toggle.tsx @@ -1,10 +1,10 @@ 'use client' import * as React from 'react' -import { Moon, Sun } from 'lucide-react' import { useTheme } from 'next-themes' import { Button } from '@/components/ui/button' +import { IconMoon, IconSun } from '@/components/ui/icons' export function ThemeToggle() { const { setTheme, theme } = useTheme() @@ -21,9 +21,9 @@ export function ThemeToggle() { }} > {!theme ? null : theme === 'dark' ? ( - + ) : ( - + )} Toggle theme diff --git a/components/ui/codeblock.tsx b/components/ui/codeblock.tsx index 525394a..694bd1d 100644 --- a/components/ui/codeblock.tsx +++ b/components/ui/codeblock.tsx @@ -1,11 +1,11 @@ 'use client' import { FC, memo } from 'react' -import { Check, Clipboard, Download } from 'lucide-react' import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' import { coldarkDark } from 'react-syntax-highlighter/dist/cjs/styles/prism' import { useCopyToClipboard } from '@/lib/hooks/use-copy-to-cliipboard' +import { IconCheck, IconCopy, IconDownload } from '@/components/ui/icons' interface Props { language: string @@ -91,7 +91,7 @@ const CodeBlock: FC = memo(({ language, value }) => { className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-white" onClick={() => copyToClipboard(value)} > - {isCopied ? : } + {isCopied ? : } {isCopied ? 'Copied!' : 'Copy code'}
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx index 3abd062..8497985 100644 --- a/components/ui/dialog.tsx +++ b/components/ui/dialog.tsx @@ -2,9 +2,9 @@ import * as React from 'react' import * as DialogPrimitive from '@radix-ui/react-dialog' -import { X } from 'lucide-react' import { cn } from '@/lib/utils' +import { IconClose } from '@/components/ui/icons' const Dialog = DialogPrimitive.Root @@ -54,7 +54,7 @@ const DialogContent = React.forwardRef< > {children} - + Close diff --git a/components/ui/icons.tsx b/components/ui/icons.tsx new file mode 100644 index 0000000..6165381 --- /dev/null +++ b/components/ui/icons.tsx @@ -0,0 +1,420 @@ +'use client' + +import * as React from 'react' + +import { cn } from '@/lib/utils' + +function IconNextChat({ + className, + inverted, + ...props +}: React.ComponentProps<'svg'> & { inverted?: boolean }) { + const id = React.useId() + + return ( + + + + + + + + + + + + + + + + + + + + + + ) +} + +function IconOpenAI({ className, ...props }: React.ComponentProps<'svg'>) { + return ( + + OpenAI icon + + + ) +} + +function IconVercel({ className, ...props }: React.ComponentProps<'svg'>) { + return ( + + + + ) +} + +function IconGitHub({ className, ...props }: React.ComponentProps<'svg'>) { + return ( + + GitHub + + + ) +} + +function IconSeparator({ className, ...props }: React.ComponentProps<'svg'>) { + return ( + + ) +} + +function IconArrowDown({ className, ...props }: React.ComponentProps<'svg'>) { + return ( + + + + ) +} + +function IconArrowRight({ className, ...props }: React.ComponentProps<'svg'>) { + return ( + + + + ) +} + +function IconUser({ className, ...props }: React.ComponentProps<'svg'>) { + return ( + + + + ) +} + +function IconPlus({ className, ...props }: React.ComponentProps<'svg'>) { + return ( + + + + ) +} + +function IconArrowElbow({ className, ...props }: React.ComponentProps<'svg'>) { + return ( + + + + ) +} + +function IconSpinner({ className, ...props }: React.ComponentProps<'svg'>) { + return ( + + + + ) +} + +function IconMessage({ className, ...props }: React.ComponentProps<'svg'>) { + return ( + + + + ) +} + +function IconTrash({ className, ...props }: React.ComponentProps<'svg'>) { + return ( + + + + ) +} + +function IconRefresh({ className, ...props }: React.ComponentProps<'svg'>) { + return ( + + + + ) +} + +function IconStop({ className, ...props }: React.ComponentProps<'svg'>) { + return ( + + + + ) +} + +function IconSidebar({ className, ...props }: React.ComponentProps<'svg'>) { + return ( + + + + ) +} + +function IconMoon({ className, ...props }: React.ComponentProps<'svg'>) { + return ( + + + + ) +} + +function IconSun({ className, ...props }: React.ComponentProps<'svg'>) { + return ( + + + + ) +} + +function IconCopy({ className, ...props }: React.ComponentProps<'svg'>) { + return ( + + + + ) +} + +function IconCheck({ className, ...props }: React.ComponentProps<'svg'>) { + return ( + + + + ) +} + +function IconDownload({ className, ...props }: React.ComponentProps<'svg'>) { + return ( + + + + ) +} + +function IconClose({ className, ...props }: React.ComponentProps<'svg'>) { + return ( + + + + ) +} + +export { + IconNextChat, + IconOpenAI, + IconVercel, + IconGitHub, + IconSeparator, + IconArrowDown, + IconArrowRight, + IconUser, + IconPlus, + IconArrowElbow, + IconSpinner, + IconMessage, + IconTrash, + IconRefresh, + IconStop, + IconSidebar, + IconMoon, + IconSun, + IconCopy, + IconCheck, + IconDownload, + IconClose +} diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx index 655c1f6..6d12ff7 100644 --- a/components/ui/sheet.tsx +++ b/components/ui/sheet.tsx @@ -3,9 +3,9 @@ import * as React from 'react' import * as SheetPrimitive from '@radix-ui/react-dialog' import { cva, type VariantProps } from 'class-variance-authority' -import { X } from 'lucide-react' import { cn } from '@/lib/utils' +import { IconClose } from '@/components/ui/icons' const Sheet = SheetPrimitive.Root @@ -73,7 +73,7 @@ const SheetContent = React.forwardRef< > {children} - + Close diff --git a/components/user-menu.tsx b/components/user-menu.tsx index 8650c1c..280fa3c 100644 --- a/components/user-menu.tsx +++ b/components/user-menu.tsx @@ -3,9 +3,9 @@ import * as React from 'react' import { signIn } from '@auth/nextjs/client' import { type Session } from '@auth/nextjs/types' -import { Loader2Icon } from 'lucide-react' import { Button } from '@/components/ui/button' +import { IconSpinner } from '@/components/ui/icons' export interface UserMenuProps { session?: Session @@ -25,7 +25,7 @@ export function UserMenu({ session }: UserMenuProps) { }} disabled={isLoading} > - {isLoading && } + {isLoading && } Login )