Make tooltip easier to reuse across the app

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, useEffect } from 'react';
+import React, { type RefCallback, useEffect, useState } from 'react';
 import { ClientOnly } from 'remix-utils/client-only';
 import { Menu } from '~/components/sidebar/Menu.client';
 import { IconButton } from '~/components/ui/IconButton';
@@ -10,9 +10,11 @@ import { classNames } from '~/utils/classNames';
 import { MODEL_LIST, DEFAULT_PROVIDER, PROVIDER_LIST, initializeModelList } 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 { importChat } from '~/utils/chatExport';
+import { toast } from 'react-toastify';
+import * as Tooltip from '@radix-ui/react-tooltip';
 
 import styles from './BaseChat.module.scss';
 import type { ProviderInfo } from '~/utils/types';
@@ -22,7 +24,7 @@ const EXAMPLE_PROMPTS = [
   { text: 'Build a simple blog using Astro' },
   { text: 'Create a cookie consent form using Material UI' },
   { text: 'Make a space invaders game' },
-  { text: 'How do I center a div?' },
+  { text: 'How do I center a div?' }
 ];
 
 const providerList = PROVIDER_LIST;
@@ -107,9 +109,9 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       sendMessage,
       handleInputChange,
       enhancePrompt,
-      handleStop,
+      handleStop
     },
-    ref,
+    ref
   ) => {
     const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
     const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
@@ -145,7 +147,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
           expires: 30, // 30 days
           secure: true, // Only send over HTTPS
           sameSite: 'strict', // Protect against CSRF
-          path: '/', // Accessible across the site
+          path: '/' // Accessible across the site
         });
       } catch (error) {
         console.error('Error saving API keys to cookies:', error);
@@ -153,11 +155,12 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     };
 
     return (
+      <Tooltip.Provider delayDuration={200}>
         <div
           ref={ref}
           className={classNames(
             styles.BaseChat,
-          'relative flex h-full w-full overflow-hidden bg-bolt-elements-background-depth-1',
+            'relative flex h-full w-full overflow-hidden bg-bolt-elements-background-depth-1'
           )}
           data-chat-visible={showChat}
         >
@@ -176,7 +179,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
               )}
               <div
                 className={classNames('pt-6 px-6', {
-                'h-full flex flex-col': chatStarted,
+                  'h-full flex flex-col': chatStarted
                 })}
               >
                 <ClientOnly>
@@ -216,7 +219,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                   )}
                   <div
                     className={classNames(
-                    'shadow-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden transition-all',
+                      'shadow-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden transition-all'
                     )}
                   >
                   <textarea
@@ -239,7 +242,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                     }}
                     style={{
                       minHeight: TEXTAREA_MIN_HEIGHT,
-                      maxHeight: TEXTAREA_MAX_HEIGHT,
+                      maxHeight: TEXTAREA_MAX_HEIGHT
                     }}
                     placeholder="How can Bolt help you today?"
                     translate="no"
