11 | {content}
12 |
13 | );
14 | });
15 |
--------------------------------------------------------------------------------
/utils/debounce.ts:
--------------------------------------------------------------------------------
1 | export function debounce
17 | {children}
18 |
19 | );
20 | });
21 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 | .yarn/install-state.gz
8 |
9 | # testing
10 | /coverage
11 |
12 | # next.js
13 | /.next/
14 | /out/
15 |
16 | # production
17 | /build
18 |
19 | # misc
20 | .DS_Store
21 | *.pem
22 |
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 |
28 | # local env files
29 | .env*
30 | !.env.example
31 |
32 | # vercel
33 | .vercel
34 |
35 | # typescript
36 | *.tsbuildinfo
37 | next-env.d.ts
38 | .env
39 |
--------------------------------------------------------------------------------
/hooks/use-mobile.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | const MOBILE_BREAKPOINT = 768
4 |
5 | export function useIsMobile() {
6 | const [isMobile, setIsMobile] = React.useState
22 | {title && {title} }
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
29 | {!isStreaming ?
31 |
40 |
41 | {/* Main Content */}
42 |
43 | {children}
44 |
45 |
46 |
39 |
41 | )}
42 |
28 | setSelected?.(options.left.value)}>
29 | {options.left.text}
30 |
31 | setSelected?.(options.right.value)}>
32 | {options.right.text}
33 |
34 |
35 | );
36 | });
37 |
38 | interface SliderButtonProps {
39 | selected: boolean;
40 | children: string | JSX.Element | Array
39 | {sanitizeUserMessage(content)}
40 | {imageUrl && (
41 |
56 | );
57 | }
58 |
59 | function sanitizeUserMessage(content: string) {
60 | return content.replace(modificationsRegex, '').trim();
61 | }
--------------------------------------------------------------------------------
/components/chat/ChatIntro.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | import React from 'react';
3 | import { motion } from 'framer-motion';
4 | import { Zap } from 'lucide-react';
5 |
6 | export const ChatIntro: React.FC = () => {
7 | const containerVariants = {
8 | hidden: { opacity: 0 },
9 | visible: {
10 | opacity: 1,
11 | transition: {
12 | staggerChildren: 0.1
13 | }
14 | }
15 | };
16 |
17 | const itemVariants = {
18 | hidden: { y: 20, opacity: 0 },
19 | visible: {
20 | y: 0,
21 | opacity: 1,
22 | transition: {
23 | type: 'spring',
24 | damping: 12,
25 | stiffness: 100
26 | }
27 | }
28 | };
29 |
30 | return (
31 |
42 |
54 | )}
55 |
43 | 
48 |
49 |
50 | {imageName}
51 | {formatBytes(imageSize)}
52 |
53 |
32 |
33 | {/* Hero Content */}
34 |
41 |
45 | Build Full Stack Web Apps 10x Faster
46 |
47 |
48 |
52 | Chat with AI to build web apps. No coding required.
53 |
54 |
55 |
59 |
64 |
65 |
66 | );
67 | };
68 |
69 | export default ChatIntro;
--------------------------------------------------------------------------------
/components/editor/codemirror/indent.ts:
--------------------------------------------------------------------------------
1 | import { indentLess } from '@codemirror/commands';
2 | import { indentUnit } from '@codemirror/language';
3 | import { EditorSelection, EditorState, Line, type ChangeSpec } from '@codemirror/state';
4 | import { EditorView, type KeyBinding } from '@codemirror/view';
5 |
6 | export const indentKeyBinding: KeyBinding = {
7 | key: 'Tab',
8 | run: indentMore,
9 | shift: indentLess,
10 | };
11 |
12 | function indentMore({ state, dispatch }: EditorView) {
13 | if (state.readOnly) {
14 | return false;
15 | }
16 |
17 | dispatch(
18 | state.update(
19 | changeBySelectedLine(state, (from, to, changes) => {
20 | changes.push({ from, to, insert: state.facet(indentUnit) });
21 | }),
22 | { userEvent: 'input.indent' },
23 | ),
24 | );
25 |
26 | return true;
27 | }
28 |
29 | function changeBySelectedLine(
30 | state: EditorState,
31 | cb: (from: number, to: number | undefined, changes: ChangeSpec[], line: Line) => void,
32 | ) {
33 | return state.changeByRange((range) => {
34 | const changes: ChangeSpec[] = [];
35 |
36 | const line = state.doc.lineAt(range.from);
37 |
38 | // just insert single indent unit at the current cursor position
39 | if (range.from === range.to) {
40 | cb(range.from, undefined, changes, line);
41 | }
42 | // handle the case when multiple characters are selected in a single line
43 | else if (range.from < range.to && range.to <= line.to) {
44 | cb(range.from, range.to, changes, line);
45 | } else {
46 | let atLine = -1;
47 |
48 | // handle the case when selection spans multiple lines
49 | for (let pos = range.from; pos <= range.to; ) {
50 | const line = state.doc.lineAt(pos);
51 |
52 | if (line.number > atLine && (range.empty || range.to > line.from)) {
53 | cb(line.from, undefined, changes, line);
54 | atLine = line.number;
55 | }
56 |
57 | pos = line.to + 1;
58 | }
59 | }
60 |
61 | const changeSet = state.changes(changes);
62 |
63 | return {
64 | changes,
65 | range: EditorSelection.range(changeSet.mapPos(range.anchor, 1), changeSet.mapPos(range.head, 1)),
66 | };
67 | });
68 | }
69 |
--------------------------------------------------------------------------------
/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as AccordionPrimitive from "@radix-ui/react-accordion"
5 | import { ChevronDown } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Accordion = AccordionPrimitive.Root
10 |
11 | const AccordionItem = React.forwardRef<
12 | React.ElementRef{children}
53 |
50 | {char}
51 | {hasFakeCaret && (
52 |
57 | )
58 | })
59 | InputOTPSlot.displayName = "InputOTPSlot"
60 |
61 | const InputOTPSeparator = React.forwardRef<
62 | React.ElementRef<"div">,
63 | React.ComponentPropsWithoutRef<"div">
64 | >(({ ...props }, ref) => (
65 |
53 |
54 |
55 | )}
56 |
66 |
68 | ))
69 | InputOTPSeparator.displayName = "InputOTPSeparator"
70 |
71 | export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
72 |
--------------------------------------------------------------------------------
/components/chat/Markdown.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | import { memo, useMemo } from 'react';
3 | import ReactMarkdown, { type Components } from 'react-markdown';
4 | import type { BundledLanguage } from 'shiki';
5 | import { createScopedLogger } from '@/utils/logger';
6 | import { rehypePlugins, remarkPlugins, allowedHTMLElements } from '@/utils/markdown';
7 | import { Artifact } from './Artifact';
8 | import { CodeBlock } from './CodeBlock';
9 |
10 | import styles from './Markdown.module.css';
11 |
12 | const logger = createScopedLogger('MarkdownComponent');
13 |
14 | interface MarkdownProps {
15 | children: string;
16 | html?: boolean;
17 | limitedMarkdown?: boolean;
18 | }
19 |
20 | export const Markdown = memo(({ children, html = false, limitedMarkdown = false }: MarkdownProps) => {
21 | logger.trace('Render');
22 |
23 | const components = useMemo(() => {
24 | return {
25 | div: ({ className, children, node, ...props }) => {
26 | if (className?.includes('__boltnextArtifact__')) {
27 | const messageId = node?.properties.dataMessageId as string;
28 |
29 | if (!messageId) {
30 | logger.error(`Invalid message id ${messageId}`);
31 | }
32 |
33 | return
38 | {children}
39 |
40 | );
41 | },
42 | pre: (props) => {
43 | const { children, node, ...rest } = props;
44 |
45 | const [firstChild] = node?.children ?? [];
46 |
47 | if (
48 | firstChild &&
49 | firstChild.type === 'element' &&
50 | firstChild.tagName === 'code' &&
51 | firstChild.children[0].type === 'text'
52 | ) {
53 | const { className, ...rest } = firstChild.properties;
54 | const [, language = 'plaintext'] = /language-(\w+)/.exec(String(className) || '') ?? [];
55 |
56 | return {children};
60 | },
61 | } satisfies Components;
62 | }, []);
63 |
64 | return (
65 |
27 | {/* Accent Blob */}
28 |
89 | );
90 | };
91 |
92 | export default BeautifulBackground;
--------------------------------------------------------------------------------
/components/workbench/PortDropdown.tsx:
--------------------------------------------------------------------------------
1 | import { memo, useEffect, useRef } from 'react';
2 | import { IconButton } from '@/components/ui/IconButton';
3 | import type { PreviewInfo } from '@/lib/stores/previews';
4 | import { Plug } from '@phosphor-icons/react';
5 |
6 | interface PortDropdownProps {
7 | activePreviewIndex: number;
8 | setActivePreviewIndex: (index: number) => void;
9 | isDropdownOpen: boolean;
10 | setIsDropdownOpen: (value: boolean) => void;
11 | setHasSelectedPreview: (value: boolean) => void;
12 | previews: PreviewInfo[];
13 | }
14 |
15 | export const PortDropdown = memo(
16 | ({
17 | activePreviewIndex,
18 | setActivePreviewIndex,
19 | isDropdownOpen,
20 | setIsDropdownOpen,
21 | setHasSelectedPreview,
22 | previews,
23 | }: PortDropdownProps) => {
24 | const dropdownRef = useRef
52 | setIsDropdownOpen(!isDropdownOpen)} />
53 | {isDropdownOpen && (
54 |
82 | );
83 | },
84 | );
85 |
--------------------------------------------------------------------------------
/components/chat/CodeBlock.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | import { memo, useEffect, useState } from 'react';
3 | import { bundledLanguages, codeToHtml, isSpecialLang, type BundledLanguage, type SpecialLanguage } from 'shiki';
4 | import { cn } from '@/lib/utils';
5 | import { createScopedLogger } from '@/utils/logger';
6 |
7 | import { ClipboardText } from '@phosphor-icons/react';
8 |
9 | const logger = createScopedLogger('CodeBlock');
10 |
11 | interface CodeBlockProps {
12 | className?: string;
13 | code: string;
14 | language?: BundledLanguage | SpecialLanguage;
15 | theme?: 'light-plus' | 'dark-plus';
16 | disableCopy?: boolean;
17 | }
18 |
19 | export const CodeBlock = memo(
20 | ({ className, code, language = 'plaintext', theme = 'dark-plus', disableCopy = false }: CodeBlockProps) => {
21 | const [html, setHTML] = useState
55 |
80 | )}
81 |
56 | Ports
57 |
58 | {sortedPreviews.map((preview) => (
59 | {
63 | setActivePreviewIndex(preview.index);
64 | setIsDropdownOpen(false);
65 | setHasSelectedPreview(true);
66 | }}
67 | >
68 |
75 | {preview.port}
76 |
77 |
78 | ))}
79 |
60 |
86 | );
87 | },
88 | );
89 |
--------------------------------------------------------------------------------
/components/ui/calendar.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import { ChevronLeft, ChevronRight } from "lucide-react"
5 | import { DayPicker } from "react-day-picker"
6 |
7 | import { cn } from "@/lib/utils"
8 | import { buttonVariants } from "@/components/ui/button"
9 |
10 | export type CalendarProps = React.ComponentProps
68 | {!disableCopy && (
69 |
82 | )}
83 |
84 |
85 |
22 | {messages.length > 0
23 | ? messages.map((message, index) => {
24 | const { role, content, data } = message;
25 | const isUserMessage = role === 'user';
26 | const isFirst = index === 0;
27 | const isLast = index === messages.length - 1;
28 |
29 | return (
30 |
58 | );
59 | });
--------------------------------------------------------------------------------
/components/sidebar/nav-main.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { ChevronRight, type LucideIcon } from "lucide-react"
4 | import * as React from "react"
5 | import {
6 | Collapsible,
7 | CollapsibleContent,
8 | CollapsibleTrigger,
9 | } from "@/components/ui/collapsible"
10 | import {
11 | SidebarGroup,
12 | SidebarGroupLabel,
13 | SidebarMenu,
14 | SidebarMenuAction,
15 | SidebarMenuButton,
16 | SidebarMenuItem,
17 | SidebarMenuSub,
18 | SidebarMenuSubButton,
19 | SidebarMenuSubItem,
20 | } from "@/components/ui/sidebar"
21 |
22 | interface NavItem {
23 | title?: string | React.ReactNode;
24 | url?: string;
25 | }
26 |
27 | interface NavMainProps {
28 | items: {
29 | title: string;
30 | url?: string;
31 | icon: LucideIcon;
32 | isActive?: boolean;
33 | items?: (NavItem | React.ReactNode)[];
34 | }[];
35 | }
36 |
37 | export function NavMain({
38 | items,
39 | }: NavMainProps) {
40 | return (
41 |
39 | {isUserMessage && (
40 |
51 | );
52 | })
53 | : null}
54 | {isStreaming && (
55 |
56 | )}
57 |
41 |
42 | BN
44 |
45 |
46 | )}
47 |
48 | {isUserMessage ?
50 |
53 |
82 | );
83 | };
84 |
85 |
--------------------------------------------------------------------------------
/components/editor/codemirror/languages.ts:
--------------------------------------------------------------------------------
1 | import { LanguageDescription } from '@codemirror/language';
2 |
3 | export const supportedLanguages = [
4 | LanguageDescription.of({
5 | name: 'TS',
6 | extensions: ['ts'],
7 | async load() {
8 | return import('@codemirror/lang-javascript').then((module) => module.javascript({ typescript: true }));
9 | },
10 | }),
11 | LanguageDescription.of({
12 | name: 'JS',
13 | extensions: ['js', 'mjs', 'cjs'],
14 | async load() {
15 | return import('@codemirror/lang-javascript').then((module) => module.javascript());
16 | },
17 | }),
18 | LanguageDescription.of({
19 | name: 'TSX',
20 | extensions: ['tsx'],
21 | async load() {
22 | return import('@codemirror/lang-javascript').then((module) => module.javascript({ jsx: true, typescript: true }));
23 | },
24 | }),
25 | LanguageDescription.of({
26 | name: 'JSX',
27 | extensions: ['jsx'],
28 | async load() {
29 | return import('@codemirror/lang-javascript').then((module) => module.javascript({ jsx: true }));
30 | },
31 | }),
32 | LanguageDescription.of({
33 | name: 'HTML',
34 | extensions: ['html'],
35 | async load() {
36 | return import('@codemirror/lang-html').then((module) => module.html());
37 | },
38 | }),
39 | LanguageDescription.of({
40 | name: 'CSS',
41 | extensions: ['css'],
42 | async load() {
43 | return import('@codemirror/lang-css').then((module) => module.css());
44 | },
45 | }),
46 | LanguageDescription.of({
47 | name: 'SASS',
48 | extensions: ['sass'],
49 | async load() {
50 | return import('@codemirror/lang-sass').then((module) => module.sass({ indented: true }));
51 | },
52 | }),
53 | LanguageDescription.of({
54 | name: 'SCSS',
55 | extensions: ['scss'],
56 | async load() {
57 | return import('@codemirror/lang-sass').then((module) => module.sass({ indented: false }));
58 | },
59 | }),
60 | LanguageDescription.of({
61 | name: 'JSON',
62 | extensions: ['json'],
63 | async load() {
64 | return import('@codemirror/lang-json').then((module) => module.json());
65 | },
66 | }),
67 | LanguageDescription.of({
68 | name: 'Markdown',
69 | extensions: ['md'],
70 | async load() {
71 | return import('@codemirror/lang-markdown').then((module) => module.markdown());
72 | },
73 | }),
74 | LanguageDescription.of({
75 | name: 'Wasm',
76 | extensions: ['wat'],
77 | async load() {
78 | return import('@codemirror/lang-wast').then((module) => module.wast());
79 | },
80 | }),
81 | LanguageDescription.of({
82 | name: 'Python',
83 | extensions: ['py'],
84 | async load() {
85 | return import('@codemirror/lang-python').then((module) => module.python());
86 | },
87 | }),
88 | LanguageDescription.of({
89 | name: 'C++',
90 | extensions: ['cpp'],
91 | async load() {
92 | return import('@codemirror/lang-cpp').then((module) => module.cpp());
93 | },
94 | }),
95 | ];
96 |
97 | export async function getLanguage(fileName: string) {
98 | const languageDescription = LanguageDescription.matchFilename(supportedLanguages, fileName);
99 |
100 | if (languageDescription) {
101 | return await languageDescription.load();
102 | }
103 |
104 | return undefined;
105 | }
106 |
--------------------------------------------------------------------------------
/components/ui/table.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | const Table = React.forwardRef<
6 | HTMLTableElement,
7 | React.HTMLAttributesTemplates
54 |
55 | {EXAMPLE_PROMPTS.map((examplePrompt, index) => (
56 |
57 |
58 |
66 |
67 | {examplePrompt.text}
68 | {examplePrompt.description}
69 |
70 |
71 |
77 |
78 |
79 | ))}
80 |
81 |
10 |
15 |
16 | ))
17 | Table.displayName = "Table"
18 |
19 | const TableHeader = React.forwardRef<
20 | HTMLTableSectionElement,
21 | React.HTMLAttributes
59 | {user.name}
60 | {user.email}
61 |
62 |
73 |
74 | UF
76 |
77 |
82 |
78 | {user.name}
79 | {user.email}
80 |
81 |
77 | {isPortDropdownOpen && (
78 |
45 | }
46 | | {
47 | type: ActionType["DISMISS_TOAST"]
48 | toastId?: ToasterToast["id"]
49 | }
50 | | {
51 | type: ActionType["REMOVE_TOAST"]
52 | toastId?: ToasterToast["id"]
53 | }
54 |
55 | interface State {
56 | toasts: ToasterToast[]
57 | }
58 |
59 | const toastTimeouts = new Map>()
60 |
61 | const addToRemoveQueue = (toastId: string) => {
62 | if (toastTimeouts.has(toastId)) {
63 | return
64 | }
65 |
66 | const timeout = setTimeout(() => {
67 | toastTimeouts.delete(toastId)
68 | dispatch({
69 | type: "REMOVE_TOAST",
70 | toastId: toastId,
71 | })
72 | }, TOAST_REMOVE_DELAY)
73 |
74 | toastTimeouts.set(toastId, timeout)
75 | }
76 |
77 | export const reducer = (state: State, action: Action): State => {
78 | switch (action.type) {
79 | case "ADD_TOAST":
80 | return {
81 | ...state,
82 | toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
83 | }
84 |
85 | case "UPDATE_TOAST":
86 | return {
87 | ...state,
88 | toasts: state.toasts.map((t) =>
89 | t.id === action.toast.id ? { ...t, ...action.toast } : t
90 | ),
91 | }
92 |
93 | case "DISMISS_TOAST": {
94 | const { toastId } = action
95 |
96 | // ! Side effects ! - This could be extracted into a dismissToast() action,
97 | // but I'll keep it here for simplicity
98 | if (toastId) {
99 | addToRemoveQueue(toastId)
100 | } else {
101 | state.toasts.forEach((toast) => {
102 | addToRemoveQueue(toast.id)
103 | })
104 | }
105 |
106 | return {
107 | ...state,
108 | toasts: state.toasts.map((t) =>
109 | t.id === toastId || toastId === undefined
110 | ? {
111 | ...t,
112 | open: false,
113 | }
114 | : t
115 | ),
116 | }
117 | }
118 | case "REMOVE_TOAST":
119 | if (action.toastId === undefined) {
120 | return {
121 | ...state,
122 | toasts: [],
123 | }
124 | }
125 | return {
126 | ...state,
127 | toasts: state.toasts.filter((t) => t.id !== action.toastId),
128 | }
129 | }
130 | }
131 |
132 | const listeners: Array<(state: State) => void> = []
133 |
134 | let memoryState: State = { toasts: [] }
135 |
136 | function dispatch(action: Action) {
137 | memoryState = reducer(memoryState, action)
138 | listeners.forEach((listener) => {
139 | listener(memoryState)
140 | })
141 | }
142 |
143 | type Toast = Omit
144 |
145 | function toast({ ...props }: Toast) {
146 | const id = genId()
147 |
148 | const update = (props: ToasterToast) =>
149 | dispatch({
150 | type: "UPDATE_TOAST",
151 | toast: { ...props, id },
152 | })
153 | const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
154 |
155 | dispatch({
156 | type: "ADD_TOAST",
157 | toast: {
158 | ...props,
159 | id,
160 | open: true,
161 | onOpenChange: (open) => {
162 | if (!open) dismiss()
163 | },
164 | },
165 | })
166 |
167 | return {
168 | id: id,
169 | dismiss,
170 | update,
171 | }
172 | }
173 |
174 | function useToast() {
175 | const [state, setState] = React.useState(memoryState)
176 |
177 | React.useEffect(() => {
178 | listeners.push(setState)
179 | return () => {
180 | const index = listeners.indexOf(setState)
181 | if (index > -1) {
182 | listeners.splice(index, 1)
183 | }
184 | }
185 | }, [state])
186 |
187 | return {
188 | ...state,
189 | toast,
190 | dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
191 | }
192 | }
193 |
194 | export { useToast, toast }
195 |
--------------------------------------------------------------------------------
/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SheetPrimitive from "@radix-ui/react-dialog"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 | import { X } from "lucide-react"
7 |
8 | import { cn } from "@/lib/utils"
9 |
10 | const Sheet = SheetPrimitive.Root
11 |
12 | const SheetTrigger = SheetPrimitive.Trigger
13 |
14 | const SheetClose = SheetPrimitive.Close
15 |
16 | const SheetPortal = SheetPrimitive.Portal
17 |
18 | const SheetOverlay = React.forwardRef<
19 | React.ElementRef,
20 | React.ComponentPropsWithoutRef
21 | >(({ className, ...props }, ref) => (
22 | ,
54 | VariantProps {}
55 |
56 | const SheetContent = React.forwardRef<
57 | React.ElementRef,
58 | SheetContentProps
59 | >(({ side = "right", className, children, ...props }, ref) => (
60 |
61 |
67 |
68 |
71 | {children}
72 |
73 |
74 | ))
75 | SheetContent.displayName = SheetPrimitive.Content.displayName
76 |
77 | const SheetHeader = ({
78 | className,
79 | ...props
80 | }: React.HTMLAttributes) => (
81 |
88 | )
89 | SheetHeader.displayName = "SheetHeader"
90 |
91 | const SheetFooter = ({
92 | className,
93 | ...props
94 | }: React.HTMLAttributes) => (
95 |
102 | )
103 | SheetFooter.displayName = "SheetFooter"
104 |
105 | const SheetTitle = React.forwardRef<
106 | React.ElementRef,
107 | React.ComponentPropsWithoutRef
108 | >(({ className, ...props }, ref) => (
109 | ,
119 | React.ComponentPropsWithoutRef
120 | >(({ className, ...props }, ref) => (
121 |
setIsPortDropdownOpen(false)} />
79 | )}
80 |
124 | );
125 | });
126 |
--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | body {
6 | font-family: Arial, Helvetica, sans-serif;
7 | }
8 |
9 | .font-paytone {
10 | font-family: 'Paytone One', sans-serif;
11 | }
12 |
13 | .hide-scrollbar {
14 | overflow: auto; /* or overflow-y: auto for vertical scrolling only */
15 | scrollbar-width: none; /* Firefox */
16 | -ms-overflow-style: none; /* IE and Edge */
17 | }
18 |
19 | .hide-scrollbar::-webkit-scrollbar {
20 | display: none; /* Chrome, Safari, and Opera */
21 | }
22 |
23 | .gradBorder {
24 | position: relative; /* the thickness of the border */
25 | }
26 |
27 | .gradBorder::before {
28 | content: '';
29 | position: absolute;
30 | z-index: -1;
31 | inset: 0;
32 | border-radius: 0.65rem; /* Equivalent to rounded-lg */
33 | padding: 0.8px;
34 | background: linear-gradient(to bottom right,
35 | hsl(var(--primary)) 10%,
36 | hsl(var(--accent)) 15%,
37 | transparent 25%,
38 | transparent 100%
39 | );
40 | transition: transform 0.7s linear;
41 | mask:
42 | linear-gradient(#fff 0 0) content-box,
43 | linear-gradient(#fff 0 0);
44 | -webkit-mask-composite: xor;
45 | mask-composite: exclude;
46 | }
47 |
48 | @layer utilities {
49 | .text-balance {
50 | text-wrap: balance;
51 | }
52 |
53 | .glass {
54 | background-color: rgba(255, 255, 255, 0.05);
55 | backdrop-filter: blur(4px);
56 | }
57 | }
58 |
59 | @layer base {
60 | :root {
61 | --background: 74 0% 100%;
62 | --foreground: 74 0% 10%;
63 | --card: 74 0% 100%;
64 | --card-foreground: 74 0% 15%;
65 | --popover: 74 0% 100%;
66 | --popover-foreground: 74 95% 10%;
67 | --primary: 74 100% 53%;
68 | --primary-foreground: 0 0% 100%;
69 | --secondary: 74 10% 90%;
70 | --secondary-foreground: 0 0% 0%;
71 | --muted: 74 0% 10%;
72 | --muted-foreground: 74 0% 40%;
73 | --accent: 36 10% 90%;
74 | --accent-foreground: 74 0% 15%;
75 | --destructive: 0 50% 50%;
76 | --destructive-foreground: 74 0% 100%;
77 | --border: 74 20% 82%;
78 | --input: 74 20% 50%;
79 | --ring: 74 100% 53%;
80 | --chart-1: 12 76% 61%;
81 | --chart-2: 173 58% 39%;
82 | --chart-3: 197 37% 24%;
83 | --chart-4: 43 74% 66%;
84 | --chart-5: 27 87% 67%;
85 | --radius: 0.5rem;
86 | --sidebar-background: 0 0% 98%;
87 | --sidebar-foreground: 240 5.3% 26.1%;
88 | --sidebar-primary: 240 5.9% 10%;
89 | --sidebar-primary-foreground: 0 0% 98%;
90 | --sidebar-accent: 240 4.8% 95.9%;
91 | --sidebar-accent-foreground: 240 5.9% 10%;
92 | --sidebar-border: 220 13% 91%;
93 | --sidebar-ring: 217.2 91.2% 59.8%;
94 |
95 | /* constraints */
96 | --header-height: 54px;
97 | --chat-max-width: 32rem;
98 | --chat-min-width: 545px;
99 | --workbench-width: min(calc(100% - var(--chat-min-width)), 1536px);
100 | --workbench-inner-width: var(--workbench-width);
101 | --workbench-left: calc(100% - var(--workbench-width));
102 | }
103 | .dark {
104 | --background: 240 5.9% 10%;
105 | --foreground: 297 0% 100%;
106 | --card: 297 0% 10%;
107 | --card-foreground: 297 0% 100%;
108 | --popover: 297 10% 5%;
109 | --popover-foreground: 297 0% 100%;
110 | --primary: 297 100% 65%;
111 | --primary-foreground: 0 0% 0%;
112 | --secondary: 297 10% 20%;
113 | --secondary-foreground: 0 0% 100%;
114 | --muted: 292 0% 45.38%;
115 | --muted-foreground: 292 0% 65.38%;
116 | --accent: 292 100% 83.55%;
117 | --accent-foreground: 292 1.79% 9.82%;
118 | --destructive: 0 50% 50%;
119 | --destructive-foreground: 297 0% 100%;
120 | --border: 292 0% 25.38%;
121 | --input: 297 20% 50%;
122 | --ring: 297 100% 65%;
123 | --radius: 0.5rem;
124 | --chart-1: 220 70% 50%;
125 | --chart-2: 160 60% 45%;
126 | --chart-3: 30 80% 55%;
127 | --chart-4: 280 65% 60%;
128 | --chart-5: 340 75% 55%;
129 | --sidebar-background: 240 5.9% 10%;
130 | --sidebar-foreground: 240 4.8% 95.9%;
131 | --sidebar-primary: 157 100% 68%;
132 | --sidebar-primary-foreground: 0 0% 0%;
133 | --sidebar-accent: 292 100% 83.55%;
134 | --sidebar-accent-foreground: 292 1.79% 9.82%;
135 | --sidebar-border: 240 3.7% 15.9%;
136 | --sidebar-ring: 217.2 91.2% 59.8%;
137 |
138 | --header-height: 54px;
139 | --chat-max-width: 32rem;
140 | --chat-min-width: 545px;
141 | --workbench-width: min(calc(100% - var(--chat-min-width)));
142 | --workbench-inner-width: var(--workbench-width);
143 | --workbench-left: calc(100% - var(--workbench-width));
144 | }
145 | }
146 |
147 | @layer base {
148 | * {
149 | @apply border-border;
150 | }
151 | body {
152 | @apply bg-background text-foreground;
153 | }
154 |
155 | }
156 |
--------------------------------------------------------------------------------
/hooks/use-toast.ts:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | // Inspired by react-hot-toast library
4 | import * as React from "react"
5 |
6 | import type {
7 | ToastActionElement,
8 | ToastProps,
9 | } from "@/components/ui/toast"
10 |
11 | const TOAST_LIMIT = 1
12 | const TOAST_REMOVE_DELAY = 1000000
13 |
14 | type ToasterToast = ToastProps & {
15 | id: string
16 | title?: React.ReactNode
17 | description?: React.ReactNode
18 | action?: ToastActionElement
19 | }
20 |
21 | const actionTypes = {
22 | ADD_TOAST: "ADD_TOAST",
23 | UPDATE_TOAST: "UPDATE_TOAST",
24 | DISMISS_TOAST: "DISMISS_TOAST",
25 | REMOVE_TOAST: "REMOVE_TOAST",
26 | } as const
27 |
28 | let count = 0
29 |
30 | function genId() {
31 | count = (count + 1) % Number.MAX_SAFE_INTEGER
32 | return count.toString()
33 | }
34 |
35 | type ActionType = typeof actionTypes
36 |
37 | type Action =
38 | | {
39 | type: ActionType["ADD_TOAST"]
40 | toast: ToasterToast
41 | }
42 | | {
43 | type: ActionType["UPDATE_TOAST"]
44 | toast: Partial
81 | (hasSelectedPreview.current = value)}
111 | setIsDropdownOpen={setIsPortDropdownOpen}
112 | previews={previews}
113 | />
114 | )}
115 |
116 |
86 | {
92 | setUrl(event.target.value);
93 | }}
94 | onKeyDown={(event) => {
95 | if (event.key === 'Enter' && validateUrl(url)) {
96 | setIframeUrl(url);
97 |
98 | if (inputRef.current) {
99 | inputRef.current.blur();
100 | }
101 | }
102 | }}
103 | />
104 |
105 | {previews.length > 1 && (
106 |
117 | {activePreview ? (
118 |
119 | ) : (
120 |
123 | No preview available
121 | )}
122 |