Merge branch 'main' into main

2025-06-26 18:26:38 +00:00 · 2024-11-10 14:55:17 +02:00
parent f9e750d76e ce6b65e66f
commit 9a7d28a97d
13 changed files with 230 additions and 71 deletions
--- a/app/components/chat/APIKeyManager.tsx
+++ b/app/components/chat/APIKeyManager.tsx
@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { IconButton } from '~/components/ui/IconButton';
+
+interface APIKeyManagerProps {
+  provider: string;
+  apiKey: string;
+  setApiKey: (key: string) => void;
+}
+
+export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey, setApiKey }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [tempKey, setTempKey] = useState(apiKey);
+
+  const handleSave = () => {
+    setApiKey(tempKey);
+    setIsEditing(false);
+  };
+
+  return (
+    <div className="flex items-center gap-2 mt-2 mb-2">
+      <span className="text-sm text-bolt-elements-textSecondary">{provider} API Key:</span>
+      {isEditing ? (
+        <>
+          <input
+            type="password"
+            value={tempKey}
+            onChange={(e) => setTempKey(e.target.value)}
+            className="flex-1 p-1 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"
+          />
+          <IconButton onClick={handleSave} title="Save API Key">
+            <div className="i-ph:check" />
+          </IconButton>
+          <IconButton onClick={() => setIsEditing(false)} title="Cancel">
+            <div className="i-ph:x" />
+          </IconButton>
+        </>
+      ) : (
+        <>
+          <span className="flex-1 text-sm text-bolt-elements-textPrimary">
+            {apiKey ? '••••••••' : 'Not set (will still work if set in .env file)'}
+          </span>
+          <IconButton onClick={() => setIsEditing(true)} title="Edit API Key">
+            <div className="i-ph:pencil-simple" />
+          </IconButton>
+        </>
+      )}
+    </div>
+  );
+};
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
 // Preventing TS checks with files presented in the video for a better presentation.
 import type { Message } from 'ai';
-import React, { type RefCallback } from 'react';
+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';
@@ -11,6 +11,8 @@ 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';

