From 89da1fa0b21b53b78b66b1445396007b78501b5e Mon Sep 17 00:00:00 2001
From: Alex Hancock <alexhancock@block.xyz>
Date: Tue, 26 Nov 2024 11:51:35 -0500
Subject: [PATCH] [access] Warn when proper env vars for model access are not
 set

---
 ui/desktop/src/ChatWindow.tsx               | 55 ++++++++++++---------
 ui/desktop/src/components/ApiKeyWarning.tsx | 43 ++++++++++++++++
 ui/desktop/src/main.ts                      | 23 ++++++++-
 ui/desktop/src/preload.js                   |  1 +
 ui/desktop/src/types/electron.d.ts          |  5 ++
 5 files changed, 103 insertions(+), 24 deletions(-)
 create mode 100644 ui/desktop/src/components/ApiKeyWarning.tsx

diff --git a/ui/desktop/src/ChatWindow.tsx b/ui/desktop/src/ChatWindow.tsx
index 851467819..5d7c6ce12 100644
--- a/ui/desktop/src/ChatWindow.tsx
+++ b/ui/desktop/src/ChatWindow.tsx
@@ -12,6 +12,7 @@ import Tabs from './components/Tabs';
 import MoreMenu from './components/MoreMenu';
 import { Bird } from './components/ui/icons';
 import LoadingGoose from './components/LoadingGoose';