@@ -268,13 +271,14 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                           className={classNames('transition-all', {
                             'opacity-100!': enhancingPrompt,
                             'text-bolt-elements-item-contentAccent! pr-1.5 enabled:hover:bg-bolt-elements-item-backgroundAccent!':
-                            promptEnhanced,
+                            promptEnhanced
                           })}
                           onClick={() => enhancePrompt?.()}
                         >
                           {enhancingPrompt ? (
                             <>
-                            <div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl animate-spin"></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>
                             </>
                           ) : (
@@ -287,8 +291,10 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                       </div>
                       {input.length > 3 ? (
                         <div className="text-xs text-bolt-elements-textTertiary">
-                        Use <kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Shift</kbd> +{' '}
+                          Use <kbd
-                        <kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Return</kbd> for
+                          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}
@@ -297,9 +303,50 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                   <div className="bg-bolt-elements-background-depth-1 pb-6">{/* Ghost Element */}</div>
                 </div>
               </div>
+              {!chatStarted && (
+                <div className="flex flex-col items-center justify-center flex-1 p-4">
+                  <input
+                    type="file"
+                    id="chat-import"
+                    className="hidden"
+                    accept=".json"
+                    onChange={async (e) => {
+                      const file = e.target.files?.[0];
+                      if (file) {
+                        try {
+                          const { messages: importedMessages } = await importChat(file);
+                          // Import each message
+                          for (const msg of importedMessages) {
+                            await sendMessage(new Event('import') as unknown as React.UIEvent, msg.content);
+                          }
+                          toast.success('Chat imported successfully');
+                        } catch (error) {
+                          toast.error(error instanceof Error ? error.message : 'Failed to import chat');
+                        }
+                        e.target.value = ''; // Reset file input
+                      }
+                    }}
+                  />
+                  <div className="flex flex-col items-center gap-4 max-w-2xl text-center">
+                    <div className="flex gap-2">
+                      <button
+                        onClick={() => {
+                          const input = document.getElementById('chat-import');
+                          input?.click();
+                        }}
+                        className="px-4 py-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-3 transition-all flex items-center gap-2"
+                      >
+                        <div className="i-ph:upload-simple" />
+                        Import Chat
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              )}
               {!chatStarted && (
                 <div id="examples" className="relative w-full max-w-xl mx-auto mt-8 flex justify-center">
-                <div className="flex flex-col space-y-2 [mask-image:linear-gradient(to_bottom,black_0%,transparent_180%)] hover:[mask-image:none]">
+                  <div
+                    className="flex flex-col space-y-2 [mask-image:linear-gradient(to_bottom,black_0%,transparent_180%)] hover:[mask-image:none]">
                     {EXAMPLE_PROMPTS.map((examplePrompt, index) => {
                       return (
                         <button
@@ -321,6 +368,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
             <ClientOnly>{() => <Workbench chatStarted={chatStarted} isStreaming={isStreaming} />}</ClientOnly>
           </div>
         </div>
+      </Tooltip.Provider>
     );
-  },
+  }
 );

app/components/chat/Messages.client.tsx

@@ -3,11 +3,11 @@ import React from 'react';
 import { classNames } from '~/utils/classNames';
 import { AssistantMessage } from './AssistantMessage';
 import { UserMessage } from './UserMessage';
-import * as Tooltip from '@radix-ui/react-tooltip';
 import { useLocation, useNavigate } from '@remix-run/react';
 import { db, chatId } from '~/lib/persistence/useChatHistory';
 import { forkChat } from '~/lib/persistence/db';
 import { toast } from 'react-toastify';
+import WithTooltip from '~/components/ui/Tooltip';
 
 interface MessagesProps {
   id?: string;
@@ -42,7 +42,6 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
   };
 
   return (
-    <Tooltip.Provider delayDuration={200}>
       <div id={id} ref={ref} className={props.className}>
         {messages.length > 0
           ? messages.map((message, index) => {
@@ -70,8 +69,7 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
                     {isUserMessage ? <UserMessage content={content} /> : <AssistantMessage content={content} />}
                   </div>
                   {!isUserMessage && (<div className="flex gap-2">
-                    <Tooltip.Root>
+                    <WithTooltip tooltip="Revert to this message">
-                      <Tooltip.Trigger asChild>
                       {messageId && (<button
                         onClick={() => handleRewind(messageId)}
                         key='i-ph:arrow-u-up-left'
@@ -80,41 +78,18 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
                           'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors'
                         )}
                       />)}
-                      </Tooltip.Trigger>
+                    </WithTooltip>
-                      <Tooltip.Portal>
-                        <Tooltip.Content
-                          className="bg-bolt-elements-tooltip-background text-bolt-elements-textPrimary px-3 py-2 rounded-lg text-sm shadow-lg"
-                          sideOffset={5}
-                          style={{zIndex: 1000}}
-                        >
-                          Revert to this message
-                          <Tooltip.Arrow className="fill-bolt-elements-tooltip-background" />
-                        </Tooltip.Content>
-                      </Tooltip.Portal>
-                    </Tooltip.Root>
 
-                    <Tooltip.Root>
+                    <WithTooltip tooltip="Fork chat from this message">
-                      <Tooltip.Trigger asChild>
                       <button
                         onClick={() => handleFork(messageId)}
-                          key='i-ph:git-fork'
+                        key="i-ph:git-fork"
                         className={classNames(
                           'i-ph:git-fork',
                           'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors'
                         )}
                       />
-                      </Tooltip.Trigger>
+                    </WithTooltip>
-                      <Tooltip.Portal>
-                        <Tooltip.Content
-                          className="bg-bolt-elements-tooltip-background text-bolt-elements-textPrimary px-3 py-2 rounded-lg text-sm shadow-lg"
-                          sideOffset={5}
-                          style={{zIndex: 1000}}
-                        >
-                          Fork chat from this message
-                          <Tooltip.Arrow className="fill-bolt-elements-tooltip-background" />
-                        </Tooltip.Content>
-                      </Tooltip.Portal>
-                    </Tooltip.Root>
                   </div>)}
                 </div>
               );
@@ -124,6 +99,5 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
           <div className="text-center w-full text-bolt-elements-textSecondary i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
         )}
       </div>
-    </Tooltip.Provider>
   );
 });

app/components/sidebar/HistoryItem.tsx

@@ -2,6 +2,7 @@ import * as Dialog from '@radix-ui/react-dialog';
 import { useEffect, useRef, useState } from 'react';
 import { type ChatHistoryItem } from '~/lib/persistence';
 import { exportChat } from '~/utils/chatExport';
+import WithTooltip from '~/components/ui/Tooltip';
 
 interface HistoryItemProps {
   item: ChatHistoryItem;
@@ -47,6 +48,7 @@ export function HistoryItem({ item, onDelete, onDuplicate }: HistoryItemProps) {
         <div className="absolute right-0 z-1 top-0 bottom-0 bg-gradient-to-l from-bolt-elements-background-depth-2 group-hover:from-bolt-elements-background-depth-3 box-content pl-3 to-transparent w-10 flex justify-end group-hover:w-15 group-hover:from-99%">
           {hovering && (
             <div className="flex items-center p-1 text-bolt-elements-textSecondary">
+              <WithTooltip tooltip="Export chat">
                 <button
                   className="i-ph:download-simple scale-110 mr-2"
                   onClick={(event) => {
@@ -55,14 +57,18 @@ export function HistoryItem({ item, onDelete, onDuplicate }: HistoryItemProps) {
                   }}
                   title="Export chat"
                 />
+              </WithTooltip>
               {onDuplicate && (
+                <WithTooltip tooltip="Duplicate chat">
                   <button
                     className="i-ph:copy scale-110 mr-2"
                     onClick={() => onDuplicate?.(item.id)}
                     title="Duplicate chat"
                   />
+                </WithTooltip>
               )}
               <Dialog.Trigger asChild>
+                <WithTooltip tooltip="Delete chat">
                 <button
                   className="i-ph:trash scale-110"
                   onClick={(event) => {
@@ -71,6 +77,7 @@ export function HistoryItem({ item, onDelete, onDuplicate }: HistoryItemProps) {
                     onDelete?.(event);
                   }}
                 />
+                </WithTooltip>
               </Dialog.Trigger>
             </div>
           )}

app/components/sidebar/Menu.client.tsx

@@ -17,8 +17,8 @@ const menuVariants = {
     left: '-150px',
     transition: {
       duration: 0.2,
-      ease: cubicEasingFn,
+      ease: cubicEasingFn
-    },
+    }
   },
   open: {
     opacity: 1,
@@ -26,9 +26,9 @@ const menuVariants = {
     left: 0,
     transition: {
       duration: 0.2,
-      ease: cubicEasingFn,
+      ease: cubicEasingFn
-    },
+    }
-  },
+  }
 } satisfies Variants;
 
 type DialogContent = { type: 'delete'; item: ChatHistoryItem } | null;
@@ -136,7 +136,8 @@ export function Menu() {
           <DialogRoot open={dialogContent !== null}>
             {binDates(list).map(({ category, items }) => (
               <div key={category} className="mt-4 first:mt-0 space-y-1">
-                <div className="text-bolt-elements-textTertiary sticky top-0 z-1 bg-bolt-elements-background-depth-2 pl-2 pt-2 pb-1">
+                <div
+                  className="text-bolt-elements-textTertiary sticky top-0 z-1 bg-bolt-elements-background-depth-2 pl-2 pt-2 pb-1">
                   {category}
                 </div>
                 {items.map((item) => (

app/components/ui/Tooltip.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import * as Tooltip from '@radix-ui/react-tooltip';
+
+const WithTooltip = ({ tooltip, children, sideOffset = 5, className = '', arrowClassName = '', tooltipStyle = {} }) => {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        {children}
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content
+          className={`bg-bolt-elements-tooltip-background text-bolt-elements-textPrimary px-3 py-2 rounded-lg text-sm shadow-lg ${className}`}
+          sideOffset={sideOffset}
+          style={{ zIndex: 2000, backgroundColor: "white", ...tooltipStyle }}
+        >
+          {tooltip}
+          <Tooltip.Arrow className={`fill-bolt-elements-tooltip-background ${arrowClassName}`} />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};
+
+export default WithTooltip;