@@ -24,18 +26,17 @@ const EXAMPLE_PROMPTS = [

 const providerList = [...new Set(MODEL_LIST.map((model) => model.provider))]

-const ModelSelector = ({ model, setModel, modelList, providerList }) => {
-  const [provider, setProvider] = useState(DEFAULT_PROVIDER);
+const ModelSelector = ({ model, setModel, provider, setProvider, modelList, providerList }) => {
  return (
-    <div className="mb-2">
-      <select
+    <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="w-full p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none"
+        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}>
@@ -55,7 +56,7 @@ const ModelSelector = ({ model, setModel, modelList, providerList }) => {
      <select
        value={model}
        onChange={(e) => setModel(e.target.value)}
-        className="w-full p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none"
+        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}>
@@ -82,6 +83,8 @@ interface BaseChatProps {
  input?: string;
  model: string;
  setModel: (model: string) => void;
+  provider: string;
+  setProvider: (provider: string) => void;
  handleStop?: () => void;
  sendMessage?: (event: React.UIEvent, messageInput?: string) => void;
  handleInputChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
@@ -103,6 +106,8 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
      input = '',
      model,
      setModel,
+      provider,
+      setProvider,
      sendMessage,
      handleInputChange,
      enhancePrompt,
@@ -111,6 +116,40 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
    ref,
  ) => {
    const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
+    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
@@ -125,11 +164,11 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
        <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">
-                <h1 className="text-5xl text-center font-bold text-bolt-elements-textPrimary mb-2">
+              <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="mb-4 text-center text-bolt-elements-textSecondary">
+                <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>
@@ -160,16 +199,23 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                  model={model}
                  setModel={setModel}
                  modelList={MODEL_LIST}
+                  provider={provider}
+                  setProvider={setProvider}
                  providerList={providerList}
                />
+                <APIKeyManager
+                  provider={provider}
+                  apiKey={apiKeys[provider] || ''}
+                  setApiKey={(key) => updateApiKey(provider, key)}
+                />
                <div
                  className={classNames(
-                    'shadow-sm border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden',
+                    '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 resize-none text-md text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent`}
+                    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) {
@@ -208,12 +254,12 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                      />
                    )}
                  </ClientOnly>
-                  <div className="flex justify-between text-sm p-4 pt-2">
+                  <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({
+                        className={classNames('transition-all', {
                          'opacity-100!': enhancingPrompt,
                          'text-bolt-elements-item-contentAccent! pr-1.5 enabled:hover:bg-bolt-elements-item-backgroundAccent!':
                            promptEnhanced,
@@ -222,7 +268,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                      >
                        {enhancingPrompt ? (
                          <>
-                            <div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl"></div>
+                            <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>
                          </>
                        ) : (
@@ -235,7 +281,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                    </div>
                    {input.length > 3 ? (
                      <div className="text-xs text-bolt-elements-textTertiary">
-                        Use <kbd className="kdb">Shift</kbd> + <kbd className="kdb">Return</kbd> for a new line
+                        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>
@@ -269,4 +315,4 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
      </div>
    );
  },
-);
+);
--- a/app/components/chat/Chat.client.tsx
+++ b/app/components/chat/Chat.client.tsx
@@ -11,10 +11,11 @@ import { useChatHistory } from '~/lib/persistence';
 import { chatStore } from '~/lib/stores/chat';
 import { workbenchStore } from '~/lib/stores/workbench';
 import { fileModificationsToHTML } from '~/utils/diff';
-import { DEFAULT_MODEL } from '~/utils/constants';
+import { DEFAULT_MODEL, DEFAULT_PROVIDER } from '~/utils/constants';
 import { cubicEasingFn } from '~/utils/easings';
 import { createScopedLogger, renderLogger } from '~/utils/logger';
 import { BaseChat } from './BaseChat';
+import Cookies from 'js-cookie';

 const toastAnimation = cssTransition({
  enter: 'animated fadeInRight',
@@ -74,13 +75,19 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp

  const [chatStarted, setChatStarted] = useState(initialMessages.length > 0);
  const [model, setModel] = useState(DEFAULT_MODEL);
+  const [provider, setProvider] = useState(DEFAULT_PROVIDER);

  const { showChat } = useStore(chatStore);

  const [animationScope, animate] = useAnimate();

+  const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
+
  const { messages, isLoading, input, handleInputChange, setInput, stop, append } = useChat({
    api: '/api/chat',
+    body: {
+      apiKeys
+    },
    onError: (error) => {
      logger.error('Request failed\n\n', error);
      toast.error('There was an error processing your request');
@@ -182,7 +189,7 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
       * manually reset the input and we'd have to manually pass in file attachments. However, those
       * aren't relevant here.
       */
-      append({ role: 'user', content: `[Model: ${model}]\n\n${diff}\n\n${_input}` });
+      append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider}]\n\n${diff}\n\n${_input}` });

      /**
       * After sending a new message we reset all modifications since the model
@@ -190,7 +197,7 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
       */
      workbenchStore.resetAllFileModifications();
    } else {
-      append({ role: 'user', content: `[Model: ${model}]\n\n${_input}` });
+      append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider}]\n\n${_input}` });
    }

    setInput('');
@@ -202,6 +209,13 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp

  const [messageRef, scrollRef] = useSnapScroll();

+  useEffect(() => {
+    const storedApiKeys = Cookies.get('apiKeys');
+    if (storedApiKeys) {
+      setApiKeys(JSON.parse(storedApiKeys));
+    }
+  }, []);
+
  return (
    <BaseChat
      ref={animationScope}
@@ -215,6 +229,8 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
      sendMessage={sendMessage}
      model={model}
      setModel={setModel}
+      provider={provider}
+      setProvider={setProvider}
      messageRef={messageRef}
      scrollRef={scrollRef}
      handleInputChange={handleInputChange}
--- a/app/components/chat/UserMessage.tsx
+++ b/app/components/chat/UserMessage.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
 // Preventing TS checks with files presented in the video for a better presentation.
 import { modificationsRegex } from '~/utils/diff';
-import { MODEL_REGEX } from '~/utils/constants';
+import { MODEL_REGEX, PROVIDER_REGEX } from '~/utils/constants';
 import { Markdown } from './Markdown';

 interface UserMessageProps {
@@ -17,5 +17,5 @@ export function UserMessage({ content }: UserMessageProps) {
 }

 function sanitizeUserMessage(content: string) {
-  return content.replace(modificationsRegex, '').replace(MODEL_REGEX, '').trim();
+  return content.replace(modificationsRegex, '').replace(MODEL_REGEX, 'Using: $1').replace(PROVIDER_REGEX, ' ($1)\n\n').trim();
 }