+import { ApiKeyWarning } from './components/ApiKeyWarning';
 // import fakeToolInvocations from './fixtures/tool-calls-and-results.json';
 
 export interface Chat {
@@ -225,6 +226,9 @@ function ChatContent({
 }
 
 export default function ChatWindow() {
+  // Check if API key is missing from the window arguments
+  const apiCredsMissing = window.electron.getConfig().apiCredsMissing;
+
   // Get initial query and history from URL parameters
   const searchParams = new URLSearchParams(window.location.search);
   const initialQuery = searchParams.get('initialQuery');
@@ -259,30 +263,37 @@ export default function ChatWindow() {
 
   return (
     <div className="relative w-screen h-screen overflow-hidden bg-transparent flex flex-col">
-      {/* Always render ChatContent but control its visibility */}
-      <div style={{ display: mode === 'expanded' ? 'block' : 'none' }}>
-        <Routes>
-          <Route
-            path="/chat/:id"
-            element={
-              <ChatContent
-                key={selectedChatId}
-                chats={chats}
-                setChats={setChats}
-                selectedChatId={selectedChatId}
-                setSelectedChatId={setSelectedChatId}
-                initialQuery={initialQuery}
-                setProgressMessage={setProgressMessage}
-                setWorking={setWorking}
+      {apiCredsMissing ? (
+        <div className="w-full h-full">
+          <ApiKeyWarning className="w-full h-full" />
+        </div>
+      ) : (
+        <>
+          <div style={{ display: mode === 'expanded' ? 'block' : 'none' }}>
+            <Routes>
+              <Route
+                path="/chat/:id"
+                element={
+                  <ChatContent
+                    key={selectedChatId}
+                    chats={chats}
+                    setChats={setChats}
+                    selectedChatId={selectedChatId}
+                    setSelectedChatId={setSelectedChatId}
+                    initialQuery={initialQuery}
+                    setProgressMessage={setProgressMessage}
+                    setWorking={setWorking}
+                  />
+                }
               />
-            }
-          />
-          <Route path="*" element={<Navigate to="/chat/1" replace />} />
-        </Routes>
-      </div>
+              <Route path="*" element={<Navigate to="/chat/1" replace />} />
+            </Routes>
+          </div>
 
-      {/* Always render WingView but control its visibility */}
-      <WingView onExpand={toggleMode} progressMessage={progressMessage} working={working} />
+          {/* Always render WingView but control its visibility */}
+          <WingView onExpand={toggleMode} progressMessage={progressMessage} working={working} />
+        </>
+      )}
     </div>
   );
 }
diff --git a/ui/desktop/src/components/ApiKeyWarning.tsx b/ui/desktop/src/components/ApiKeyWarning.tsx
new file mode 100644
index 000000000..5ff3a438b
--- /dev/null
+++ b/ui/desktop/src/components/ApiKeyWarning.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Card } from './ui/card';
+import { Bird } from './ui/icons';
+
+interface ApiKeyWarningProps {
+  className?: string;
+}
+
+export function ApiKeyWarning({ className }: ApiKeyWarningProps) {
+  return (
+    <Card className={`flex flex-col items-center justify-center p-8 space-y-6 bg-card-gradient w-full h-full ${className}`}>
+      <div className="w-16 h-16">
+        <Bird />
+      </div>
+      <div className="text-center space-y-4">
+        <h2 className="text-2xl font-semibold text-gray-800">API Key Required</h2>
+        <div className="whitespace-pre-wrap">
+          To use Goose, you need to set some combination of the following env variables
+          <br />
+          <br />
+          # OpenAI
+          <br />
+          <br />
+          export GOOSE_PROVIDER__TYPE=openai<br />
+          GOOSE_PROVIDER__HOST=https://api.openai.com<br />
+          GOOSE_PROVIDER__MODEL=gpt-4o<br />
+          GOOSE_PROVIDER__API_KEY=...<br />
+          <br />
+          <br />
+          # Databricks + Claude
+          <br />
+          <br />
+          export GOOSE_PROVIDER__TYPE=databricks<br />
+          export GOOSE_PROVIDER__HOST=...<br />
+          export GOOSE_PROVIDER__MODEL="claude-3-5-sonnet-2"<br />
+          <br />
+          <br />
+          Please export these and restart the application.
+        </div>
+      </div>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/ui/desktop/src/main.ts b/ui/desktop/src/main.ts
index ec4b974ff..e6c9d0c3f 100644
--- a/ui/desktop/src/main.ts
+++ b/ui/desktop/src/main.ts
@@ -13,7 +13,27 @@ if (started) app.quit();
 
 declare var MAIN_WINDOW_VITE_DEV_SERVER_URL: string;
 declare var MAIN_WINDOW_VITE_NAME: string;
-let appConfig = { GOOSE_SERVER__PORT: 3000, GOOSE_API_HOST: 'http://127.0.0.1' };
+
+const checkApiCredentials = () => {
+  const isDatabricksConfigValid =
+    process.env.GOOSE_PROVIDER__TYPE === 'databricks' &&
+    process.env.GOOSE_PROVIDER__HOST &&
+    process.env.GOOSE_PROVIDER__MODEL;
+
+  const isOpenAIDirectConfigValid =
+    process.env.GOOSE_PROVIDER__TYPE === 'openai' &&
+    process.env.GOOSE_PROVIDER__HOST === 'https://api.openai.com' &&
+    process.env.GOOSE_PROVIDER__MODEL &&
+    process.env.GOOSE_PROVIDER__API_KEY;
+
+  return isDatabricksConfigValid || isOpenAIDirectConfigValid
+};
+
+let appConfig = { 
+  GOOSE_SERVER__PORT: 3000, 
+  GOOSE_API_HOST: 'http://127.0.0.1',
+  apiCredsMissing: !checkApiCredentials()
+};
 
 const createLauncher = () => {
   const launcherWindow = new BrowserWindow({
@@ -173,7 +193,6 @@ const showWindow = () => {
   });
 };
 
-
 app.whenReady().then(async () => {
   // Load zsh environment variables in production mode only
   const isProduction = app.isPackaged;
diff --git a/ui/desktop/src/preload.js b/ui/desktop/src/preload.js
index c97567813..ca85e55f5 100644
--- a/ui/desktop/src/preload.js
+++ b/ui/desktop/src/preload.js
@@ -11,6 +11,7 @@ contextBridge.exposeInMainWorld('appConfig', {
 });
 
 contextBridge.exposeInMainWorld('electron', {
+  getConfig: () => config,
   hideWindow: () => ipcRenderer.send('hide-window'),
   createChatWindow: (query) => ipcRenderer.send('create-chat-window', query),
   logInfo: (txt) => ipcRenderer.send('logInfo', txt),
diff --git a/ui/desktop/src/types/electron.d.ts b/ui/desktop/src/types/electron.d.ts
index 84332e281..8c0b0bb8c 100644
--- a/ui/desktop/src/types/electron.d.ts
+++ b/ui/desktop/src/types/electron.d.ts
@@ -1,6 +1,11 @@
 interface IElectronAPI {
   hideWindow: () => void;
   createChatWindow: (query: string) => void;
+  getConfig: () => {
+    GOOSE_SERVER__PORT: number;
+    GOOSE_API_HOST: string;
+    apiCredsMissing: boolean;
+  };
 }
 
 declare global {