Add warning when no API key is set (#146)

srcbookdev · Jul 19, 2024 · e220f58 · e220f58
1 parent 97d59c0
commit e220f58
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 27 deletions.
diff --git a/packages/web/src/components/cells/code.tsx b/packages/web/src/components/cells/code.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useHotkeys } from 'react-hotkeys-hook';
 import CodeMirror, { keymap, Prec } from '@uiw/react-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
@@ -34,6 +35,7 @@ export default function CodeCell(props: {
   channel: SessionChannel;
   onUpdateCell: (cell: CodeCellType, attrs: CodeCellUpdateAttrsType) => Promise<string | null>;
   onDeleteCell: (cell: CellType) => void;
+  hasOpenaiKey: boolean;
 }) {
   const { session, cell, channel, onUpdateCell, onDeleteCell } = props;
   const [filenameError, _setFilenameError] = useState<string | null>(null);
@@ -42,11 +44,14 @@ export default function CodeCell(props: {
   const [prompt, setPrompt] = useState('');
   const [newSource, setNewSource] = useState('');
 
+  const navigate = useNavigate();
+
   useHotkeys(
     'mod+enter',
     () => {
       if (!prompt) return;
       if (promptMode !== 'idle') return;
+      if (!props.hasOpenaiKey) return;
       generate();
     },
     { enableOnFormTags: ['textarea'] },
@@ -194,7 +199,12 @@ export default function CodeCell(props: {
               <Sparkles size={16} />
             </Button>
             {promptMode === 'idle' && (
-              <Button variant="default" onClick={generate} tabIndex={1}>
+              <Button
+                variant="default"
+                onClick={generate}
+                tabIndex={1}
+                disabled={!props.hasOpenaiKey}
+              >
                 Generate
               </Button>
             )}
@@ -221,34 +231,48 @@ export default function CodeCell(props: {
           </div>
         </div>
         {promptMode !== 'off' && (
-          <div className="flex items-start justify-between px-1">
-            <div className="flex items-start flex-grow">
-              <Sparkles size={16} className="m-2.5" />
-              <TextareaAutosize
-                className="flex w-full rounded-sm bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none resize-none"
-                autoFocus
-                placeholder="Ask the AI to edit this cell..."
-                value={prompt}
-                onChange={(e) => setPrompt(e.target.value)}
-              />
-            </div>
-            <div className="flex items-center gap-1.5">
-              <AiGenerateTipsDialog>
-                <Button size="icon" variant="icon">
-                  <MessageCircleWarning size={16} />
+          <div className="flex flex-col gap-1.5">
+            <div className="flex items-start justify-between px-1">
+              <div className="flex items-start flex-grow">
+                <Sparkles size={16} className="m-2.5" />
+                <TextareaAutosize
+                  className="flex w-full rounded-sm bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none resize-none"
+                  autoFocus
+                  placeholder="Ask the AI to edit this cell..."
+                  value={prompt}
+                  onChange={(e) => setPrompt(e.target.value)}
+                />
+              </div>
+              <div className="flex items-center gap-1.5">
+                <AiGenerateTipsDialog>
+                  <Button size="icon" variant="icon">
+                    <MessageCircleWarning size={16} />
+                  </Button>
+                </AiGenerateTipsDialog>
+                <Button
+                  size="icon"
+                  variant="icon"
+                  onClick={() => {
+                    setPromptMode('off');
+                    setPrompt('');
+                  }}
+                >
+                  <X size={16} />
                 </Button>
-              </AiGenerateTipsDialog>
-              <Button
-                size="icon"
-                variant="icon"
-                onClick={() => {
-                  setPromptMode('off');
-                  setPrompt('');
-                }}
-              >
-                <X size={16} />
-              </Button>
+              </div>
             </div>
+
+            {!props.hasOpenaiKey && (
+              <div className="flex items-center justify-between bg-warning text-warning-foreground rounded-sm text-sm px-3 py-1 m-3">
+                <p>API key required</p>
+                <a
+                  className="font-medium underline cursor-pointer"
+                  onClick={() => navigate('/settings')}
+                >
+                  Settings
+                </a>
+              </div>
+            )}
           </div>
         )}
 

diff --git a/packages/web/src/index.css b/packages/web/src/index.css
@@ -64,6 +64,8 @@
     --inline-code-foreground: var(--foreground);
     --error: var(--sb-red-30);
     --error-foreground: var(--sb-red-80);
+    --warning: var(--sb-yellow-20);
+    --warning-foreground: var(--sb-yellow-80);
   }
 
   .dark {
@@ -78,6 +80,8 @@
     --inline-code-foreground: var(--foreground);
     --error: var(--sb-red-30);
     --error-foreground: var(--sb-red-80);
+    --warning: var(--sb-yellow-20);
+    --warning-foreground: var(--sb-yellow-80);
   }
 
   /* shadcn variables light */

diff --git a/packages/web/src/routes/session.tsx b/packages/web/src/routes/session.tsx
@@ -218,6 +218,7 @@ function Session(props: { session: SessionType; channel: SessionChannel; config:
                 channel={channel}
                 onUpdateCell={onUpdateCell}
                 onDeleteCell={onDeleteCell}
+                hasOpenaiKey={!!props.config.openaiKey}
               />
             )}
 

diff --git a/packages/web/tailwind.config.js b/packages/web/tailwind.config.js
@@ -90,6 +90,10 @@ module.exports = {
           DEFAULT: 'hsl(var(--error))',
           foreground: 'hsl(var(--error-foreground))',
         },
+        warning: {
+          DEFAULT: 'hsl(var(--warning))',
+          foreground: 'hsl(var(--warning-foreground))',
+        },
         sb: {
           'core-0': 'hsl(var(--sb-core-0))',
           'core-10': 'hsl(var(--sb-core-10))',