Disable AI buttons if AI API key is invalid

src/renderer/context/AIContext.js

@@ -123,6 +123,17 @@ export const AIContextProvider = ({ children }) => {
     [prompt]
   );
 
+  const checkApiKeyValidity = async () => {
+    // TODO: Add regex for OpenAPI and Ollama API keys
+    const key = await window.electron.ipc.invoke('get-ai-key');
+
+    if (key !== null) {
+      return true;
+    }
+
+    return false;
+  }
+
   const AIContextValue = {
     ai,
     baseUrl,
@@ -131,6 +142,7 @@ export const AIContextProvider = ({ children }) => {
     setPrompt,
     setKey: (secretKey) => window.electron.ipc.invoke('set-ai-key', secretKey),
     getKey: () => window.electron.ipc.invoke('get-ai-key'),
+    validKey: checkApiKeyValidity,
     deleteKey: () => window.electron.ipc.invoke('delete-ai-key'),
     updateSettings: (newPrompt) =>
       updateCurrentPile({ ...currentPile, AIPrompt: newPrompt }),

src/renderer/pages/Pile/Chat/Chat.module.scss

@@ -32,6 +32,11 @@
   &:active {
     background: var(--bg-tertiary);
   }
+
+  &.disabled {
+    pointer-events: none; // Prevent interaction
+    opacity: 0.5; // Make the whole container look disabled
+  }
 }
 
 button,

src/renderer/pages/Pile/Chat/index.jsx

@@ -28,13 +28,24 @@ import Blobs from './Blobs';
 import useChat from 'renderer/hooks/useChat';
 
 export default function Chat() {
+  const { validKey } = useAIContext();
   const { currentTheme, setTheme } = usePilesContext();
   const { getAIResponse, addMessage, resetMessages } = useChat();
   const [container, setContainer] = useState(null);
   const [ready, setReady] = useState(false);
   const [text, setText] = useState('');
   const [querying, setQuerying] = useState(false);
   const [history, setHistory] = useState([]);
+  const [aiApiKeyValid, setAiApiKeyValid] = useState(false);
+
+  // Check if the AI API key is valid
+  useEffect(() => {
+    const checkApiKeyValid = async () => {
+      const valid = await validKey();
+      setAiApiKeyValid(valid);
+    };
+    checkApiKeyValid();
+  }, [validKey]);
 
   const onChangeText = (e) => {
     setText(e.target.value);
@@ -92,7 +103,10 @@ export default function Chat() {
     <>
       <Dialog.Root>
         <Dialog.Trigger asChild>
-          <div className={styles.iconHolder}>
+          <div
+            className={`${styles.iconHolder} ${!aiApiKeyValid ? styles.disabled : ''}`}
+            onClick={!aiApiKeyValid ? (e) => e.preventDefault() : undefined} // Prevent click if no AI api key is set
+          >
             <ChatIcon className={styles.chatIcon} />
           </div>
         </Dialog.Trigger>

src/renderer/pages/Pile/Posts/Post/Post.module.scss

@@ -248,6 +248,13 @@
       filter: contrast(0.85);
     }
 
+    &:disabled {
+      color: var(--secondary);
+      cursor: not-allowed; // Prevent pointer cursor
+      pointer-events: none; // Disable any interactions (e.g., clicks)
+      opacity: 0.5; // Reduce opacity to visually indicate it's disabled
+    }
+
     .icon {
       display: flex;
       justify-content: space-between;

src/renderer/pages/Pile/Posts/Post/index.jsx

@@ -22,16 +22,28 @@ import {
 import { useTimelineContext } from 'renderer/context/TimelineContext';
 import Ball from './Ball';
 import { useHighlightsContext } from 'renderer/context/HighlightsContext';
+import { useAIContext } from 'renderer/context/AIContext';
 
 const Post = memo(({ postPath, searchTerm = null, repliesCount = 0 }) => {
   const { currentPile, getCurrentPilePath } = usePilesContext();
   const { highlights } = useHighlightsContext();
+  const { validKey } = useAIContext();
   // const { setClosestDate } = useTimelineContext();
   const { post, cycleColor, refreshPost, setHighlight } = usePost(postPath);
   const [hovering, setHover] = useState(false);
   const [replying, setReplying] = useState(false);
   const [isAIResplying, setIsAiReplying] = useState(false);
   const [editable, setEditable] = useState(false);
+  const [aiApiKeyValid, setAiApiKeyValid] = useState(false);
+
+  // Check if the AI API key is valid
+  useEffect(() => {
+    const checkApiKeyValid = async () => {
+      const valid = await validKey();
+      setAiApiKeyValid(valid);
+    };
+    checkApiKeyValid();
+  }, [validKey]);
 
   const closeReply = () => {
     setReplying(false);
@@ -157,6 +169,7 @@ const Post = memo(({ postPath, searchTerm = null, repliesCount = 0 }) => {
                 <div className={styles.sep}>/</div>
                 <button
                   className={styles.openReply}
+                  disabled={!aiApiKeyValid}
                   onClick={() => {
                     setIsAiReplying(true);
                     toggleReplying();