mirror of
https://github.com/rowboatlabs/rowboat.git
synced 2026-04-28 09:56:23 +02:00
Add help modal and expand product tour
This commit is contained in:
akhisud3195
parent
f91e3bab48
commit
8981345ba8
6 changed files with 301 additions and 146 deletions
92
apps/rowboat/components/common/help-modal.tsx
Normal file
92
apps/rowboat/components/common/help-modal.tsx
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
import { Button } from "@heroui/react";
|
||||
import { HelpCircle, BookOpen, MessageCircle } from "lucide-react";
|
||||
|
||||
interface HelpModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onStartTour: () => void;
|
||||
}
|
||||
|
||||
export function HelpModal({ isOpen, onClose, onStartTour }: HelpModalProps) {
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[100] flex items-center justify-center">
|
||||
<div className="bg-white dark:bg-zinc-800 rounded-lg shadow-lg p-6 w-[480px] max-w-[90vw] animate-in fade-in duration-200">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-6">
|
||||
Need Help?
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
<Button
|
||||
className="w-full justify-start gap-4 text-left py-6 px-4 hover:bg-indigo-50 dark:hover:bg-indigo-500/10 transition-all duration-200 group hover:scale-[1.02] hover:shadow-md"
|
||||
variant="light"
|
||||
onPress={onStartTour}
|
||||
>
|
||||
<div className="bg-indigo-100 dark:bg-indigo-500/20 p-2 rounded-lg group-hover:bg-indigo-200 dark:group-hover:bg-indigo-500/30 transition-colors">
|
||||
<HelpCircle className="w-6 h-6 text-indigo-600 dark:text-indigo-400" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-base text-gray-900 dark:text-gray-100">Take Product Tour</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Learn about RowBoat's features
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
|
||||
<a
|
||||
href="https://docs.rowboatlabs.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block"
|
||||
>
|
||||
<Button
|
||||
className="w-full justify-start gap-4 text-left py-6 px-4 hover:bg-indigo-50 dark:hover:bg-indigo-500/10 transition-all duration-200 group hover:scale-[1.02] hover:shadow-md"
|
||||
variant="light"
|
||||
>
|
||||
<div className="bg-indigo-100 dark:bg-indigo-500/20 p-2 rounded-lg group-hover:bg-indigo-200 dark:group-hover:bg-indigo-500/30 transition-colors">
|
||||
<BookOpen className="w-6 h-6 text-indigo-600 dark:text-indigo-400" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-base text-gray-900 dark:text-gray-100">View Documentation</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Read our detailed guides
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://discord.gg/gtbGcqF4"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block"
|
||||
>
|
||||
<Button
|
||||
className="w-full justify-start gap-4 text-left py-6 px-4 hover:bg-indigo-50 dark:hover:bg-indigo-500/10 transition-all duration-200 group hover:scale-[1.02] hover:shadow-md"
|
||||
variant="light"
|
||||
>
|
||||
<div className="bg-indigo-100 dark:bg-indigo-500/20 p-2 rounded-lg group-hover:bg-indigo-200 dark:group-hover:bg-indigo-500/30 transition-colors">
|
||||
<MessageCircle className="w-6 h-6 text-indigo-600 dark:text-indigo-400" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-base text-gray-900 dark:text-gray-100">Join Discord</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Get help from the community
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex justify-end">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 px-4 py-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800/50 transition-colors"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -12,32 +12,42 @@ const TOUR_STEPS: TourStep[] = [
|
|||
{
|
||||
target: 'copilot',
|
||||
content: 'Build agents with the help of copilot.\nThis might take a minute.',
|
||||
title: 'Step 1/6'
|
||||
title: 'Step 1/8'
|
||||
},
|
||||
{
|
||||
target: 'playground',
|
||||
content: 'Test your assistant in the playground.\nDebug tool calls and responses.',
|
||||
title: 'Step 2/6'
|
||||
title: 'Step 2/8'
|
||||
},
|
||||
{
|
||||
target: 'entity-agents',
|
||||
content: 'Manage your agents.\nSpecify instructions, examples and tool usage.',
|
||||
title: 'Step 3/6'
|
||||
title: 'Step 3/8'
|
||||
},
|
||||
{
|
||||
target: 'entity-tools',
|
||||
content: 'Create your own tools, import MCP tools or use existing ones.\nMock tools for quick testing.',
|
||||
title: 'Step 4/6'
|
||||
title: 'Step 4/8'
|
||||
},
|
||||
{
|
||||
target: 'entity-prompts',
|
||||
content: 'Manage prompts which will be used by agents.\nConfigure greeting message.',
|
||||
title: 'Step 5/6'
|
||||
title: 'Step 5/8'
|
||||
},
|
||||
{
|
||||
target: 'settings',
|
||||
content: 'Configure project settings\nGet API keys, configure tool webhooks.',
|
||||
title: 'Step 6/6'
|
||||
title: 'Step 6/8'
|
||||
},
|
||||
{
|
||||
target: 'deploy',
|
||||
content: 'Deploy your workflow version to make it live.\nThis will make your workflow available for use via the API and SDK.\n\nLearn more:\n• <a href="https://docs.rowboatlabs.com/using_the_api/" target="_blank" class="text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300">Using the API</a>\n• <a href="https://docs.rowboatlabs.com/using_the_sdk/" target="_blank" class="text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300">Using the SDK</a>',
|
||||
title: 'Step 7/8'
|
||||
},
|
||||
{
|
||||
target: 'tour-button',
|
||||
content: 'Come back here anytime to restart the tour.\nStill have questions? See our <a href="https://docs.rowboatlabs.com/" target="_blank" class="text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300">docs</a> or reach out on <a href="https://discord.gg/gtbGcqF4" target="_blank" class="text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300">discord</a>.',
|
||||
title: 'Step 8/8'
|
||||
}
|
||||
];
|
||||
|
||||
|
|
@ -222,9 +232,9 @@ export function ProductTour({
|
|||
<div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
|
||||
{TOUR_STEPS[currentStep].title}
|
||||
</div>
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3 whitespace-pre-line">
|
||||
{TOUR_STEPS[currentStep].content}
|
||||
</div>
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3 whitespace-pre-line [&>a]:underline"
|
||||
dangerouslySetInnerHTML={{ __html: TOUR_STEPS[currentStep].content }}
|
||||
/>
|
||||
<div className="flex justify-between items-center">
|
||||
<button
|
||||
onClick={handleSkip}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue