Modify the local bolt.new interface to allow input of the API key

import { ApiKeyInput } from '~/components/sidebar/ApiKeyInput';  

...  

  return (  

      <motion.div  

        ref={menuRef}  

        initial="closed"  

        animate={open ? 'open' : 'closed'}  

        variants={menuVariants}  

        className="flex flex-col side-menu fixed top-0 w-[350px] h-full bg-bolt-elements-background-depth-2 border-r rounded-r-3xl border-bolt-elements-borderColor z-sidebar shadow-xl shadow-bolt-elements-sidebar-dropdownShadow text-sm"  

      >  

        <div className="flex items-center h-[var(--header-height)]">{/* Placeholder */}</div>  

        <div className="flex-1 flex flex-col h-full w-full overflow-hidden">  

          <ApiKeyInput /> {/* Add this line */}  

          <div className="p-4">  

...  

export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(  

  (  

    {  

      textareaRef,  

      messageRef,  

      scrollRef,  

      showChat = true,  

      chatStarted = false,  

      isStreaming = false,  

      enhancingPrompt = false,  

      promptEnhanced = false,  

      messages,  

      input = '',  

      sendMessage,  

      handleInputChange,  

      enhancePrompt,  

      handleStop,  

    },  

    ref,  

  ) => {  

    // Append start  

    const [isApiKeyMissing, setIsApiKeyMissing] = useState(true); // Track API key presence  



    useEffect(() => {  

      const checkApiKey = () => {  

        const apiKey = localStorage.getItem('apiKey');  

        console.log('apiKey:', apiKey);  

        setIsApiKeyMissing(!apiKey);  

      };  



      // Initial check  

      checkApiKey();  



      // Add listener for API key changes  

      window.addEventListener('apiKeyChanged', checkApiKey);  



      return () => {  

        window.removeEventListener('apiKeyChanged', checkApiKey);  

      };  

    }, []);  

    // Append end  



    const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;  



    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">  

                <h1 className="text-5xl text-center font-bold text-bolt-elements-textPrimary mb-2">  

                  Where ideas begin  

                </h1>  

                <p className="mb-4 text-center text-bolt-elements-textSecondary">  

                  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,  

                })}  

              >  

                <div  

                  className={classNames(  

                    'shadow-sm border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden',  

                  )}  

                >  

                  {/* Append start */}  

                  {isApiKeyMissing && (  

                    <div className="px-4 py-2 bg-red-500/10 text-red-400 text-sm">  

                      Please Specify the Anthropic API Key in the Sidebar.  

                    </div>  

                  )}  

                  {/* Append end */}  

                  <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 ${isApiKeyMissing ? 'cursor-not-allowed opacity-50' : ''}`}  

                    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"  

                    // Append start  

                    disabled={isApiKeyMissing}  

                    // Append end  

                  />  

...