diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx index f8ec41e..8ee7fd6 100644 --- a/app/components/chat/BaseChat.tsx +++ b/app/components/chat/BaseChat.tsx @@ -5,6 +5,7 @@ import styles from './BaseChat.module.scss'; import FilePreview from './FilePreview'; import { Messages } from './Messages.client'; import { SendButton } from './SendButton.client'; +import StarterTemplates from './StarterTemplates'; import { Menu } from '~/components/sidebar/Menu.client'; import { IconButton } from '~/components/ui/IconButton'; import { Workbench } from '~/components/workbench/Workbench.client'; @@ -245,6 +246,7 @@ export const BaseChat = React.forwardRef( ); })} + )} diff --git a/app/components/chat/StarterTemplates.tsx b/app/components/chat/StarterTemplates.tsx new file mode 100644 index 0000000..bac7424 --- /dev/null +++ b/app/components/chat/StarterTemplates.tsx @@ -0,0 +1,40 @@ +import { memo } from 'react'; +import type { Template } from '~/types/template'; +import { STARTER_TEMPLATES } from '~/utils/constants'; + +interface FrameworkLinkProps { + template: Template; +} + +const FrameworkLink = memo(({ template }) => ( + + {template.label} + +)); + +const StarterTemplates = memo(() => { + return ( +
+ or start a blank app with your favorite stack +
+
+ {STARTER_TEMPLATES.map((template) => ( + + ))} +
+
+
+ ); +}); + +export default StarterTemplates; \ No newline at end of file diff --git a/app/components/git/GitUrlImport.client.tsx b/app/components/git/GitUrlImport.client.tsx index 1321bc2..337d861 100644 --- a/app/components/git/GitUrlImport.client.tsx +++ b/app/components/git/GitUrlImport.client.tsx @@ -6,7 +6,7 @@ import { ClientOnly } from 'remix-utils/client-only'; import { BaseChat } from '~/components/chat/BaseChat'; import { Chat } from '~/components/chat/Chat.client'; import { useGit } from '~/lib/hooks/useGit'; -import { useChatHistory } from '~/lib/persistence'; +import { useChatHistory, chatId } from '~/lib/persistence'; import { createCommandsMessage, detectProjectCommands } from '~/utils/projectCommands'; const IGNORE_PATTERNS = [ @@ -37,6 +37,10 @@ interface GitUrlImportProps { initialUrl?: string; } +function navigateChat(nextId: string) { + window.location.href = `/chat/${nextId}`; +} + export function GitUrlImport({ initialUrl }: GitUrlImportProps) { const [searchParams] = useSearchParams(); const { ready: historyReady, importChat } = useChatHistory(); @@ -97,6 +101,12 @@ ${file.content} } await importChat(`Git Project:${repoUrl.split('/').slice(-1)[0]}`, messages); + + // Wait for the chat ID to be set + const id = chatId.get(); + if (id) { + navigateChat(id); + } } } }; diff --git a/app/types/template.ts b/app/types/template.ts new file mode 100644 index 0000000..93928c7 --- /dev/null +++ b/app/types/template.ts @@ -0,0 +1,8 @@ +export interface Template { + name: string; + label: string; + description: string; + githubRepo: string; + tags?: string[]; + icon?: string; +} \ No newline at end of file diff --git a/app/utils/constants.ts b/app/utils/constants.ts index 842ca54..70ec1e3 100644 --- a/app/utils/constants.ts +++ b/app/utils/constants.ts @@ -1,3 +1,96 @@ export const WORK_DIR_NAME = 'project'; export const WORK_DIR = `/home/${WORK_DIR_NAME}`; export const MODIFICATIONS_TAG_NAME = 'bolt_file_modifications'; + +import type { Template } from '~/types/template'; + +export const STARTER_TEMPLATES: Template[] = [ + { + name: 'bolt-astro-basic', + label: 'Astro Basic', + description: 'Lightweight Astro starter template for building fast static websites', + githubRepo: 'thecodacus/bolt-astro-basic-template', + tags: ['astro', 'blog', 'performance'], + icon: '/icons/astro.svg', + }, + { + name: 'bolt-nextjs-shadcn', + label: 'Next.js with shadcn/ui', + description: 'Next.js starter fullstack template integrated with shadcn/ui components and styling system', + githubRepo: 'thecodacus/bolt-nextjs-shadcn-template', + tags: ['nextjs', 'react', 'typescript', 'shadcn', 'tailwind'], + icon: '/icons/nextjs.svg', + }, + { + name: 'bolt-qwik-ts', + label: 'Qwik TypeScript', + description: 'Qwik framework starter with TypeScript for building resumable applications', + githubRepo: 'thecodacus/bolt-qwik-ts-template', + tags: ['qwik', 'typescript', 'performance', 'resumable'], + icon: '/icons/qwik.svg', + }, + { + name: 'bolt-remix-ts', + label: 'Remix TypeScript', + description: 'Remix framework starter with TypeScript for full-stack web applications', + githubRepo: 'thecodacus/bolt-remix-ts-template', + tags: ['remix', 'typescript', 'fullstack', 'react'], + icon: '/icons/remix.svg', + }, + { + name: 'bolt-slidev', + label: 'Slidev Presentation', + description: 'Slidev starter template for creating developer-friendly presentations using Markdown', + githubRepo: 'thecodacus/bolt-slidev-template', + tags: ['slidev', 'presentation', 'markdown'], + icon: '/icons/slidev.svg', + }, + { + name: 'bolt-sveltekit', + label: 'SvelteKit', + description: 'SvelteKit starter template for building fast, efficient web applications', + githubRepo: 'bolt-sveltekit-template', + tags: ['svelte', 'sveltekit', 'typescript'], + icon: '/icons/svelte.svg', + }, + { + name: 'vanilla-vite', + label: 'Vanilla + Vite', + description: 'Minimal Vite starter template for vanilla JavaScript projects', + githubRepo: 'thecodacus/vanilla-vite-template', + tags: ['vite', 'vanilla-js', 'minimal'], + icon: '/icons/vite.svg', + }, + { + name: 'bolt-vite-react', + label: 'React + Vite + typescript', + description: 'React starter template powered by Vite for fast development experience', + githubRepo: 'thecodacus/bolt-vite-react-ts-template', + tags: ['react', 'vite', 'frontend'], + icon: '/icons/react.svg', + }, + { + name: 'bolt-vite-ts', + label: 'Vite + TypeScript', + description: 'Vite starter template with TypeScript configuration for type-safe development', + githubRepo: 'thecodacus/bolt-vite-ts-template', + tags: ['vite', 'typescript', 'minimal'], + icon: '/icons/typescript.svg', + }, + { + name: 'bolt-vue', + label: 'Vue.js', + description: 'Vue.js starter template with modern tooling and best practices', + githubRepo: 'thecodacus/bolt-vue-template', + tags: ['vue', 'typescript', 'frontend'], + icon: '/icons/vue.svg', + }, + { + name: 'bolt-angular', + label: 'Angular Starter', + description: 'A modern Angular starter template with TypeScript support and best practices configuration', + githubRepo: 'thecodacus/bolt-angular-template', + tags: ['angular', 'typescript', 'frontend', 'spa'], + icon: '/icons/angular.svg', + }, +];