25 | window.open(provider?.getApiKeyLink)} title="Edit API Key">
59 | {provider?.labelForGetApiKey || 'Get API Key'}
60 |
61 |
62 | )}
63 |
64 | )}
65 |
66 | );
67 | };
68 |
--------------------------------------------------------------------------------
/app/components/chat/AssistantMessage.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import { Markdown } from './Markdown';
3 | import type { JSONValue } from 'ai';
4 |
5 | interface AssistantMessageProps {
6 | content: string;
7 | annotations?: JSONValue[];
8 | }
9 |
10 | export const AssistantMessage = memo(({ content, annotations }: AssistantMessageProps) => {
11 | const filteredAnnotations = (annotations?.filter(
12 | (annotation: JSONValue) => annotation && typeof annotation === 'object' && Object.keys(annotation).includes('type'),
13 | ) || []) as { type: string; value: any }[];
14 |
15 | const usage: {
16 | completionTokens: number;
17 | promptTokens: number;
18 | totalTokens: number;
19 | } = filteredAnnotations.find((annotation) => annotation.type === 'usage')?.value;
20 |
21 | return (
22 |
26 | {provider?.name} API Key:
27 | {!isEditing && (
28 |
38 |
39 | {isEditing ? (
40 |
29 |
30 | {apiKey ? '••••••••' : 'Not set (will still work if set in .env file)'}
31 |
32 | setIsEditing(true)} title="Edit API Key">
33 |
34 |
35 |
36 | )}
37 |
41 | setTempKey(e.target.value)}
46 | className="flex-1 px-2 py-1 text-xs lg:text-sm rounded border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus"
47 | />
48 |
49 |
50 |
51 | setIsEditing(false)} title="Cancel">
52 |
53 |
54 |
55 | ) : (
56 | <>
57 | {provider?.getApiKeyLink && (
58 |
23 | {usage && (
24 | {content}
29 |
30 | );
31 | });
32 |
--------------------------------------------------------------------------------
/app/components/chat/BaseChat.module.scss:
--------------------------------------------------------------------------------
1 | .BaseChat {
2 | &[data-chat-visible='false'] {
3 | --workbench-inner-width: 100%;
4 | --workbench-left: 0;
5 |
6 | .Chat {
7 | --at-apply: bolt-ease-cubic-bezier;
8 | transition-property: transform, opacity;
9 | transition-duration: 0.3s;
10 | will-change: transform, opacity;
11 | transform: translateX(-50%);
12 | opacity: 0;
13 | }
14 | }
15 | }
16 |
17 | .Chat {
18 | opacity: 1;
19 | }
20 |
21 | .PromptEffectContainer {
22 | --prompt-container-offset: 50px;
23 | --prompt-line-stroke-width: 1px;
24 | position: absolute;
25 | pointer-events: none;
26 | inset: calc(var(--prompt-container-offset) / -2);
27 | width: calc(100% + var(--prompt-container-offset));
28 | height: calc(100% + var(--prompt-container-offset));
29 | }
30 |
31 | .PromptEffectLine {
32 | width: calc(100% - var(--prompt-container-offset) + var(--prompt-line-stroke-width));
33 | height: calc(100% - var(--prompt-container-offset) + var(--prompt-line-stroke-width));
34 | x: calc(var(--prompt-container-offset) / 2 - var(--prompt-line-stroke-width) / 2);
35 | y: calc(var(--prompt-container-offset) / 2 - var(--prompt-line-stroke-width) / 2);
36 | rx: calc(8px - var(--prompt-line-stroke-width));
37 | fill: transparent;
38 | stroke-width: var(--prompt-line-stroke-width);
39 | stroke: url(#line-gradient);
40 | stroke-dasharray: 35px 65px;
41 | stroke-dashoffset: 10;
42 | }
43 |
44 | .PromptShine {
45 | fill: url(#shine-gradient);
46 | mix-blend-mode: overlay;
47 | }
48 |
--------------------------------------------------------------------------------
/app/components/chat/CodeBlock.module.scss:
--------------------------------------------------------------------------------
1 | .CopyButtonContainer {
2 | button:before {
3 | content: 'Copied';
4 | font-size: 12px;
5 | position: absolute;
6 | left: -53px;
7 | padding: 2px 6px;
8 | height: 30px;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/app/components/chat/CodeBlock.tsx:
--------------------------------------------------------------------------------
1 | import { memo, useEffect, useState } from 'react';
2 | import { bundledLanguages, codeToHtml, isSpecialLang, type BundledLanguage, type SpecialLanguage } from 'shiki';
3 | import { classNames } from '~/utils/classNames';
4 | import { createScopedLogger } from '~/utils/logger';
5 |
6 | import styles from './CodeBlock.module.scss';
7 |
8 | const logger = createScopedLogger('CodeBlock');
9 |
10 | interface CodeBlockProps {
11 | className?: string;
12 | code: string;
13 | language?: BundledLanguage | SpecialLanguage;
14 | theme?: 'light-plus' | 'dark-plus';
15 | disableCopy?: boolean;
16 | }
17 |
18 | export const CodeBlock = memo(
19 | ({ className, code, language = 'plaintext', theme = 'dark-plus', disableCopy = false }: CodeBlockProps) => {
20 | const [html, setHTML] = useState
25 | Tokens: {usage.totalTokens} (prompt: {usage.promptTokens}, completion: {usage.completionTokens})
26 |
27 | )}
28 |
53 |
80 | );
81 | },
82 | );
83 |
--------------------------------------------------------------------------------
/app/components/chat/ExamplePrompts.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const EXAMPLE_PROMPTS = [
4 | { text: 'Build a todo app in React using Tailwind' },
5 | { text: 'Build a simple blog using Astro' },
6 | { text: 'Create a cookie consent form using Material UI' },
7 | { text: 'Make a space invaders game' },
8 | { text: 'Make a Tic Tac Toe game in html, css and js only' },
9 | ];
10 |
11 | export function ExamplePrompts(sendMessage?: { (event: React.UIEvent, messageInput?: string): void | undefined }) {
12 | return (
13 |
62 | {!disableCopy && (
63 |
76 | )}
77 |
78 |
79 |
14 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/app/components/chat/FilePreview.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface FilePreviewProps {
4 | files: File[];
5 | imageDataList: string[];
6 | onRemove: (index: number) => void;
7 | }
8 |
9 | const FilePreview: React.FC
20 | {EXAMPLE_PROMPTS.map((examplePrompt, index: number) => {
21 | return (
22 |
31 | );
32 | })}
33 |
34 |
16 | {files.map((file, index) => (
17 |
32 | );
33 | };
34 |
35 | export default FilePreview;
36 |
--------------------------------------------------------------------------------
/app/components/chat/Markdown.spec.ts:
--------------------------------------------------------------------------------
1 | import { describe, expect, it } from 'vitest';
2 | import { stripCodeFenceFromArtifact } from './Markdown';
3 |
4 | describe('stripCodeFenceFromArtifact', () => {
5 | it('should remove code fences around artifact element', () => {
6 | const input = "```xml\n\n```";
7 | const expected = "\n\n";
8 | expect(stripCodeFenceFromArtifact(input)).toBe(expected);
9 | });
10 |
11 | it('should handle code fence with language specification', () => {
12 | const input = "```typescript\n\n```";
13 | const expected = "\n\n";
14 | expect(stripCodeFenceFromArtifact(input)).toBe(expected);
15 | });
16 |
17 | it('should not modify content without artifacts', () => {
18 | const input = '```\nregular code block\n```';
19 | expect(stripCodeFenceFromArtifact(input)).toBe(input);
20 | });
21 |
22 | it('should handle empty input', () => {
23 | expect(stripCodeFenceFromArtifact('')).toBe('');
24 | });
25 |
26 | it('should handle artifact without code fences', () => {
27 | const input = "";
28 | expect(stripCodeFenceFromArtifact(input)).toBe(input);
29 | });
30 |
31 | it('should handle multiple artifacts but only remove fences around them', () => {
32 | const input = [
33 | 'Some text',
34 | '```typescript',
35 | "",
36 | '```',
37 | '```',
38 | 'regular code',
39 | '```',
40 | ].join('\n');
41 |
42 | const expected = ['Some text', '', "", '', '```', 'regular code', '```'].join(
43 | '\n',
44 | );
45 |
46 | expect(stripCodeFenceFromArtifact(input)).toBe(expected);
47 | });
48 | });
49 |
--------------------------------------------------------------------------------
/app/components/chat/ScreenshotStateManager.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 |
3 | interface ScreenshotStateManagerProps {
4 | setUploadedFiles?: (files: File[]) => void;
5 | setImageDataList?: (dataList: string[]) => void;
6 | uploadedFiles: File[];
7 | imageDataList: string[];
8 | }
9 |
10 | export const ScreenshotStateManager = ({
11 | setUploadedFiles,
12 | setImageDataList,
13 | uploadedFiles,
14 | imageDataList,
15 | }: ScreenshotStateManagerProps) => {
16 | useEffect(() => {
17 | if (setUploadedFiles && setImageDataList) {
18 | (window as any).__BOLT_SET_UPLOADED_FILES__ = setUploadedFiles;
19 | (window as any).__BOLT_SET_IMAGE_DATA_LIST__ = setImageDataList;
20 | (window as any).__BOLT_UPLOADED_FILES__ = uploadedFiles;
21 | (window as any).__BOLT_IMAGE_DATA_LIST__ = imageDataList;
22 | }
23 |
24 | return () => {
25 | delete (window as any).__BOLT_SET_UPLOADED_FILES__;
26 | delete (window as any).__BOLT_SET_IMAGE_DATA_LIST__;
27 | delete (window as any).__BOLT_UPLOADED_FILES__;
28 | delete (window as any).__BOLT_IMAGE_DATA_LIST__;
29 | };
30 | }, [setUploadedFiles, setImageDataList, uploadedFiles, imageDataList]);
31 |
32 | return null;
33 | };
34 |
--------------------------------------------------------------------------------
/app/components/chat/SendButton.client.tsx:
--------------------------------------------------------------------------------
1 | import { AnimatePresence, cubicBezier, motion } from 'framer-motion';
2 |
3 | interface SendButtonProps {
4 | show: boolean;
5 | isStreaming?: boolean;
6 | disabled?: boolean;
7 | onClick?: (event: React.MouseEvent
18 | {imageDataList[index] && (
19 |
30 | ))}
31 |
20 | 
21 |
27 |
28 | )}
29 |
33 | {!isStreaming ? : }
34 |
35 |
25 | or start a blank app with your favorite stack
26 |
34 | );
35 | };
36 |
37 | export default StarterTemplates;
38 |
--------------------------------------------------------------------------------
/app/components/chat/UserMessage.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * @ts-nocheck
3 | * Preventing TS checks with files presented in the video for a better presentation.
4 | */
5 | import { MODEL_REGEX, PROVIDER_REGEX } from '~/utils/constants';
6 | import { Markdown } from './Markdown';
7 |
8 | interface UserMessageProps {
9 | content: string | Array<{ type: string; text?: string; image?: string }>;
10 | }
11 |
12 | export function UserMessage({ content }: UserMessageProps) {
13 | if (Array.isArray(content)) {
14 | const textItem = content.find((item) => item.type === 'text');
15 | const textContent = stripMetadata(textItem?.text || '');
16 | const images = content.filter((item) => item.type === 'image' && item.image);
17 |
18 | return (
19 |
27 |
33 |
28 | {STARTER_TEMPLATES.map((template) => (
29 |
32 |
20 |
33 | );
34 | }
35 |
36 | const textContent = stripMetadata(content);
37 |
38 | return (
39 |
21 | {textContent && {textContent} }
22 | {images.map((item, index) => (
23 | 
30 | ))}
31 |
32 |
40 | {textContent}
41 |
42 | );
43 | }
44 |
45 | function stripMetadata(content: string) {
46 | return content.replace(MODEL_REGEX, '').replace(PROVIDER_REGEX, '');
47 | }
48 |
--------------------------------------------------------------------------------
/app/components/chat/chatExportAndImport/ExportChatButton.tsx:
--------------------------------------------------------------------------------
1 | import WithTooltip from '~/components/ui/Tooltip';
2 | import { IconButton } from '~/components/ui/IconButton';
3 | import React from 'react';
4 |
5 | export const ExportChatButton = ({ exportChat }: { exportChat?: () => void }) => {
6 | return (
7 |
4 | File format cannot be displayed.
5 |
6 | );
7 | }
8 |
--------------------------------------------------------------------------------
/app/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 |
--------------------------------------------------------------------------------
/app/components/header/Header.tsx:
--------------------------------------------------------------------------------
1 | import { useStore } from '@nanostores/react';
2 | import { ClientOnly } from 'remix-utils/client-only';
3 | import { chatStore } from '~/lib/stores/chat';
4 | import { classNames } from '~/utils/classNames';
5 | import { HeaderActionButtons } from './HeaderActionButtons.client';
6 | import { ChatDescription } from '~/lib/persistence/ChatDescription.client';
7 |
8 | export function Header() {
9 | const chat = useStore(chatStore);
10 |
11 | return (
12 |
19 |
20 |
21 | {/* */}
22 | 
23 | 
24 |
25 |
26 | {chat.started && ( // Display ChatDescription and HeaderActionButtons only when the chat has started.
27 | <>
28 |
29 |
23 |
24 |
25 |
34 |
36 | )}
37 |
19 |
46 | );
47 | }
48 |
49 | interface ButtonProps {
50 | active?: boolean;
51 | disabled?: boolean;
52 | children?: any;
53 | onClick?: VoidFunction;
54 | }
55 |
56 | function Button({ active = false, disabled = false, children, onClick }: ButtonProps) {
57 | return (
58 |
70 | );
71 | }
72 |
--------------------------------------------------------------------------------
/app/components/settings/Settings.module.scss:
--------------------------------------------------------------------------------
1 | .settings-tabs {
2 | button {
3 | width: 100%;
4 | display: flex;
5 | align-items: center;
6 | gap: 0.5rem;
7 | padding: 0.75rem 1rem;
8 | border-radius: 0.5rem;
9 | text-align: left;
10 | font-size: 0.875rem;
11 | transition: all 0.2s;
12 | margin-bottom: 0.5rem;
13 |
14 | &.active {
15 | background: var(--bolt-elements-button-primary-background);
16 | color: var(--bolt-elements-textPrimary);
17 | }
18 |
19 | &:not(.active) {
20 | background: var(--bolt-elements-bg-depth-3);
21 | color: var(--bolt-elements-textPrimary);
22 |
23 | &:hover {
24 | background: var(--bolt-elements-button-primary-backgroundHover);
25 | }
26 | }
27 | }
28 | }
29 |
30 | .settings-button {
31 | background-color: var(--bolt-elements-button-primary-background);
32 | color: var(--bolt-elements-textPrimary);
33 | border-radius: 0.5rem;
34 | padding: 0.5rem 1rem;
35 | transition: background-color 0.2s;
36 |
37 | &:hover {
38 | background-color: var(--bolt-elements-button-primary-backgroundHover);
39 | }
40 | }
41 |
42 | .settings-danger-area {
43 | background-color: transparent;
44 | color: var(--bolt-elements-textPrimary);
45 | border-radius: 0.5rem;
46 | padding: 1rem;
47 | margin-bottom: 1rem;
48 | border-style: solid;
49 | border-color: var(--bolt-elements-button-danger-backgroundHover);
50 | border-width: thin;
51 |
52 | button {
53 | background-color: var(--bolt-elements-button-danger-background);
54 | color: var(--bolt-elements-button-danger-text);
55 | border-radius: 0.5rem;
56 | padding: 0.5rem 1rem;
57 | transition: background-color 0.2s;
58 |
59 | &:hover {
60 | background-color: var(--bolt-elements-button-danger-backgroundHover);
61 | }
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/app/components/sidebar/date-binning.ts:
--------------------------------------------------------------------------------
1 | import { format, isAfter, isThisWeek, isThisYear, isToday, isYesterday, subDays } from 'date-fns';
2 | import type { ChatHistoryItem } from '~/lib/persistence';
3 |
4 | type Bin = { category: string; items: ChatHistoryItem[] };
5 |
6 | export function binDates(_list: ChatHistoryItem[]) {
7 | const list = _list.toSorted((a, b) => Date.parse(b.timestamp) - Date.parse(a.timestamp));
8 |
9 | const binLookup: Record
20 |
31 |
32 |
44 |
45 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | );
16 | };
17 |
18 | export default BackgroundRays;
19 |
--------------------------------------------------------------------------------
/app/components/ui/IconButton.tsx:
--------------------------------------------------------------------------------
1 | import { memo, forwardRef, type ForwardedRef } from 'react';
2 | import { classNames } from '~/utils/classNames';
3 |
4 | type IconSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
5 |
6 | interface BaseIconButtonProps {
7 | size?: IconSize;
8 | className?: string;
9 | iconClassName?: string;
10 | disabledClassName?: string;
11 | title?: string;
12 | disabled?: boolean;
13 | onClick?: (event: React.MouseEvent
20 |
26 | );
27 | });
28 |
--------------------------------------------------------------------------------
/app/components/ui/LoadingOverlay.tsx:
--------------------------------------------------------------------------------
1 | export const LoadingOverlay = ({ message = 'Loading...' }) => {
2 | return (
3 |
21 | {text}
22 | {'.'.repeat(dotCount)}
23 | ...
24 |
25 |
4 | {/* Loading content */}
5 |
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/app/components/ui/PanelHeader.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import { classNames } from '~/utils/classNames';
3 |
4 | interface PanelHeaderProps {
5 | className?: string;
6 | children: React.ReactNode;
7 | }
8 |
9 | export const PanelHeader = memo(({ className, children }: PanelHeaderProps) => {
10 | return (
11 |
6 |
10 |
12 | {message}
11 |
17 | {children}
18 |
19 | );
20 | });
21 |
--------------------------------------------------------------------------------
/app/components/ui/PanelHeaderButton.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import { classNames } from '~/utils/classNames';
3 |
4 | interface PanelHeaderButtonProps {
5 | className?: string;
6 | disabledClassName?: string;
7 | disabled?: boolean;
8 | children: string | JSX.Element | Array
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{tooltip}
64 | `,
35 | ),
36 | ),
37 | );
38 |
39 | const reader = readable.getReader();
40 |
41 | function read() {
42 | reader
43 | .read()
44 | .then(({ done, value }) => {
45 | if (done) {
46 | controller.enqueue(new Uint8Array(new TextEncoder().encode('
')));
47 | controller.close();
48 |
49 | return;
50 | }
51 |
52 | controller.enqueue(value);
53 | read();
54 | })
55 | .catch((error) => {
56 | controller.error(error);
57 | readable.cancel();
58 | });
59 | }
60 | read();
61 | },
62 |
63 | cancel() {
64 | readable.cancel();
65 | },
66 | });
67 |
68 | if (isbot(request.headers.get('user-agent') || '')) {
69 | await readable.allReady;
70 | }
71 |
72 | responseHeaders.set('Content-Type', 'text/html');
73 |
74 | responseHeaders.set('Cross-Origin-Embedder-Policy', 'require-corp');
75 | responseHeaders.set('Cross-Origin-Opener-Policy', 'same-origin');
76 |
77 | return new Response(body, {
78 | headers: responseHeaders,
79 | status: responseStatusCode,
80 | });
81 | }
82 |
--------------------------------------------------------------------------------
/app/lib/.server/llm/constants.ts:
--------------------------------------------------------------------------------
1 | // see https://docs.anthropic.com/en/docs/about-claude/models
2 | export const MAX_TOKENS = 8000;
3 |
4 | // limits the number of model responses that can be returned in a single request
5 | export const MAX_RESPONSE_SEGMENTS = 2;
6 |
--------------------------------------------------------------------------------
/app/lib/.server/llm/switchable-stream.ts:
--------------------------------------------------------------------------------
1 | export default class SwitchableStream extends TransformStream {
2 | private _controller: TransformStreamDefaultController | null = null;
3 | private _currentReader: ReadableStreamDefaultReader | null = null;
4 | private _switches = 0;
5 |
6 | constructor() {
7 | let controllerRef: TransformStreamDefaultController | undefined;
8 |
9 | super({
10 | start(controller) {
11 | controllerRef = controller;
12 | },
13 | });
14 |
15 | if (controllerRef === undefined) {
16 | throw new Error('Controller not properly initialized');
17 | }
18 |
19 | this._controller = controllerRef;
20 | }
21 |
22 | async switchSource(newStream: ReadableStream) {
23 | if (this._currentReader) {
24 | await this._currentReader.cancel();
25 | }
26 |
27 | this._currentReader = newStream.getReader();
28 |
29 | this._pumpStream();
30 |
31 | this._switches++;
32 | }
33 |
34 | private async _pumpStream() {
35 | if (!this._currentReader || !this._controller) {
36 | throw new Error('Stream is not properly initialized');
37 | }
38 |
39 | try {
40 | while (true) {
41 | const { done, value } = await this._currentReader.read();
42 |
43 | if (done) {
44 | break;
45 | }
46 |
47 | this._controller.enqueue(value);
48 | }
49 | } catch (error) {
50 | console.log(error);
51 | this._controller.error(error);
52 | }
53 | }
54 |
55 | close() {
56 | if (this._currentReader) {
57 | this._currentReader.cancel();
58 | }
59 |
60 | this._controller?.terminate();
61 | }
62 |
63 | get switches() {
64 | return this._switches;
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/app/lib/common/prompt-library.ts:
--------------------------------------------------------------------------------
1 | import { getSystemPrompt } from './prompts/prompts';
2 | import optimized from './prompts/optimized';
3 |
4 | export interface PromptOptions {
5 | cwd: string;
6 | allowedHtmlElements: string[];
7 | modificationTagName: string;
8 | }
9 |
10 | export class PromptLibrary {
11 | static library: Record<
12 | string,
13 | {
14 | label: string;
15 | description: string;
16 | get: (options: PromptOptions) => string;
17 | }
18 | > = {
19 | default: {
20 | label: 'Default Prompt',
21 | description: 'This is the battle tested default system Prompt',
22 | get: (options) => getSystemPrompt(options.cwd),
23 | },
24 | optimized: {
25 | label: 'Optimized Prompt (experimental)',
26 | description: 'an Experimental version of the prompt for lower token usage',
27 | get: (options) => optimized(options),
28 | },
29 | };
30 | static getList() {
31 | return Object.entries(this.library).map(([key, value]) => {
32 | const { label, description } = value;
33 | return {
34 | id: key,
35 | label,
36 | description,
37 | };
38 | });
39 | }
40 | static getPropmtFromLibrary(promptId: string, options: PromptOptions) {
41 | const prompt = this.library[promptId];
42 |
43 | if (!prompt) {
44 | throw 'Prompt Now Found';
45 | }
46 |
47 | return this.library[promptId]?.get(options);
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/app/lib/crypto.ts:
--------------------------------------------------------------------------------
1 | const encoder = new TextEncoder();
2 | const decoder = new TextDecoder();
3 | const IV_LENGTH = 16;
4 |
5 | export async function encrypt(key: string, data: string) {
6 | const iv = crypto.getRandomValues(new Uint8Array(IV_LENGTH));
7 | const cryptoKey = await getKey(key);
8 |
9 | const ciphertext = await crypto.subtle.encrypt(
10 | {
11 | name: 'AES-CBC',
12 | iv,
13 | },
14 | cryptoKey,
15 | encoder.encode(data),
16 | );
17 |
18 | const bundle = new Uint8Array(IV_LENGTH + ciphertext.byteLength);
19 |
20 | bundle.set(new Uint8Array(ciphertext));
21 | bundle.set(iv, ciphertext.byteLength);
22 |
23 | return decodeBase64(bundle);
24 | }
25 |
26 | export async function decrypt(key: string, payload: string) {
27 | const bundle = encodeBase64(payload);
28 |
29 | const iv = new Uint8Array(bundle.buffer, bundle.byteLength - IV_LENGTH);
30 | const ciphertext = new Uint8Array(bundle.buffer, 0, bundle.byteLength - IV_LENGTH);
31 |
32 | const cryptoKey = await getKey(key);
33 |
34 | const plaintext = await crypto.subtle.decrypt(
35 | {
36 | name: 'AES-CBC',
37 | iv,
38 | },
39 | cryptoKey,
40 | ciphertext,
41 | );
42 |
43 | return decoder.decode(plaintext);
44 | }
45 |
46 | async function getKey(key: string) {
47 | return await crypto.subtle.importKey('raw', encodeBase64(key), { name: 'AES-CBC' }, false, ['encrypt', 'decrypt']);
48 | }
49 |
50 | function decodeBase64(encoded: Uint8Array) {
51 | const byteChars = Array.from(encoded, (byte) => String.fromCodePoint(byte));
52 |
53 | return btoa(byteChars.join(''));
54 | }
55 |
56 | function encodeBase64(data: string) {
57 | return Uint8Array.from(atob(data), (ch) => ch.codePointAt(0)!);
58 | }
59 |
--------------------------------------------------------------------------------
/app/lib/fetch.ts:
--------------------------------------------------------------------------------
1 | type CommonRequest = Omit
23 | {editing ? (
24 |
47 | ) : (
48 | <>
49 | {currentDescription}
50 |
51 |
52 |
63 |
64 |
65 | )}
66 |
67 | );
68 | }
69 |
--------------------------------------------------------------------------------
/app/lib/persistence/index.ts:
--------------------------------------------------------------------------------
1 | export * from './db';
2 | export * from './useChatHistory';
3 |
--------------------------------------------------------------------------------
/app/lib/stores/chat.ts:
--------------------------------------------------------------------------------
1 | import { map } from 'nanostores';
2 |
3 | export const chatStore = map({
4 | started: false,
5 | aborted: false,
6 | showChat: true,
7 | });
8 |
--------------------------------------------------------------------------------
/app/lib/stores/editor.ts:
--------------------------------------------------------------------------------
1 | import { atom, computed, map, type MapStore, type WritableAtom } from 'nanostores';
2 | import type { EditorDocument, ScrollPosition } from '~/components/editor/codemirror/CodeMirrorEditor';
3 | import type { FileMap, FilesStore } from './files';
4 |
5 | export type EditorDocuments = Record
53 |
62 |
46 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/app/routes/api.models.ts:
--------------------------------------------------------------------------------
1 | import { json } from '@remix-run/cloudflare';
2 | import { MODEL_LIST } from '~/utils/constants';
3 |
4 | export async function loader() {
5 | return json(MODEL_LIST);
6 | }
7 |
--------------------------------------------------------------------------------
/app/routes/chat.$id.tsx:
--------------------------------------------------------------------------------
1 | import { json, type LoaderFunctionArgs } from '@remix-run/cloudflare';
2 | import { default as IndexRoute } from './_index';
3 |
4 | export async function loader(args: LoaderFunctionArgs) {
5 | return json({ id: args.params.id });
6 | }
7 |
8 | export default IndexRoute;
9 |
--------------------------------------------------------------------------------
/app/routes/git.tsx:
--------------------------------------------------------------------------------
1 | import type { LoaderFunctionArgs } from '@remix-run/cloudflare';
2 | import { json, type MetaFunction } from '@remix-run/cloudflare';
3 | import { ClientOnly } from 'remix-utils/client-only';
4 | import { BaseChat } from '~/components/chat/BaseChat';
5 | import { GitUrlImport } from '~/components/git/GitUrlImport.client';
6 | import { Header } from '~/components/header/Header';
7 | import BackgroundRays from '~/components/ui/BackgroundRays';
8 |
9 | export const meta: MetaFunction = () => {
10 | return [{ title: 'Bolt' }, { name: 'description', content: 'Talk with Bolt, an AI assistant from StackBlitz' }];
11 | };
12 |
13 | export async function loader(args: LoaderFunctionArgs) {
14 | return json({ url: args.params.url });
15 | }
16 |
17 | export default function Index() {
18 | return (
19 |
20 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/app/styles/animations.scss:
--------------------------------------------------------------------------------
1 | .animated {
2 | animation-fill-mode: both;
3 | animation-duration: var(--animate-duration, 0.2s);
4 | animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
5 |
6 | &.fadeInRight {
7 | animation-name: fadeInRight;
8 | }
9 |
10 | &.fadeOutRight {
11 | animation-name: fadeOutRight;
12 | }
13 | }
14 |
15 | @keyframes fadeInRight {
16 | from {
17 | opacity: 0;
18 | transform: translate3d(100%, 0, 0);
19 | }
20 |
21 | to {
22 | opacity: 1;
23 | transform: translate3d(0, 0, 0);
24 | }
25 | }
26 |
27 | @keyframes fadeOutRight {
28 | from {
29 | opacity: 1;
30 | }
31 |
32 | to {
33 | opacity: 0;
34 | transform: translate3d(100%, 0, 0);
35 | }
36 | }
37 |
38 | .dropdown-animation {
39 | opacity: 0;
40 | animation: fadeMoveDown 0.15s forwards;
41 | animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
42 | }
43 |
44 | @keyframes fadeMoveDown {
45 | to {
46 | opacity: 1;
47 | transform: translateY(6px);
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/app/styles/components/code.scss:
--------------------------------------------------------------------------------
1 | .actions .shiki {
2 | background-color: var(--bolt-elements-actions-code-background) !important;
3 | }
4 |
5 | .shiki {
6 | &:not(:has(.actions), .actions *) {
7 | background-color: var(--bolt-elements-messages-code-background) !important;
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/app/styles/components/resize-handle.scss:
--------------------------------------------------------------------------------
1 | @use '../z-index';
2 |
3 | [data-resize-handle] {
4 | position: relative;
5 |
6 | &[data-panel-group-direction='horizontal']:after {
7 | content: '';
8 | position: absolute;
9 | top: 0;
10 | bottom: 0;
11 | left: -6px;
12 | right: -5px;
13 | z-index: z-index.$zIndexMax;
14 | }
15 |
16 | &[data-panel-group-direction='vertical']:after {
17 | content: '';
18 | position: absolute;
19 | left: 0;
20 | right: 0;
21 | top: -5px;
22 | bottom: -6px;
23 | z-index: z-index.$zIndexMax;
24 | }
25 |
26 | &[data-resize-handle-state='hover']:after,
27 | &[data-resize-handle-state='drag']:after {
28 | background-color: #8882;
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/app/styles/components/terminal.scss:
--------------------------------------------------------------------------------
1 | .xterm {
2 | padding: 1rem;
3 | }
4 |
--------------------------------------------------------------------------------
/app/styles/components/toast.scss:
--------------------------------------------------------------------------------
1 | .Toastify__toast {
2 | --at-apply: shadow-md;
3 |
4 | background-color: var(--bolt-elements-bg-depth-2);
5 | color: var(--bolt-elements-textPrimary);
6 | border: 1px solid var(--bolt-elements-borderColor);
7 | }
8 |
9 | .Toastify__close-button {
10 | color: var(--bolt-elements-item-contentDefault);
11 | opacity: 1;
12 | transition: none;
13 |
14 | &:hover {
15 | color: var(--bolt-elements-item-contentActive);
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/app/styles/index.scss:
--------------------------------------------------------------------------------
1 | @use 'variables.scss';
2 | @use 'z-index.scss';
3 | @use 'animations.scss';
4 | @use 'components/terminal.scss';
5 | @use 'components/resize-handle.scss';
6 | @use 'components/code.scss';
7 | @use 'components/editor.scss';
8 | @use 'components/toast.scss';
9 |
10 | html,
11 | body {
12 | height: 100%;
13 | width: 100%;
14 | }
15 |
16 | :root {
17 | --gradient-opacity: 0.8;
18 | --primary-color: rgba(158, 117, 240, var(--gradient-opacity));
19 | --secondary-color: rgba(138, 43, 226, var(--gradient-opacity));
20 | --accent-color: rgba(128, 59, 239, var(--gradient-opacity));
21 | // --primary-color: rgba(147, 112, 219, var(--gradient-opacity));
22 | // --secondary-color: rgba(138, 43, 226, var(--gradient-opacity));
23 | // --accent-color: rgba(180, 170, 220, var(--gradient-opacity));
24 | }
25 |
--------------------------------------------------------------------------------
/app/styles/z-index.scss:
--------------------------------------------------------------------------------
1 | $zIndexMax: 999;
2 |
3 | .z-logo {
4 | z-index: $zIndexMax - 1;
5 | }
6 |
7 | .z-sidebar {
8 | z-index: $zIndexMax - 2;
9 | }
10 |
11 | .z-port-dropdown {
12 | z-index: $zIndexMax - 3;
13 | }
14 |
15 | .z-iframe-overlay {
16 | z-index: $zIndexMax - 4;
17 | }
18 |
19 | .z-prompt {
20 | z-index: 2;
21 | }
22 |
23 | .z-workbench {
24 | z-index: 3;
25 | }
26 |
27 | .z-file-tree-breadcrumb {
28 | z-index: $zIndexMax - 1;
29 | }
30 |
31 | .z-max {
32 | z-index: $zIndexMax;
33 | }
34 |
--------------------------------------------------------------------------------
/app/types/actions.ts:
--------------------------------------------------------------------------------
1 | export type ActionType = 'file' | 'shell';
2 |
3 | export interface BaseAction {
4 | content: string;
5 | }
6 |
7 | export interface FileAction extends BaseAction {
8 | type: 'file';
9 | filePath: string;
10 | }
11 |
12 | export interface ShellAction extends BaseAction {
13 | type: 'shell';
14 | }
15 |
16 | export interface StartAction extends BaseAction {
17 | type: 'start';
18 | }
19 |
20 | export type BoltAction = FileAction | ShellAction | StartAction;
21 |
22 | export type BoltActionData = BoltAction | BaseAction;
23 |
24 | export interface ActionAlert {
25 | type: string;
26 | title: string;
27 | description: string;
28 | content: string;
29 | source?: 'terminal' | 'preview'; // Add source to differentiate between terminal and preview errors
30 | }
31 |
--------------------------------------------------------------------------------
/app/types/artifact.ts:
--------------------------------------------------------------------------------
1 | export interface BoltArtifactData {
2 | id: string;
3 | title: string;
4 | type?: string | undefined;
5 | }
6 |
--------------------------------------------------------------------------------
/app/types/global.d.ts:
--------------------------------------------------------------------------------
1 | interface Window {
2 | showDirectoryPicker(): PromisePlease use Chrome Canary for testing.
Chrome 129 has an issue with JavaScript modules & Vite local development, see for more information.
Note: This only impacts local development. `pnpm run build` and `pnpm run start` will work fine in this browser.
', 72 | ); 73 | 74 | return; 75 | } 76 | } 77 | 78 | next(); 79 | }); 80 | }, 81 | }; 82 | } 83 | -------------------------------------------------------------------------------- /worker-configuration.d.ts: -------------------------------------------------------------------------------- 1 | interface Env { 2 | DEFAULT_NUM_CTX:Settings; 3 | ANTHROPIC_API_KEY: string; 4 | OPENAI_API_KEY: string; 5 | GROQ_API_KEY: string; 6 | HuggingFace_API_KEY: string; 7 | OPEN_ROUTER_API_KEY: string; 8 | OLLAMA_API_BASE_URL: string; 9 | OPENAI_LIKE_API_KEY: string; 10 | OPENAI_LIKE_API_BASE_URL: string; 11 | TOGETHER_API_KEY: string; 12 | TOGETHER_API_BASE_URL: string; 13 | DEEPSEEK_API_KEY: string; 14 | LMSTUDIO_API_BASE_URL: string; 15 | GOOGLE_GENERATIVE_AI_API_KEY: string; 16 | MISTRAL_API_KEY: string; 17 | XAI_API_KEY: string; 18 | PERPLEXITY_API_KEY: string; 19 | } 20 | -------------------------------------------------------------------------------- /wrangler.toml: -------------------------------------------------------------------------------- 1 | #:schema node_modules/wrangler/config-schema.json 2 | name = "bolt" 3 | compatibility_flags = ["nodejs_compat"] 4 | compatibility_date = "2024-07-01" 5 | pages_build_output_dir = "./build/client" 6 | send_metrics = false 7 | --------------------------------------------------------------------------------