diff --git a/examples/ui-components/shadcn/popover-dialog/src/App.tsx b/examples/ui-components/shadcn/popover-dialog/src/App.tsx index d945ea0a..d8ea1831 100644 --- a/examples/ui-components/shadcn/popover-dialog/src/App.tsx +++ b/examples/ui-components/shadcn/popover-dialog/src/App.tsx @@ -1,215 +1,227 @@ -import {ChatTrigger} from '@/components/ui/chatTrigger.tsx'; -import {useState} from 'react'; -import {useTheme} from '@/components/theme-provider'; -import {Button} from '@/components/ui/button'; +import { ChatTrigger } from "@/components/ui/chatTrigger.tsx"; +import { useState } from "react"; +import { useTheme } from "@/components/theme-provider"; +import { Button } from "@/components/ui/button"; import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, -} from '@/components/ui/dropdown-menu'; -import {Avatar, AvatarFallback, AvatarImage} from '@/components/ui/avatar'; -import {Check, Moon, Sun, Monitor} from 'lucide-react'; -import {conversation} from '@/data/history'; -import {models} from '@/data/models'; -import {AiChat} from '@nlux/react'; -import '@nlux/themes/nova.css'; -import './App.css'; -import {RadioGroup, RadioGroupItem} from '@/components/ui/radio-group'; -import {Label} from '@/components/ui/label'; -import {Popover,PopoverAnchor, PopoverContent} from './components/ui/popover'; -import {Drawer, DrawerContent, DrawerTrigger} from '@/components/ui/drawer'; -import {Dialog, DialogContent, DialogTrigger} from '@/components/ui/dialog'; + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { Check, Moon, Sun, Monitor } from "lucide-react"; +import { conversation } from "@/data/history"; +import { models } from "@/data/models"; +import { AiChat } from "@nlux/react"; +import "@nlux/themes/nova.css"; +import "./App.css"; +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; +import { Label } from "@/components/ui/label"; +import { + Popover, + PopoverAnchor, + PopoverContent, +} from "./components/ui/popover"; +import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"; +import { Sheet, SheetContent, SheetTrigger } from "./components/ui/sheet"; export function App() { - const {setTheme, theme} = useTheme(); - const [selectedModelIndex, setSelectedModelIndex] = useState(0); - const [mode, setMode] = useState<'drawer' | 'popover' | 'dialog'>('drawer'); - const [isChatOpen, setIsChatOpen] = useState(false); + const { setTheme, theme } = useTheme(); + const [selectedModelIndex, setSelectedModelIndex] = useState(0); + const [mode, setMode] = useState<"drawer" | "popover" | "dialog">("drawer"); + const [isChatOpen, setIsChatOpen] = useState(false); - const chatComponent = ( - - ); + const chatComponent = ( + + ); - return ( -
- -
-
-
-
-
- - - - {models[selectedModelIndex].modelName} - - - {models.map((val, index) => ( - setSelectedModelIndex(index)} - > -
- -
+ return ( +
+ +
+
+
+ +
+ + + + {models[selectedModelIndex].modelName} + + + {models.map((val, index) => ( + setSelectedModelIndex(index)} + > +
+ +

{val.modelName}

- {index === selectedModelIndex && } + {index === selectedModelIndex && } -

{val.description}

-
-
- - ))} - - -
- -
- - - - - - setTheme('light')}> - - Light - - setTheme('dark')}> - - Dark - - setTheme('auto')}> - - System - - - -
-
-
-

- How would you like to display the chat interface?
- Choose from the following options: -

- setMode(newValue as 'drawer' | 'popover' | 'dialog')} - > -
- - -
-
- - +

{val.description}

+
-
- - -
- -

- Click the button to open the chat interface. -

-
- {mode === 'popover' && ( - setIsChatOpen(false)} - > - - - - - {chatComponent} - - - )} - {mode === 'drawer' && ( - setIsChatOpen(false)}> - - - - -
- {chatComponent} -
- - - )} - {mode === 'dialog' && ( - !open && setIsChatOpen(false)} - > - - - - {chatComponent} - - )} - + + ))} + + +
+ +
+ + + + + + setTheme("light")}> + + Light + + setTheme("dark")}> + + Dark + + setTheme("auto")}> + + System + + + +
+
+
+

+ How would you like to display the chat interface? +
+ Choose from the following options: +

+ + setMode(newValue as "drawer" | "popover" | "dialog") + } + > +
+ + +
+
+ + +
+
+ + +
+ +

Click the button to open the chat interface.

+
+ {mode === "popover" && ( +
+ setIsChatOpen(false)} + > + + + + + {chatComponent} + +
-
- ); + )} + {mode === "drawer" && ( + !open && setIsChatOpen(false)}> + + + + +
{chatComponent}
+ + + )} + {mode === "dialog" && ( + !open && setIsChatOpen(false)} + > + + + + {chatComponent} + + )} + +
+ + ); } export default App; diff --git a/examples/ui-components/shadcn/popover-dialog/src/components/ui/chatTrigger.tsx b/examples/ui-components/shadcn/popover-dialog/src/components/ui/chatTrigger.tsx index 37edcd46..68471859 100644 --- a/examples/ui-components/shadcn/popover-dialog/src/components/ui/chatTrigger.tsx +++ b/examples/ui-components/shadcn/popover-dialog/src/components/ui/chatTrigger.tsx @@ -1,22 +1,29 @@ -import {Button} from '@/components/ui/button.tsx'; -import {ChatBubbleIcon} from '@radix-ui/react-icons'; -import {ChevronDown} from 'lucide-react'; +import { Button } from "@/components/ui/button.tsx"; +import { ChatBubbleIcon } from "@radix-ui/react-icons"; +import { ChevronDown } from "lucide-react"; -export const ChatTrigger = ({ pos, mode, isChatOpen, setIsChatOpen } : { - pos: "bottom" | "center", - mode: "popover" | "drawer" | "dialog", - isChatOpen: boolean, - setIsChatOpen: (val: boolean) => void +export const ChatTrigger = ({ + pos, + mode, + isChatOpen, + setIsChatOpen, +}: { + pos: "bottom" | "center"; + mode: "popover" | "drawer" | "dialog"; + isChatOpen: boolean; + setIsChatOpen: (val: boolean) => void; }) => ( - + );