mirror of
https://github.com/stackblitz-labs/bolt.diy
synced 2025-01-23 11:17:02 +00:00
312 lines
12 KiB
TypeScript
312 lines
12 KiB
TypeScript
// @ts-nocheck
|
|
// Preventing TS checks with files presented in the video for a better presentation.
|
|
import type { Message } from 'ai';
|
|
import React, { type RefCallback, useEffect } from 'react';
|
|
import { ClientOnly } from 'remix-utils/client-only';
|
|
import { Menu } from '~/components/sidebar/Menu.client';
|
|
import { IconButton } from '~/components/ui/IconButton';
|
|
import { Workbench } from '~/components/workbench/Workbench.client';
|
|
import { classNames } from '~/utils/classNames';
|
|
import { MODEL_LIST, DEFAULT_PROVIDER } from '~/utils/constants';
|
|
import { Messages } from './Messages.client';
|
|
import { SendButton } from './SendButton.client';
|
|
import { useState } from 'react';
|
|
import { APIKeyManager } from './APIKeyManager';
|
|
import Cookies from 'js-cookie';
|
|
|
|
import styles from './BaseChat.module.scss';
|
|
|
|
const EXAMPLE_PROMPTS = [
|
|
{ text: 'Build a todo app in React using Tailwind' },
|
|
{ text: 'Build a simple blog using Astro' },
|
|
{ text: 'Create a cookie consent form using Material UI' },
|
|
{ text: 'Make a space invaders game' },
|
|
{ text: 'How do I center a div?' },
|
|
];
|
|
|
|
const providerList = [...new Set(MODEL_LIST.map((model) => model.provider))]
|
|
|
|
const ModelSelector = ({ model, setModel, modelList, providerList, provider, setProvider }) => {
|
|
return (
|
|
<div className="mb-2 flex gap-2">
|
|
<select
|
|
value={provider}
|
|
onChange={(e) => {
|
|
setProvider(e.target.value);
|
|
const firstModel = [...modelList].find(m => m.provider == e.target.value);
|
|
setModel(firstModel ? firstModel.name : '');
|
|
}}
|
|
className="flex-1 p-2 rounded-lg 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 transition-all"
|
|
>
|
|
{providerList.map((provider) => (
|
|
<option key={provider} value={provider}>
|
|
{provider}
|
|
</option>
|
|
))}
|
|
<option key="Ollama" value="Ollama">
|
|
Ollama
|
|
</option>
|
|
<option key="OpenAILike" value="OpenAILike">
|
|
OpenAILike
|
|
</option>
|
|
</select>
|
|
<select
|
|
value={model}
|
|
onChange={(e) => setModel(e.target.value)}
|
|
className="flex-1 p-2 rounded-lg 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 transition-all"
|
|
>
|
|
{[...modelList].filter(e => e.provider == provider && e.name).map((modelOption) => (
|
|
<option key={modelOption.name} value={modelOption.name}>
|
|
{modelOption.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const TEXTAREA_MIN_HEIGHT = 76;
|
|
|
|
interface BaseChatProps {
|
|
textareaRef?: React.RefObject<HTMLTextAreaElement> | undefined;
|
|
messageRef?: RefCallback<HTMLDivElement> | undefined;
|
|
scrollRef?: RefCallback<HTMLDivElement> | undefined;
|
|
showChat?: boolean;
|
|
chatStarted?: boolean;
|
|
isStreaming?: boolean;
|
|
messages?: Message[];
|
|
enhancingPrompt?: boolean;
|
|
promptEnhanced?: boolean;
|
|
input?: string;
|
|
model: string;
|
|
setModel: (model: string) => void;
|
|
handleStop?: () => void;
|
|
sendMessage?: (event: React.UIEvent, messageInput?: string) => void;
|
|
handleInputChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
|
enhancePrompt?: () => void;
|
|
}
|
|
|
|
export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
|
|
(
|
|
{
|
|
textareaRef,
|
|
messageRef,
|
|
scrollRef,
|
|
showChat = true,
|
|
chatStarted = false,
|
|
isStreaming = false,
|
|
enhancingPrompt = false,
|
|
promptEnhanced = false,
|
|
messages,
|
|
input = '',
|
|
model,
|
|
setModel,
|
|
sendMessage,
|
|
handleInputChange,
|
|
enhancePrompt,
|
|
handleStop,
|
|
},
|
|
ref,
|
|
) => {
|
|
const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
|
|
const [provider, setProvider] = useState(DEFAULT_PROVIDER);
|
|
const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
|
|
|
|
useEffect(() => {
|
|
// Load API keys from cookies on component mount
|
|
try {
|
|
const storedApiKeys = Cookies.get('apiKeys');
|
|
if (storedApiKeys) {
|
|
const parsedKeys = JSON.parse(storedApiKeys);
|
|
if (typeof parsedKeys === 'object' && parsedKeys !== null) {
|
|
setApiKeys(parsedKeys);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading API keys from cookies:', error);
|
|
// Clear invalid cookie data
|
|
Cookies.remove('apiKeys');
|
|
}
|
|
}, []);
|
|
|
|
const updateApiKey = (provider: string, key: string) => {
|
|
try {
|
|
const updatedApiKeys = { ...apiKeys, [provider]: key };
|
|
setApiKeys(updatedApiKeys);
|
|
// Save updated API keys to cookies with 30 day expiry and secure settings
|
|
Cookies.set('apiKeys', JSON.stringify(updatedApiKeys), {
|
|
expires: 30, // 30 days
|
|
secure: true, // Only send over HTTPS
|
|
sameSite: 'strict', // Protect against CSRF
|
|
path: '/' // Accessible across the site
|
|
});
|
|
} catch (error) {
|
|
console.error('Error saving API keys to cookies:', error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={classNames(
|
|
styles.BaseChat,
|
|
'relative flex h-full w-full overflow-hidden bg-bolt-elements-background-depth-1',
|
|
)}
|
|
data-chat-visible={showChat}
|
|
>
|
|
<ClientOnly>{() => <Menu />}</ClientOnly>
|
|
<div ref={scrollRef} className="flex overflow-y-auto w-full h-full">
|
|
<div className={classNames(styles.Chat, 'flex flex-col flex-grow min-w-[var(--chat-min-width)] h-full')}>
|
|
{!chatStarted && (
|
|
<div id="intro" className="mt-[26vh] max-w-chat mx-auto text-center">
|
|
<h1 className="text-6xl font-bold text-bolt-elements-textPrimary mb-4 animate-fade-in">
|
|
Where ideas begin
|
|
</h1>
|
|
<p className="text-xl mb-8 text-bolt-elements-textSecondary animate-fade-in animation-delay-200">
|
|
Bring ideas to life in seconds or get help on existing projects.
|
|
</p>
|
|
</div>
|
|
)}
|
|
<div
|
|
className={classNames('pt-6 px-6', {
|
|
'h-full flex flex-col': chatStarted,
|
|
})}
|
|
>
|
|
<ClientOnly>
|
|
{() => {
|
|
return chatStarted ? (
|
|
<Messages
|
|
ref={messageRef}
|
|
className="flex flex-col w-full flex-1 max-w-chat px-4 pb-6 mx-auto z-1"
|
|
messages={messages}
|
|
isStreaming={isStreaming}
|
|
/>
|
|
) : null;
|
|
}}
|
|
</ClientOnly>
|
|
<div
|
|
className={classNames('relative w-full max-w-chat mx-auto z-prompt', {
|
|
'sticky bottom-0': chatStarted,
|
|
})}
|
|
>
|
|
<ModelSelector
|
|
model={model}
|
|
setModel={setModel}
|
|
modelList={MODEL_LIST}
|
|
providerList={providerList}
|
|
provider={provider}
|
|
setProvider={setProvider}
|
|
/>
|
|
<APIKeyManager
|
|
provider={provider}
|
|
apiKey={apiKeys[provider] || ''}
|
|
setApiKey={(key) => updateApiKey(provider, key)}
|
|
/>
|
|
<div
|
|
className={classNames(
|
|
'shadow-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden transition-all',
|
|
)}
|
|
>
|
|
<textarea
|
|
ref={textareaRef}
|
|
className={`w-full pl-4 pt-4 pr-16 focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus resize-none text-md text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent transition-all`}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter') {
|
|
if (event.shiftKey) {
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
|
|
sendMessage?.(event);
|
|
}
|
|
}}
|
|
value={input}
|
|
onChange={(event) => {
|
|
handleInputChange?.(event);
|
|
}}
|
|
style={{
|
|
minHeight: TEXTAREA_MIN_HEIGHT,
|
|
maxHeight: TEXTAREA_MAX_HEIGHT,
|
|
}}
|
|
placeholder="How can Bolt help you today?"
|
|
translate="no"
|
|
/>
|
|
<ClientOnly>
|
|
{() => (
|
|
<SendButton
|
|
show={input.length > 0 || isStreaming}
|
|
isStreaming={isStreaming}
|
|
onClick={(event) => {
|
|
if (isStreaming) {
|
|
handleStop?.();
|
|
return;
|
|
}
|
|
|
|
sendMessage?.(event);
|
|
}}
|
|
/>
|
|
)}
|
|
</ClientOnly>
|
|
<div className="flex justify-between items-center text-sm p-4 pt-2">
|
|
<div className="flex gap-1 items-center">
|
|
<IconButton
|
|
title="Enhance prompt"
|
|
disabled={input.length === 0 || enhancingPrompt}
|
|
className={classNames('transition-all', {
|
|
'opacity-100!': enhancingPrompt,
|
|
'text-bolt-elements-item-contentAccent! pr-1.5 enabled:hover:bg-bolt-elements-item-backgroundAccent!':
|
|
promptEnhanced,
|
|
})}
|
|
onClick={() => enhancePrompt?.()}
|
|
>
|
|
{enhancingPrompt ? (
|
|
<>
|
|
<div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl animate-spin"></div>
|
|
<div className="ml-1.5">Enhancing prompt...</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="i-bolt:stars text-xl"></div>
|
|
{promptEnhanced && <div className="ml-1.5">Prompt enhanced</div>}
|
|
</>
|
|
)}
|
|
</IconButton>
|
|
</div>
|
|
{input.length > 3 ? (
|
|
<div className="text-xs text-bolt-elements-textTertiary">
|
|
Use <kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Shift</kbd> + <kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Return</kbd> for a new line
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<div className="bg-bolt-elements-background-depth-1 pb-6">{/* Ghost Element */}</div>
|
|
</div>
|
|
</div>
|
|
{!chatStarted && (
|
|
<div id="examples" className="relative w-full max-w-xl mx-auto mt-8 flex justify-center">
|
|
<div className="flex flex-col space-y-2 [mask-image:linear-gradient(to_bottom,black_0%,transparent_180%)] hover:[mask-image:none]">
|
|
{EXAMPLE_PROMPTS.map((examplePrompt, index) => {
|
|
return (
|
|
<button
|
|
key={index}
|
|
onClick={(event) => {
|
|
sendMessage?.(event, examplePrompt.text);
|
|
}}
|
|
className="group flex items-center w-full gap-2 justify-center bg-transparent text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary transition-theme"
|
|
>
|
|
{examplePrompt.text}
|
|
<div className="i-ph:arrow-bend-down-left" />
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<ClientOnly>{() => <Workbench chatStarted={chatStarted} isStreaming={isStreaming} />}</ClientOnly>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
); |