Merge remote-tracking branch 'origin/BOLTDIY_documentation' into BOLTDIY_DOCS

app/components/sidebar/Menu.client.tsx

@@ -4,7 +4,7 @@ import { toast } from 'react-toastify';
 import { Dialog, DialogButton, DialogDescription, DialogRoot, DialogTitle } from '~/components/ui/Dialog';
 import { ThemeSwitch } from '~/components/ui/ThemeSwitch';
 import { ControlPanel } from '~/components/@settings/core/ControlPanel';
-import { SettingsButton } from '~/components/ui/SettingsButton';
+import { SettingsButton, HelpButton } from '~/components/ui/SettingsButton';
 import { Button } from '~/components/ui/Button';
 import { db, deleteById, getAll, chatId, type ChatHistoryItem, useChatHistory } from '~/lib/persistence';
 import { cubicEasingFn } from '~/utils/easings';
@@ -525,7 +525,10 @@ export const Menu = () => {
             </DialogRoot>
           </div>
           <div className="flex items-center justify-between border-t border-gray-200 dark:border-gray-800 px-4 py-3">
-            <SettingsButton onClick={handleSettingsClick} />
+            <div className="flex items-center gap-3">
+              <SettingsButton onClick={handleSettingsClick} />
+              <HelpButton onClick={() => window.open('https://stackblitz-labs.github.io/bolt.diy/', '_blank')} />
+            </div>
             <ThemeSwitch />
           </div>
         </div>

app/components/ui/SettingsButton.tsx

@@ -16,3 +16,20 @@ export const SettingsButton = memo(({ onClick }: SettingsButtonProps) => {
     />
   );
 });
+
+interface HelpButtonProps {
+  onClick: () => void;
+}
+
+export const HelpButton = memo(({ onClick }: HelpButtonProps) => {
+  return (
+    <IconButton
+      onClick={onClick}
+      icon="i-ph:question"
+      size="xl"
+      title="Help & Documentation"
+      data-testid="help-button"
+      className="text-[#666] hover:text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive/10 transition-colors"
+    />
+  );
+});