[pro-web] feat: add Pro Onboarding ui #574
Conversation
• Create ProOnboarding container that mounts DialogWizard with steps array • Implement StepQ1 with Accordion sections (Local/Service/Online/Other) and selectable pill Buttons • Define types (Group, GroupItem) and provide static groups dataset with specialties • Add Lucide icon map + getIcon helper for each business type • Include sticky step header/footer and scrollable content area • Add keyboard accessibility (Enter/Space) and aria-pressed state handling • Open all accordions by default; single-select state with Continue and Skip actions
Reviewer's GuideIntroduces a Pro onboarding flow in the Pro Web app by adding a new ProOnboarding container that leverages DialogWizard and implementing the first step (StepQ1) which provides an accordion-based business category selector with full keyboard accessibility, icon mapping, and skip/continue controls. Class diagram for new onboarding components and typesclassDiagram
class ProOnboarding {
+open: boolean
+DialogWizard steps: WizardStep[]
+headerTitle: string
+handleCloseWizard()
}
class DialogWizard {
+steps: WizardStep[]
+dialogOpen: boolean
+headerTitle: string
+handleCloseWizard()
+next()
}
class StepQ1 {
+selectedId: string | null
+handleSelect(id: string)
+handleKeyDown(e, id)
+handleContinue()
+handleSkip()
}
class WizardStep {
+name: string
+component: React.ComponentType
}
class Group {
+id: 'local' | 'service' | 'online' | 'other'
+title: string
+subtitle: string
+items: GroupItem[]
}
class GroupItem {
+id: string
+label: string
+specialties: string
}
ProOnboarding --> DialogWizard
DialogWizard --> StepQ1
StepQ1 --> Group
Group --> GroupItem
DialogWizard --> WizardStep
Flow diagram for StepQ1 business type selection logicflowchart TD
A["User interacts with StepQ1"] --> B["Accordion groups displayed (all open)"]
B --> C["User selects a business type pill"]
C --> D["selectedId state updated"]
D --> E["Continue button enabled"]
E --> F["User clicks Continue"]
F --> G["DialogWizard advances to next step"]
C --> H["User clicks Skip for now"]
H --> I["Default selection used"]
I --> G
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
WalkthroughAdds a Pro onboarding wizard (4 steps) with a ProOnboarding provider and hook, BotCard and Avatar UI components, onboarding datasets and mapping utilities, rewires pages to use ProOnboarding, and removes the legacy OnboardingSection component. Exports new types and step components. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant HomePage
participant ProOnboarding
participant OnboardingProvider
participant StepQ1
participant StepQ2
participant StepQ3
participant StepQ4
participant Workspace
User->>HomePage: open page
HomePage->>ProOnboarding: isOpen=true
ProOnboarding->>OnboardingProvider: wrap steps
rect rgb(200,220,255)
ProOnboarding->>StepQ1: render (1/4)
User->>StepQ1: select category
StepQ1->>OnboardingProvider: setSelectedCategory()
StepQ1->>ProOnboarding: next()
ProOnboarding->>StepQ2: render (2/4)
User->>StepQ2: select subtype
StepQ2->>OnboardingProvider: setSelectedSubType()
StepQ2->>ProOnboarding: next()
ProOnboarding->>StepQ3: render (3/4)
User->>StepQ3: submit org name
StepQ3->>OnboardingProvider: setOrgName()
StepQ3->>ProOnboarding: next()
end
rect rgb(220,255,220)
ProOnboarding->>StepQ4: render (4/4)
StepQ4->>StepQ4: mapAnswersToBots(answers) -> recommendations
User->>StepQ4: toggle BotCard(s)
StepQ4->>OnboardingProvider: setSelectedBots()
User->>StepQ4: confirm
StepQ4->>Workspace: persist bots + organization, set active org
StepQ4->>ProOnboarding: close()
end
ProOnboarding->>HomePage: onClose()
HomePage->>User: onboarding complete
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
derianrddev
changed the title
… keep only one Crypto card
• Define base types (BotRule, BotEntry) and static botsPreselection dataset • Per-bot rules with OR lists (category/type/subtype) and priority resolution • Route business profiles → deterministic shortlist of suggested bots • Declarative, maintainable config (add/edit without coupled logic)
• Introduce context/provider + hook (selectedType, selectedSubType; setters) • Implement StepQ2: load subTypes from businesses by selectedType • Render pills grid; keyboard a11y (Enter/Space) + aria-pressed • Add pills header with icon from icon map + selected type label • General refactor: clarified variable names across steps • Extract businesses and icon map constants to a separate file • Update StepQ1 to persist selectedType and log selection
derianrddev
force-pushed
the
feat/create-pro-onboarding
branch
from
7f27327 to
31289ae
Compare
• Create StepQ3 component to collect organization name (zod + react-hook-form) • Extend ProOnboardingData with orgName and add setOrgName setter • Wire StepQ3 into wizard flow
derianrddev
force-pushed
the
feat/create-pro-onboarding
branch
from
5bb661b to
7bb7cee
Compare
…nd org name to LocalStorage
… BotCard component
…ved user experience
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Sorry @derianrddev, your pull request is larger than the review limit of 150000 diff characters
derianrddev
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
apps/pro-web/components/routes/browse/browse-list.tsx (1)
23-47: Now let me check the actual browse-list.tsx file to see what the full component looks like:I need to view the actual browse-list.tsx file to see if there are inline arrow handlers beyond the imports section, and clarify which file needs the fixes.Based on my investigation, the script found inline arrow function violations in
apps/pro-web/components/routes/home/home-page.tsx(lines 54 and 70), not in thebrowse-list.tsxfile mentioned in the review comment. The review comment shows only the imports section of browse-list.tsx (lines 23-47), which contains no event handlers.The violations found are:
- Line 54:
onClick={() => setShowOnboarding(true)}- Line 70:
onClose={() => setShowOnboarding(false)}These violate the coding guideline: "Avoid inline arrow functions in JSX props; use stable function references for event handlers."
Replace inline arrow event handlers with named functions in home-page.tsx
The scan identified inline arrow functions in event handlers at lines 54 and 70. Per coding guidelines, use stable function references instead. Define handlers as component methods or useCallback hooks (for functional components), then reference them directly in JSX props without inline arrows.
apps/pro-web/components/ui/wizard/index.tsx (2)
1-1: Mark component as a Client ComponentThis file uses hooks and framer-motion; it must include 'use client' at the top in the App Router.
As per coding guidelines
+'use client' + import { LoadingState } from '@/components/shared/loading-state'
43-49: Refactor DialogWizard to function declaration with named export; update all 3 import statementsThe review comment is correct. The refactoring is required per coding guidelines (function keyword, named exports, no defaults). However, this creates breaking changes in 3 files that currently import DialogWizard as a default export:
- apps/pro-web/components/onboarding/pro-onboarding.tsx (line 1): Change
import DialogWizard, { type WizardStep }toimport { DialogWizard, type WizardStep }- apps/pro-web/components/routes/subscription/subscription.tsx (line 30): Change
import DialogWizard fromtoimport { DialogWizard } from- apps/web/components/routes/subscription/subscription.tsx (line 29): Change
import DialogWizard fromtoimport { DialogWizard } fromApply the same refactor to both apps/pro-web/components/ui/wizard/index.tsx (line 137) and apps/web/components/ui/wizard/index.tsx (line 116).
🧹 Nitpick comments (27)
apps/pro-web/components/ui/avatar.tsx (1)
26-31: Polish AvatarImage defaults for better rendering/perfAdd object-cover and default to lazy loading/async decoding to avoid layout shifts and improve LCP.
-const AvatarImage = React.forwardRef< +const AvatarImage = React.forwardRef< React.ElementRef<typeof AvatarPrimitive.Image>, React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> >(({ className, ...props }, ref) => ( <AvatarPrimitive.Image ref={ref} - className={cn('aspect-square h-full w-full', className)} + loading={props.loading ?? 'lazy'} + decoding={(props as any).decoding ?? 'async'} + className={cn('aspect-square h-full w-full object-cover', className)} {...props} /> ))apps/pro-web/package.json (1)
30-30: Version pinning and tooling alignmentConsider pinning "@radix-ui/react-avatar" to an exact version (no caret) for reproducible builds; also plan a follow-up to align with Bun/Biome per repo guidelines. Non-blocker for this PR.
apps/pro-web/components/routes/browse/browse-list.tsx (1)
312-316: Avoid inline handlers in JSX; add stable refs and guard logsReplace inline arrows with named handlers to match project guidelines and reduce unnecessary re-renders; guard console logs.
@@ export default function BrowseList({ @@ - {showOnboarding && ( - <ProOnboarding - isOpen={showOnboarding} - onClose={() => setShowOnboarding(false)} - /> - )} + {showOnboarding && ( + <ProOnboarding + isOpen={showOnboarding} + onClose={handleOnboardingClose} + /> + )} @@ - <SelectedBotMobileView - onNewChat={() => console.log('New chat clicked')} - /> + <SelectedBotMobileView onNewChat={handleNewChat} /> </> )}Add to the component body:
@@ export default function BrowseList({ @@ }: { @@ }) { @@ + function handleOnboardingClose() { + setShowOnboarding(false) + } + + function handleNewChat() { + if (appConfig.features.devMode) { + console.log('New chat clicked') + } + }Also applies to: 335-337
apps/pro-web/components/routes/home/home-page.tsx (1)
50-58: Replace inline handlers with named functionsUse stable function refs per guidelines; also consider migrating away from default exports in a follow-up.
@@ - <p className="mb-6 text-gray-600 dark:text-gray-400"> - Please complete the onboarding to get started - </p> + <p className="mb-6 text-gray-600 dark:text-gray-400"> + Please complete the onboarding to get started + </p> <button type="button" - onClick={() => setShowOnboarding(true)} + onClick={handleStartOnboarding} className="px-6 py-3 text-white bg-green-600 rounded-lg transition-colors hover:bg-green-700" > Start Onboarding </button> @@ - <ProOnboarding - isOpen={showOnboarding} - onClose={() => setShowOnboarding(false)} - /> + <ProOnboarding isOpen={showOnboarding} onClose={handleCloseOnboarding} />Add to the component body:
@@ export default function HomePage({ @@ }) { @@ const [showOnboarding, setShowOnboarding] = useState(false) @@ + function handleStartOnboarding() { + setShowOnboarding(true) + } + + function handleCloseOnboarding() { + setShowOnboarding(false) + }Also applies to: 68-71
apps/pro-web/components/onboarding/steps/step-q2.tsx (3)
101-112: Replace inline JSX handlers with stable refs; remove redundant tabIndex.Avoid re-renders and meet guidelines by using data attributes + shared handlers.
+ function handleSubTypeClick(e: React.MouseEvent<HTMLButtonElement>) { + const id = (e.currentTarget.dataset.subtype as string) || '' + if (id) handleSelect(id) + } + + function handleSubTypeKeyDown( + e: React.KeyboardEvent<HTMLButtonElement>, + ) { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault() + const id = (e.currentTarget.dataset.subtype as string) || '' + if (id) handleSelect(id) + } + } ... - <Button + <Button key={subType.id} type="button" variant="outline" - aria-pressed={isSelected} - tabIndex={0} - onClick={() => handleSelect(subType.id)} - onKeyDown={(e) => handleKeyDown(e, subType.id)} + role="radio" + aria-checked={isSelected} + data-subtype={subType.id} + onClick={handleSubTypeClick} + onKeyDown={handleSubTypeKeyDown}
100-121: Adopt radiogroup semantics for single-select pills.Improve a11y by marking the container as a radiogroup and pills as radios.
- <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 overflow-visible"> + <div + className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 overflow-visible" + role="radiogroup" + aria-label={`Choose main offering for ${pillsTitle}`} + >
28-33: Remove or guard console logs.Avoid noisy logs in production.
- console.log('Q2 selection', { + if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line no-console + console.log('Q2 selection', { category: data.selectedCategory, type: data.selectedType, subType, - }) + }) + }apps/pro-web/lib/constants/onboarding/businesses.ts (1)
43-43: Prefer satisfies for safer literal typing without widening.Locks structure at compile time without forcing read-only.
-export const businesses: Business[] = [ +export const businesses = […and at the end:
-] +] satisfies Business[]apps/pro-web/components/onboarding/steps/step-q1.tsx (3)
106-116: Use stable event handlers; avoid inline closures in JSX.Switch to data attributes + shared handlers; also drop redundant tabIndex.
+ function handleItemClick(e: React.MouseEvent<HTMLButtonElement>) { + const typeId = e.currentTarget.dataset.typeid as string + const categoryId = e.currentTarget.dataset.categoryid as string + handleSelect(typeId, categoryId) + } + function handleItemKeyDown(e: React.KeyboardEvent<HTMLButtonElement>) { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault() + handleItemClick(e as unknown as React.MouseEvent<HTMLButtonElement>) + } + } ... - onClick={() => handleSelect(item.id, business.id)} - onKeyDown={(e) => - handleKeyDown(e, item.id, business.id) - } + data-typeid={item.id} + data-categoryid={business.id} + onClick={handleItemClick} + onKeyDown={handleItemKeyDown} - tabIndex={0}
101-136: Adopt radiogroup semantics for single-select cards.Align with a11y by using radiogroup + radio and aria-checked.
- <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 overflow-visible"> + <div + className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 overflow-visible" + role="radiogroup" + aria-label={`Select a business type in ${business.category}`} + > ... - aria-pressed={isSelected} + role="radio" + aria-checked={isSelected}
24-26: Remove/guard console logs.Keep production console clean.
- console.log('Q1 selection', { category: categoryId, type: typeId }) + if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line no-console + console.log('Q1 selection', { category: categoryId, type: typeId }) + } ... - console.log('Q1 skipped with default', { + if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line no-console + console.log('Q1 skipped with default', { category: defaultGroup.id, type: defaultItem.id, subType: defaultSubType.id, - }) + }) + }Also applies to: 49-53
apps/pro-web/lib/helpers/onboarding/mapping.ts (2)
6-16: Prefer interfaces for object shapes.Align with guidelines by switching to interfaces.
-export type Answers = { +export interface Answers { selectedCategory: string | null selectedType: string | null selectedSubType: string | null -} +} ... -export type BotCandidate = { +export interface BotCandidate { chatbotName: string categoryId: number priority: number -} +}
27-63: Unit tests for matching and sorting.Add cases: no answers, partial answers, multiple rules per bot, priority tie-break, wildcard arrays.
I can draft a minimal test table for mapAnswersToBots and ruleMatches.
apps/pro-web/components/onboarding/bot-card.tsx (3)
12-21: Use an interface for props.Matches project guidelines.
-export type BotCardProps = { +export interface BotCardProps { bot: { id: string name: string avatar?: string description?: string } isSelected: boolean onToggle: () => void -} +}
49-61: Improve button a11y labeling and drop redundant tabIndex.Buttons are focusable by default; add descriptive aria-label.
<button type="button" + aria-label={isSelected ? `Deselect ${bot.name}` : `Select ${bot.name}`} ... - tabIndex={0} >
74-82: Hoist inline span handlers to stable refs.Avoid inline arrows; keep event stopPropagation logic.
+ function handleNameClick(e: React.MouseEvent<HTMLSpanElement>) { + e.stopPropagation() + } + function handleNameKeyDown(e: React.KeyboardEvent<HTMLSpanElement>) { + e.stopPropagation() + } ... - onClick={(e) => e.stopPropagation()} - onKeyDown={(e) => e.stopPropagation()} + onClick={handleNameClick} + onKeyDown={handleNameKeyDown}apps/pro-web/lib/hooks/use-pro-onboarding.tsx (3)
67-69: Avoid redundant state updates and dedupe selectionssetSelectedBots always sets a new array, even if values are unchanged. This causes extra renders.
As per coding guidelines
-const setSelectedBots = (bots: string[]) => { - setData((prev) => ({ ...prev, selectedBots: bots })) -} +const setSelectedBots = (bots: string[]) => { + setData((prev) => { + const next = Array.from(new Set(bots)) + if ( + prev.selectedBots.length === next.length && + next.every((b) => prev.selectedBots.includes(b)) + ) { + return prev + } + return { ...prev, selectedBots: next } + }) +}
71-85: Memoize context value and stabilize settersProvider re-creates the context value each render; consumers re-render even when data hasn’t changed. Wrap setters in useCallback and value in useMemo.
As per coding guidelines
-import { createContext, useContext, useState } from 'react' +import { createContext, useCallback, useContext, useMemo, useState } from 'react' @@ - return ( - <ProOnboardingContext.Provider - value={{ - data, - setSelectedCategory, - setSelectedType, - setSelectedSubType, - setOrgName, - setSelectedBots, - }} - > + const value = useMemo( + () => ({ + data, + setSelectedCategory, + setSelectedType, + setSelectedSubType, + setOrgName, + setSelectedBots, + }), + [data, setSelectedCategory, setSelectedType, setSelectedSubType, setOrgName, setSelectedBots], + ) + + return ( + <ProOnboardingContext.Provider value={value}> {children} </ProOnboardingContext.Provider> )Note: wrap each setter with useCallback(() => setData(...), []) to fully stabilize references.
29-33: Add explicit return type for the providerSmall polish to match typing guidelines.
As per coding guidelines
-export function OnboardingProvider({ +export function OnboardingProvider({ children, }: { children: React.ReactNode -}) { +}): React.JSX.Element {apps/pro-web/components/ui/wizard/index.tsx (3)
53-53: Single source of truth for open stateisDialogOpen is derived from dialogOpen; checking both risks desync. Prefer wizard.isDialogOpen alone (or just dialogOpen).
As per coding guidelines
-if (!isDialogOpen || !dialogOpen) return null +if (!isDialogOpen) return null
12-13: Relocate custom hook under lib/hooksuseWizard lives at components/ui/wizard/hook/useWizard. Per guidelines, place custom hooks under lib/hooks/.
As per coding guidelines
66-76: Optional: handle “no steps” UIIf total === 0, consider hiding Progress entirely and showing a friendly empty state.
As per coding guidelines
apps/pro-web/components/onboarding/steps/step-q4.tsx (5)
44-62: Compute candidates once; reuse for effect and listmapAnswersToBots is called twice. Memoize once and reuse to cut work and keep behavior consistent.
As per coding guidelines
+ const candidates = useMemo( + () => + mapAnswersToBots( + { + selectedCategory: data.selectedCategory, + selectedType: data.selectedType, + selectedSubType: data.selectedSubType, + }, + botsPreselection, + ), + [data.selectedCategory, data.selectedType, data.selectedSubType], + ) @@ - useEffect(() => { - if (data.selectedBots.length === 0) { - const recommended = mapAnswersToBots( - { - selectedCategory: data.selectedCategory, - selectedType: data.selectedType, - selectedSubType: data.selectedSubType, - }, - botsPreselection, - ) - setSelectedBots(recommended.map((b) => b.chatbotName)) - } - }, [ - data.selectedCategory, - data.selectedType, - data.selectedSubType, - data.selectedBots.length, - setSelectedBots, - ]) + useEffect(() => { + if (data.selectedBots.length === 0) { + setSelectedBots(candidates.map((b) => b.chatbotName)) + } + }, [candidates, data.selectedBots.length, setSelectedBots]) @@ - const recommendedBots = useMemo(() => { - const candidates = mapAnswersToBots( { ... }, botsPreselection ) - // Map to actual chatbot data from allCategories - return candidates + const recommendedBots = useMemo(() => { + // Map to actual chatbot data from allCategories + return candidates .map((candidate) => {Also applies to: 65-101
75-101: Pre-index chatbots by name for O(1) lookupsNested loops over allCategories on every render are O(N×M). Build a map once.
As per coding guidelines
+ const botByName = useMemo(() => { + const m = new Map< + string, + { id: string; name: string; avatar?: string; description?: string } + >() + for (const category of allCategories ?? []) { + for (const cb of category.chatbots) { + const c = cb.chatbot + m.set(c.name, { + id: String(c.chatbotId), + name: c.name, + avatar: c.avatar || undefined, + description: c.description || undefined, + }) + } + } + return m + }, [allCategories]) @@ - return candidates - .map((candidate) => { - // Find the chatbot in allCategories - for (const category of allCategories) { - const bot = category.chatbots.find( - (cb) => cb.chatbot.name === candidate.chatbotName, - ) - if (bot) { - return { - id: String(bot.chatbot.chatbotId), - name: bot.chatbot.name, - avatar: bot.chatbot.avatar || undefined, - description: bot.chatbot.description || undefined, - priority: candidate.priority, - } - } - } - return null - }) + return candidates + .map((candidate) => { + const bot = botByName.get(candidate.chatbotName) + return bot ? { ...bot, priority: candidate.priority } : null + }) .filter((bot): bot is NonNullable<typeof bot> => bot !== null) - }, [ - data.selectedCategory, - data.selectedType, - data.selectedSubType, - allCategories, - ]) + }, [candidates, botByName])Also add null-safe iteration for allCategories to prevent runtime errors if it’s undefined initially.
111-135: Deduplicate IDs and avoid nested scans in confirmUse the pre-index map and Sets to dedupe.
As per coding guidelines
- const handleConfirm = () => { - // Convert bot names to chatbot IDs and collect their category IDs - const botIds: number[] = [] - const categoryIds = new Set<number>() - - for (const botName of data.selectedBots) { - for (const category of allCategories) { - const bot = category.chatbots.find((cb) => cb.chatbot.name === botName) - if (bot) { - botIds.push(bot.chatbot.chatbotId) - categoryIds.add(category.categoryId) - break - } - } - } + const handleConfirm = () => { + const botIds = Array.from( + new Set( + data.selectedBots + .map((name) => botByName.get(name)?.id) + .filter((id): id is string => Boolean(id)) + .map((id) => Number(id)), + ), + ) + const categoryIds = new Set<number>( + allCategories + ?.filter((c) => + c.chatbots.some((cb) => data.selectedBots.includes(cb.chatbot.name)), + ) + .map((c) => c.categoryId) ?? [], + ) @@ - if (categoryIds.size > 0) { - setSelectedCategories(Array.from(categoryIds)) - } + if (categoryIds.size > 0) setSelectedCategories(Array.from(categoryIds))
206-213: Avoid inline arrow handlers in JSXInline lambdas cause new refs per render. Precompute stable handlers keyed by name.
As per coding guidelines
- {recommendedBots.map((bot) => ( + {recommendedBots.map((bot) => ( <BotCard key={bot.id} bot={bot} isSelected={data.selectedBots.includes(bot.name)} - onToggle={() => handleToggleBot(bot.name)} + onToggle={toggleHandlers.get(bot.name)!} /> ))}Add above the return:
const toggleHandlers = useMemo(() => { const m = new Map<string, () => void>() for (const b of recommendedBots) { m.set(b.name, () => handleToggleBot(b.name)) } return m }, [recommendedBots, handleToggleBot])
16-26: Store selections by stable IDs rather than names (future-proofing)Names can change or collide; IDs are stable. Consider migrating ProOnboardingData.selectedBots to chatbot IDs.
As per coding guidelines
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (17)
apps/pro-web/components/onboarding/bot-card.tsx(1 hunks)apps/pro-web/components/onboarding/pro-onboarding.tsx(1 hunks)apps/pro-web/components/onboarding/steps/index.ts(1 hunks)apps/pro-web/components/onboarding/steps/step-q1.tsx(1 hunks)apps/pro-web/components/onboarding/steps/step-q2.tsx(1 hunks)apps/pro-web/components/onboarding/steps/step-q3.tsx(1 hunks)apps/pro-web/components/onboarding/steps/step-q4.tsx(1 hunks)apps/pro-web/components/routes/browse/browse-list.tsx(2 hunks)apps/pro-web/components/routes/home/home-page.tsx(3 hunks)apps/pro-web/components/shared/onboarding-section.tsx(0 hunks)apps/pro-web/components/ui/avatar.tsx(1 hunks)apps/pro-web/components/ui/wizard/index.tsx(4 hunks)apps/pro-web/lib/constants/onboarding/businesses.ts(1 hunks)apps/pro-web/lib/helpers/onboarding/mapping.ts(1 hunks)apps/pro-web/lib/hooks/use-pro-onboarding.tsx(1 hunks)apps/pro-web/package.json(1 hunks)apps/pro-web/types/index.ts(1 hunks)
💤 Files with no reviewable changes (1)
- apps/pro-web/components/shared/onboarding-section.tsx
🧰 Additional context used
📓 Path-based instructions (13)
apps/{web,pro-web}/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
apps/{web,pro-web}/**/*.tsx: Declare React components with the function keyword
Name React components using PascalCase
Order component files: imports → constants → component → styled components → types/interfaces
Use functional components and hooks; type props with a TypeScript interface
Use regular function references (not inline arrows) for React event handlers to avoid extra re-renders
apps/{web,pro-web}/**/*.tsx: Use regular function references for event handlers instead of inline arrow functions in JSX
Declare React components with the function keyword (function ComponentName() {})
Use PascalCase for React component names
Order React component files: imports, constants, component, styled components, types/interfaces
Style components with Tailwind CSS utility classes
Files:
apps/pro-web/components/onboarding/steps/step-q1.tsxapps/pro-web/components/onboarding/steps/step-q3.tsxapps/pro-web/components/onboarding/pro-onboarding.tsxapps/pro-web/components/onboarding/steps/step-q2.tsxapps/pro-web/components/routes/browse/browse-list.tsxapps/pro-web/components/onboarding/steps/step-q4.tsxapps/pro-web/components/ui/avatar.tsxapps/pro-web/lib/hooks/use-pro-onboarding.tsxapps/pro-web/components/routes/home/home-page.tsxapps/pro-web/components/onboarding/bot-card.tsxapps/pro-web/components/ui/wizard/index.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Avoid default exports; prefer named exports
Use meaningful variable names; prefix booleans with is/has/does/should
Use interface for objects/classes; type for unions/tuples/aliases; enum for fixed sets; const for literals
Avoid any; prefer specific types
Leverage type inference where clear; annotate function params and return types
Prefer type assertions with 'as' over angle-bracket syntax
Use type guards to narrow types in conditionals
**/*.{ts,tsx}: Avoid default exports; prefer named exports
Use modern JavaScript features with TypeScript across the codebase
Use meaningful names; prefix booleans with is/has/does/should (e.g., isDisabled)
Receive an object and return an object (RORO) for functions interfacing with external services
Type definitions: use interface for objects/classes; type for unions/tuples/aliases; const for literals; enum for fixed sets
Avoid any; prefer specific types
Leverage type inference; omit explicit annotations when obvious
Add explicit type annotations for function parameters and return values
Prefer type assertions with as over angle-bracket syntax
Use type guards to narrow types within conditionals
Favor composition over inheritance in code structure
**/*.{ts,tsx}: Avoid default exports; prefer named exports
Prefer RORO (Receive an object, return an object) for function signatures, especially for external service interactions
Use interface for object shapes/classes; type for unions/tuples/aliases; const for literals; enum for fixed enumerations
Avoid using any; prefer precise types
Leverage type inference when clear; omit redundant annotations
Explicitly annotate function parameters and return types
Prefer type assertions with as over angle-bracket syntax
Use type guards to narrow types safely
Use meaningful variable names; prefix booleans with is/has/does/should
Favor composition over inheritance
Use lowercase dash-separated names for files and folders; use extensions like .config.ts, .test.ts, .context.tsx, .typ...
Files:
apps/pro-web/components/onboarding/steps/step-q1.tsxapps/pro-web/components/onboarding/steps/step-q3.tsxapps/pro-web/lib/constants/onboarding/businesses.tsapps/pro-web/types/index.tsapps/pro-web/components/onboarding/pro-onboarding.tsxapps/pro-web/components/onboarding/steps/step-q2.tsxapps/pro-web/components/onboarding/steps/index.tsapps/pro-web/components/routes/browse/browse-list.tsxapps/pro-web/components/onboarding/steps/step-q4.tsxapps/pro-web/lib/helpers/onboarding/mapping.tsapps/pro-web/components/ui/avatar.tsxapps/pro-web/lib/hooks/use-pro-onboarding.tsxapps/pro-web/components/routes/home/home-page.tsxapps/pro-web/components/onboarding/bot-card.tsxapps/pro-web/components/ui/wizard/index.tsx
apps/{web,pro-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
apps/{web,pro-web}/**/*.{ts,tsx}: Use lowercase kebab-case for directories and filenames (components can omit extension)
Verify DOM operations and consider timing (RAF/delays) when manipulating the DOM in React
Use Tailwind CSS utility classes for styling React components
apps/{web,pro-web}/**/*.{ts,tsx}: Use TypeScript to define React props types (interfaces for props)
Use custom hooks (useMBChat, useThread, useSidebar, useModel) for domain-specific state and keep providers focused and composed hierarchically
Separate presentation from business logic and compose small components
Use hasura.service.ts for all GraphQL operations from UI layers
apps/{web,pro-web}/**/*.{ts,tsx}: Prefer Server Components; use the use client directive only when client-side features are required
Implement Nested Layouts using the App Router
Use Streaming and Suspense in Next.js 14/15 where appropriate
Follow Next.js file conventions as per documentation
Use IndexedDB for local caching to enable immediate UI updates
Files:
apps/pro-web/components/onboarding/steps/step-q1.tsxapps/pro-web/components/onboarding/steps/step-q3.tsxapps/pro-web/lib/constants/onboarding/businesses.tsapps/pro-web/types/index.tsapps/pro-web/components/onboarding/pro-onboarding.tsxapps/pro-web/components/onboarding/steps/step-q2.tsxapps/pro-web/components/onboarding/steps/index.tsapps/pro-web/components/routes/browse/browse-list.tsxapps/pro-web/components/onboarding/steps/step-q4.tsxapps/pro-web/lib/helpers/onboarding/mapping.tsapps/pro-web/components/ui/avatar.tsxapps/pro-web/lib/hooks/use-pro-onboarding.tsxapps/pro-web/components/routes/home/home-page.tsxapps/pro-web/components/onboarding/bot-card.tsxapps/pro-web/components/ui/wizard/index.tsx
**/*
📄 CodeRabbit inference engine (CLAUDE.md)
**/*: Use lowercase with dash-separated directory and file names; use specific extensions: .config.ts, .test.ts, .context.tsx, .type.ts, .hook.ts; components may omit extension
Use Bun for package management and scripts instead of npm/yarn
Use Biome for formatting and linting via bun format-and-lint:fix; avoid Prettier/ESLint configs
Files:
apps/pro-web/components/onboarding/steps/step-q1.tsxapps/pro-web/components/onboarding/steps/step-q3.tsxapps/pro-web/lib/constants/onboarding/businesses.tsapps/pro-web/types/index.tsapps/pro-web/components/onboarding/pro-onboarding.tsxapps/pro-web/components/onboarding/steps/step-q2.tsxapps/pro-web/package.jsonapps/pro-web/components/onboarding/steps/index.tsapps/pro-web/components/routes/browse/browse-list.tsxapps/pro-web/components/onboarding/steps/step-q4.tsxapps/pro-web/lib/helpers/onboarding/mapping.tsapps/pro-web/components/ui/avatar.tsxapps/pro-web/lib/hooks/use-pro-onboarding.tsxapps/pro-web/components/routes/home/home-page.tsxapps/pro-web/components/onboarding/bot-card.tsxapps/pro-web/components/ui/wizard/index.tsx
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/*.tsx: Avoid inline arrow functions in JSX props; use stable function references for event handlers
Declare React components with the function keyword (functional components)
Use PascalCase for React component names
Use functional components and hooks instead of class components
Type component props with TypeScript interfaces
Files:
apps/pro-web/components/onboarding/steps/step-q1.tsxapps/pro-web/components/onboarding/steps/step-q3.tsxapps/pro-web/components/onboarding/pro-onboarding.tsxapps/pro-web/components/onboarding/steps/step-q2.tsxapps/pro-web/components/routes/browse/browse-list.tsxapps/pro-web/components/onboarding/steps/step-q4.tsxapps/pro-web/components/ui/avatar.tsxapps/pro-web/lib/hooks/use-pro-onboarding.tsxapps/pro-web/components/routes/home/home-page.tsxapps/pro-web/components/onboarding/bot-card.tsxapps/pro-web/components/ui/wizard/index.tsx
apps/{web,pro-web}/components/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Order component files: imports → constants → component → styled components → types/interfaces
Files:
apps/pro-web/components/onboarding/steps/step-q1.tsxapps/pro-web/components/onboarding/steps/step-q3.tsxapps/pro-web/components/onboarding/pro-onboarding.tsxapps/pro-web/components/onboarding/steps/step-q2.tsxapps/pro-web/components/routes/browse/browse-list.tsxapps/pro-web/components/onboarding/steps/step-q4.tsxapps/pro-web/components/ui/avatar.tsxapps/pro-web/components/routes/home/home-page.tsxapps/pro-web/components/onboarding/bot-card.tsxapps/pro-web/components/ui/wizard/index.tsx
apps/{web,pro-web}/types/**
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Place shared TypeScript definitions under types/
Keep TypeScript type definitions under types/
Files:
apps/pro-web/types/index.ts
apps/{web,pro-web}/types/**/*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Place shared TypeScript types under types/
Files:
apps/pro-web/types/index.ts
apps/{web,pro-web}/components/routes/**
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Place page-specific components under components/routes/[feature]/
Organize page-specific components under components/routes/
Files:
apps/pro-web/components/routes/browse/browse-list.tsxapps/pro-web/components/routes/home/home-page.tsx
apps/{web,pro-web}/components/ui/**
📄 CodeRabbit inference engine (CLAUDE.md)
Follow Radix UI patterns for UI components in components/ui/
Files:
apps/pro-web/components/ui/avatar.tsxapps/pro-web/components/ui/wizard/index.tsx
apps/{web,pro-web}/components/ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Follow Radix UI patterns under components/ui/
Files:
apps/pro-web/components/ui/avatar.tsxapps/pro-web/components/ui/wizard/index.tsx
apps/{web,pro-web}/lib/hooks/**
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
apps/{web,pro-web}/lib/hooks/**: Place custom React hooks under lib/hooks/
Encapsulate complex state in custom hooks and separate presentation from business logicStore custom React hooks under lib/hooks/
Files:
apps/pro-web/lib/hooks/use-pro-onboarding.tsx
apps/{web,pro-web}/lib/hooks/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Place custom React hooks in lib/hooks/
Files:
apps/pro-web/lib/hooks/use-pro-onboarding.tsx
🧠 Learnings (6)
📓 Common learnings
Learnt from: AndlerRL
PR: bitcashorg/masterbots#0
File: :0-0
Timestamp: 2025-08-26T06:40:51.075Z
Learning: In the masterbots project, the pro-web app is missing onboarding elements that exist in the main web app, and pro-web has Thread Pop-up layout improvements that should be shared with the web app.
📚 Learning: 2025-09-30T22:09:37.969Z
Learnt from: CR
PR: bitcashorg/masterbots#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-30T22:09:37.969Z
Learning: Applies to apps/{web,pro-web}/**/*.{ts,tsx} : Use TypeScript to define React props types (interfaces for props)
Applied to files:
apps/pro-web/types/index.ts
📚 Learning: 2025-09-30T22:08:30.965Z
Learnt from: CR
PR: bitcashorg/masterbots#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-30T22:08:30.965Z
Learning: Applies to apps/{web,pro-web}/**/*.tsx : Use functional components and hooks; type props with a TypeScript interface
Applied to files:
apps/pro-web/types/index.tsapps/pro-web/lib/hooks/use-pro-onboarding.tsx
📚 Learning: 2025-04-26T10:58:44.341Z
Learnt from: AndlerRL
PR: bitcashorg/masterbots#465
File: apps/masterbots.ai/components/routes/browse/browse-list.tsx:1-1
Timestamp: 2025-04-26T10:58:44.341Z
Learning: The browse-list.tsx component is redundant as thread-list.tsx has been developed to support all the same functionality including public pages. The codebase should be cleaned up to remove browse-list.tsx and related components in the browse directory, along with the BrowseProvider context.
Applied to files:
apps/pro-web/components/routes/browse/browse-list.tsx
📚 Learning: 2025-04-26T10:58:44.341Z
Learnt from: AndlerRL
PR: bitcashorg/masterbots#465
File: apps/masterbots.ai/components/routes/browse/browse-list.tsx:1-1
Timestamp: 2025-04-26T10:58:44.341Z
Learning: The browse-list.tsx component and related components in the browse directory are redundant since thread-list.tsx has been developed to support all pages including public pages, and should be removed to simplify the codebase.
Applied to files:
apps/pro-web/components/routes/browse/browse-list.tsx
📚 Learning: 2025-09-30T22:09:37.969Z
Learnt from: CR
PR: bitcashorg/masterbots#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-30T22:09:37.969Z
Learning: Applies to apps/{web,pro-web}/**/*.{ts,tsx} : Use custom hooks (useMBChat, useThread, useSidebar, useModel) for domain-specific state and keep providers focused and composed hierarchically
Applied to files:
apps/pro-web/lib/hooks/use-pro-onboarding.tsx
🧬 Code graph analysis (10)
apps/pro-web/components/onboarding/steps/step-q1.tsx (3)
apps/pro-web/components/ui/wizard/index.tsx (1)
WizardStepProps(14-21)apps/pro-web/lib/hooks/use-pro-onboarding.tsx (1)
useProOnboarding(87-95)apps/pro-web/lib/constants/onboarding/businesses.ts (2)
businesses(43-493)iconMap(496-517)
apps/pro-web/components/onboarding/steps/step-q3.tsx (2)
apps/pro-web/components/ui/wizard/index.tsx (1)
WizardStepProps(14-21)apps/pro-web/lib/hooks/use-pro-onboarding.tsx (1)
useProOnboarding(87-95)
apps/pro-web/components/onboarding/pro-onboarding.tsx (3)
apps/pro-web/components/ui/wizard/index.tsx (1)
WizardStep(23-26)apps/pro-web/types/index.ts (1)
ProOnboardingProps(651-654)apps/pro-web/lib/hooks/use-pro-onboarding.tsx (1)
OnboardingProvider(29-85)
apps/pro-web/components/onboarding/steps/step-q2.tsx (3)
apps/pro-web/components/ui/wizard/index.tsx (1)
WizardStepProps(14-21)apps/pro-web/lib/hooks/use-pro-onboarding.tsx (1)
useProOnboarding(87-95)apps/pro-web/lib/constants/onboarding/businesses.ts (2)
businesses(43-493)iconMap(496-517)
apps/pro-web/components/routes/browse/browse-list.tsx (1)
apps/pro-web/components/onboarding/pro-onboarding.tsx (1)
ProOnboarding(14-25)
apps/pro-web/components/onboarding/steps/step-q4.tsx (7)
apps/pro-web/components/ui/wizard/index.tsx (1)
WizardStepProps(14-21)apps/pro-web/lib/hooks/use-pro-onboarding.tsx (1)
useProOnboarding(87-95)apps/pro-web/lib/hooks/use-workspace.tsx (1)
useWorkspace(716-722)apps/pro-web/lib/constants/onboarding/businesses.ts (1)
businesses(43-493)apps/pro-web/lib/helpers/onboarding/mapping.ts (1)
mapAnswersToBots(27-63)apps/pro-web/lib/constants/onboarding/bots-preselection.ts (1)
botsPreselection(16-6325)apps/pro-web/components/onboarding/bot-card.tsx (1)
BotCard(23-189)
apps/pro-web/lib/helpers/onboarding/mapping.ts (1)
apps/pro-web/lib/constants/onboarding/bots-preselection.ts (2)
BotEntry(10-14)BotRule(1-8)
apps/pro-web/components/ui/avatar.tsx (1)
apps/pro-web/lib/utils.ts (1)
cn(9-11)
apps/pro-web/components/routes/home/home-page.tsx (1)
apps/pro-web/components/onboarding/pro-onboarding.tsx (1)
ProOnboarding(14-25)
apps/pro-web/components/onboarding/bot-card.tsx (2)
apps/pro-web/lib/utils.ts (1)
cn(9-11)apps/pro-web/components/ui/avatar.tsx (3)
Avatar(50-50)AvatarImage(50-50)AvatarFallback(50-50)
🔇 Additional comments (6)
apps/pro-web/types/index.ts (1)
651-654: Type surface looks goodProOnboardingProps is clear and minimal; matches usage.
apps/pro-web/components/onboarding/steps/index.ts (1)
1-4: Barrel export looks fineKeeps step imports concise; no issues.
apps/pro-web/components/onboarding/pro-onboarding.tsx (1)
1-3: ****ProOnboarding does not require "use client". The component is always rendered from Client Components (home-page.tsx and browse-list.tsx both have "use client" at their boundary). The actual client boundary is already established by OnboardingProvider, which has "use client" and is a direct child of ProOnboarding. Adding "use client" to ProOnboarding would unnecessarily mark a Server Component as a Client Component, violating the coding guideline to prefer Server Components and use the directive only when client-side features are required.
Likely an incorrect or invalid review comment.
apps/pro-web/lib/constants/onboarding/businesses.ts (1)
495-517: No issues found—iconMap covers all BusinessItem ids.Verification confirms all 20 top-level BusinessItem ids (retail, restaurant-cafe, salon-spa-beauty, real-estate-agent-broker, repair-trades, professional-consulting, health-wellness, financial-services, creative-agency, education-services, e-commerce-d2c, online-courses-edu, digital-services-remote-agency, saas-software, crypto, farming, manufacturing, re-development, biotech, other) have corresponding keys in the iconMap. No missing or extra mappings detected.
apps/pro-web/components/onboarding/steps/step-q1.tsx (1)
55-56: Verify the hardcoded index and consider using relative positioning instead.The
goTo(2)call is functionally correct for the current 4-step wizard (steps 0–3), intentionally skipping Q2 because the skip handler pre-fills all Q1 and Q2 fields with defaults. However, to improve maintainability and reduce brittleness, either:
- Add a comment explaining why Q2 is skipped (
// Skip Q2; defaults pre-filled above)- Use relative positioning:
props.goTo(props.currentStep + 2)(consistent with other steps usingprops.currentStep - 1)apps/pro-web/components/onboarding/steps/step-q4.tsx (1)
79-83: Remove this review comment — allCategories is safely initializedThe useSidebar hook initializes allCategories with
categories?.categoriesChatbots || [], guaranteeing it is always an array. No guard is needed in step-q4.tsx because the value cannot be undefined.Likely an incorrect or invalid review comment.
| {/* Body with internal scroll */} | ||
| <div className="flex-1 min-h-0 overflow-y-auto p-4 md:p-8"> | ||
| <form onSubmit={handleSubmit(onSubmit)}> | ||
| <div className="max-w-xl mx-auto"> | ||
| <div className="rounded-2xl bg-white dark:bg-zinc-900 border shadow-sm"> | ||
| <div className="p-6 md:p-8 space-y-8"> | ||
| {/* Icon badge */} | ||
| <div className="w-fit mx-auto"> | ||
| <div | ||
| className="size-16 rounded-2xl border border-input bg-muted/40 dark:bg-zinc-800 | ||
| ring-1 ring-inset ring-black/5 dark:ring-white/5 | ||
| flex items-center justify-center" | ||
| > | ||
| <Building2 className="h-7 w-7 text-gray-700 dark:text-gray-300" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Label + input */} | ||
| <div className="space-y-2"> | ||
| <Label htmlFor="org-name">Organization Name</Label> | ||
| <Input | ||
| id="org-name" | ||
| {...register('name')} | ||
| placeholder="e.g., Acme Labs" | ||
| aria-invalid={!!nameError} | ||
| /> | ||
| {nameError && ( | ||
| <p role="alert" className="text-sm text-destructive"> | ||
| {nameError.message} | ||
| </p> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </div> |
There was a problem hiding this comment.
Make the submit button semantically submit the form; remove onClick handler
Button sits outside the form and relies on onClick(handleSubmit). Link it to the form and rely on native submit for accessibility and consistency; keep the form’s onSubmit.
- <form onSubmit={handleSubmit(onSubmit)}>
+ <form id="org-form" onSubmit={handleSubmit(onSubmit)}>
@@
- </div>
- {/* Footer */}
- <div className="mt-auto bg-white dark:bg-zinc-900 border-t p-4 md:p-6 flex justify-between">
+ </div>
+ {/* Footer */}
+ <div className="mt-auto bg-white dark:bg-zinc-900 border-t p-4 md:p-6 flex justify-between">
@@
- <Button
- type="submit"
- onClick={handleSubmit(onSubmit)}
- disabled={!formState.isValid || formState.isSubmitting}
+ <Button
+ type="submit"
+ form="org-form"
+ disabled={!formState.isValid || formState.isSubmitting}
className="bg-green-600 hover:bg-green-700 px-4 py-2 text-sm font-medium text-white rounded-lg shadow-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
Continue
</Button>Additional nits:
- Guard the console.log with a dev flag or remove it.
- console.log('Q3 selection', {
+ // Optional: remove in prod or guard behind dev flag
+ if (process.env.NODE_ENV !== 'production') console.log('Q3 selection', {- Consider aria-describedby to link the error text to the input.
- <Input
+ <Input
id="org-name"
{...register('name')}
placeholder="e.g., Acme Labs"
aria-invalid={!!nameError}
+ aria-describedby={nameError ? 'org-name-error' : undefined}
/>
- {nameError && (
- <p role="alert" className="text-sm text-destructive">
+ {nameError && (
+ <p id="org-name-error" role="alert" className="text-sm text-destructive">
{nameError.message}
</p>
)}Also applies to: 109-128
There was a problem hiding this comment.
This is a good point. By having the type="submit" with and id that matches with the form element, the DOM would attempt to find the nearest form element that this submit button has and verify if there is a form with the button ID to execute the onSubmit event.
We can proceed to do this improvement to reduce the number of active events however, we can take this into another PR 👍
There was a problem hiding this comment.
@AndlerRL Sounds good! 👍 I appreciate you understanding the benefits of the improvement.
Would you like me to create a GitHub issue to track this form submission enhancement for a future PR? I can include all the suggestions (form linking, console.log cleanup, and aria-describedby) so they're not lost.
…onality and markdown rendering
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (7)
apps/pro-web/components/onboarding/bot-card.tsx (7)
16-25: Use an interface for props (and place types at the end).Per guidelines, prefer
interfacefor props and group types at the file end. Converttype→interface; optionally move below the component.-export type BotCardProps = { +export interface BotCardProps { bot: { id: string name: string avatar?: string description?: string } isSelected: boolean onToggle: () => void -} +}
27-33: Let the native button handle Enter/Space; remove custom keydown and redundant tabIndex.Native buttons already toggle on Enter/Space and announce pressed state. Custom keydown can diverge from expected behavior and is unnecessary here.
export function BotCard({ bot, isSelected, onToggle }: BotCardProps) { - const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => { - if (e.key === 'Enter' || e.key === ' ') { - e.preventDefault() - onToggle() - } - } + // no custom keydown; rely on native button keyboard semantics ... return ( <button type="button" className={cn( 'overflow-hidden relative p-3 w-full text-left rounded-lg border-2 transition-all duration-200 cursor-pointer', getBackgroundClasses(), getBorderClasses(), !isSelected && 'opacity-70 hover:opacity-100', )} onClick={onToggle} - onKeyDown={handleKeyDown} aria-pressed={isSelected} - tabIndex={0} >Also applies to: 63-67
58-62: Add focus-visible styles for keyboard accessibility.Ensure a clear focus indicator for keyboard users.
- 'overflow-hidden relative p-3 w-full text-left rounded-lg border-2 transition-all duration-200 cursor-pointer', + 'overflow-hidden relative p-3 w-full text-left rounded-lg border-2 transition-all duration-200 cursor-pointer', + 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500/50',
86-88: Avoid inline arrow handlers in JSX; use stable function references.Follow project guidance to prevent unnecessary re-renders and keep handlers consistent.
export function BotCard({ bot, isSelected, onToggle }: BotCardProps) { + function handleNameClick(e: React.MouseEvent) { + e.stopPropagation() + } + function handleNameKeyDown(e: React.KeyboardEvent) { + e.stopPropagation() + } + function handleTooltipWheel(e: React.WheelEvent) { + e.stopPropagation() + } + function handleTooltipTouchMove(e: React.TouchEvent) { + e.stopPropagation() + } ... - // prevent click/keyboard on name from toggling card - onClick={(e) => e.stopPropagation()} - onKeyDown={(e) => e.stopPropagation()} + // prevent click/keyboard on name from toggling card + onClick={handleNameClick} + onKeyDown={handleNameKeyDown} ... - onWheel={(e) => e.stopPropagation()} - onTouchMove={(e) => e.stopPropagation()} + onWheel={handleTooltipWheel} + onTouchMove={handleTooltipTouchMove}Also applies to: 106-108
14-15: Use React’s useId for unique, collision-free SVG pattern IDs.Avoid duplicate IDs and odd characters from
bot.idbreaking theurl(#id)reference.-import { useMemo } from 'react' +import { useId, useMemo } from 'react' ... -const markdownComponents = useMemo(() => memoizedMarkdownComponents(), []) +const markdownComponents = useMemo(() => memoizedMarkdownComponents(), []) +const patternId = useId() ... - <pattern - id={`avatar-${bot.id}`} + <pattern + id={patternId} patternUnits="userSpaceOnUse" width="80" height="80" > ... - <circle + <circle cx="40" cy="40" r="40" - fill={`url(#avatar-${bot.id})`} + fill={`url(#${patternId})`} />Also applies to: 35-35, 163-177
55-67: Keyboard users can’t access tooltip content; add an aria-describedby fallback.Radix Tooltips are pointer-focused. Provide a screen-reader/keyboard description via a visually hidden element.
- <button + <button type="button" className={cn( 'overflow-hidden relative p-3 w-full text-left rounded-lg border-2 transition-all duration-200 cursor-pointer', getBackgroundClasses(), getBorderClasses(), !isSelected && 'opacity-70 hover:opacity-100', )} onClick={onToggle} aria-pressed={isSelected} + aria-describedby={bot.description ? `desc-${bot.id}` : undefined} > ... - <div className="relative z-10"> + <div className="relative z-10"> + {/* SR-only description for keyboard/screen readers */} + {bot.description ? ( + <span id={`desc-${bot.id}`} className="sr-only"> + {bot.description} + </span> + ) : null}Please confirm your ID policy for
bot.id(guaranteed to be safe for use in HTML attributes). If not guaranteed, preferuseId()instead ofdesc-${bot.id}for thearia-describedbyid as well.Also applies to: 73-75, 126-139
58-62: Optional nit: remove redundant cursor-pointer on button.Buttons get the pointer cursor by default in most browsers; keep only if your reset removes it.
- 'overflow-hidden relative p-3 w-full text-left rounded-lg border-2 transition-all duration-200 cursor-pointer', + 'overflow-hidden relative p-3 w-full text-left rounded-lg border-2 transition-all duration-200',
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/pro-web/components/onboarding/bot-card.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
apps/{web,pro-web}/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
apps/{web,pro-web}/**/*.tsx: Declare React components with the function keyword
Name React components using PascalCase
Order component files: imports → constants → component → styled components → types/interfaces
Use functional components and hooks; type props with a TypeScript interface
Use regular function references (not inline arrows) for React event handlers to avoid extra re-renders
apps/{web,pro-web}/**/*.tsx: Use regular function references for event handlers instead of inline arrow functions in JSX
Declare React components with the function keyword (function ComponentName() {})
Use PascalCase for React component names
Order React component files: imports, constants, component, styled components, types/interfaces
Style components with Tailwind CSS utility classes
Files:
apps/pro-web/components/onboarding/bot-card.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Avoid default exports; prefer named exports
Use meaningful variable names; prefix booleans with is/has/does/should
Use interface for objects/classes; type for unions/tuples/aliases; enum for fixed sets; const for literals
Avoid any; prefer specific types
Leverage type inference where clear; annotate function params and return types
Prefer type assertions with 'as' over angle-bracket syntax
Use type guards to narrow types in conditionals
**/*.{ts,tsx}: Avoid default exports; prefer named exports
Use modern JavaScript features with TypeScript across the codebase
Use meaningful names; prefix booleans with is/has/does/should (e.g., isDisabled)
Receive an object and return an object (RORO) for functions interfacing with external services
Type definitions: use interface for objects/classes; type for unions/tuples/aliases; const for literals; enum for fixed sets
Avoid any; prefer specific types
Leverage type inference; omit explicit annotations when obvious
Add explicit type annotations for function parameters and return values
Prefer type assertions with as over angle-bracket syntax
Use type guards to narrow types within conditionals
Favor composition over inheritance in code structure
**/*.{ts,tsx}: Avoid default exports; prefer named exports
Prefer RORO (Receive an object, return an object) for function signatures, especially for external service interactions
Use interface for object shapes/classes; type for unions/tuples/aliases; const for literals; enum for fixed enumerations
Avoid using any; prefer precise types
Leverage type inference when clear; omit redundant annotations
Explicitly annotate function parameters and return types
Prefer type assertions with as over angle-bracket syntax
Use type guards to narrow types safely
Use meaningful variable names; prefix booleans with is/has/does/should
Favor composition over inheritance
Use lowercase dash-separated names for files and folders; use extensions like .config.ts, .test.ts, .context.tsx, .typ...
Files:
apps/pro-web/components/onboarding/bot-card.tsx
apps/{web,pro-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
apps/{web,pro-web}/**/*.{ts,tsx}: Use lowercase kebab-case for directories and filenames (components can omit extension)
Verify DOM operations and consider timing (RAF/delays) when manipulating the DOM in React
Use Tailwind CSS utility classes for styling React components
apps/{web,pro-web}/**/*.{ts,tsx}: Use TypeScript to define React props types (interfaces for props)
Use custom hooks (useMBChat, useThread, useSidebar, useModel) for domain-specific state and keep providers focused and composed hierarchically
Separate presentation from business logic and compose small components
Use hasura.service.ts for all GraphQL operations from UI layers
apps/{web,pro-web}/**/*.{ts,tsx}: Prefer Server Components; use the use client directive only when client-side features are required
Implement Nested Layouts using the App Router
Use Streaming and Suspense in Next.js 14/15 where appropriate
Follow Next.js file conventions as per documentation
Use IndexedDB for local caching to enable immediate UI updates
Files:
apps/pro-web/components/onboarding/bot-card.tsx
**/*
📄 CodeRabbit inference engine (CLAUDE.md)
**/*: Use lowercase with dash-separated directory and file names; use specific extensions: .config.ts, .test.ts, .context.tsx, .type.ts, .hook.ts; components may omit extension
Use Bun for package management and scripts instead of npm/yarn
Use Biome for formatting and linting via bun format-and-lint:fix; avoid Prettier/ESLint configs
Files:
apps/pro-web/components/onboarding/bot-card.tsx
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/*.tsx: Avoid inline arrow functions in JSX props; use stable function references for event handlers
Declare React components with the function keyword (functional components)
Use PascalCase for React component names
Use functional components and hooks instead of class components
Type component props with TypeScript interfaces
Files:
apps/pro-web/components/onboarding/bot-card.tsx
apps/{web,pro-web}/components/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Order component files: imports → constants → component → styled components → types/interfaces
Files:
apps/pro-web/components/onboarding/bot-card.tsx
🧠 Learnings (1)
📓 Common learnings
Learnt from: AndlerRL
PR: bitcashorg/masterbots#0
File: :0-0
Timestamp: 2025-08-26T06:40:51.075Z
Learning: In the masterbots project, the pro-web app is missing onboarding elements that exist in the main web app, and pro-web has Thread Pop-up layout improvements that should be shared with the web app.
🧬 Code graph analysis (1)
apps/pro-web/components/onboarding/bot-card.tsx (2)
apps/pro-web/lib/utils.ts (1)
cn(9-11)apps/pro-web/components/ui/avatar.tsx (3)
Avatar(50-50)AvatarImage(50-50)AvatarFallback(50-50)
🔇 Additional comments (1)
apps/pro-web/components/onboarding/bot-card.tsx (1)
126-135: Now I need to find themarkdownComponentsdefinition used in the bot-card.tsx file to verify if it introduces XSS vulnerabilities.Based on my analysis of the verification results:
- react-markdown itself is secure by default: react-markdown is safe by default with no dangerouslySetInnerHTML or XSS attacks
- However, custom components and plugins can introduce risk: The remarkPlugins, rehypePlugins, and components you use may be insecure
- No rehype-sanitize is present: The implementation uses
remarkGfmandremarkMathplugins but no sanitization plugin- The review comment identifies a real concern: The code passes
markdownComponentsto MemoizedReactMarkdown, and custom components are a known XSS vectorThe review comment is valid. While react-markdown provides safe defaults, the use of custom components (the
markdownComponentsprop) can introduce XSS vulnerabilities if those components don't properly escape user input in attributes likehref,src, orstyle.Verify that custom components in
markdownComponentsdo not render unsanitized user input (especially in element attributes). Ifbot.descriptioncan include user/remote content, consider adding rehype-sanitize to the markdown pipeline for comprehensive XSS protection.
… closing StepQ4 wizard
There was a problem hiding this comment.
Actionable comments posted: 4
♻️ Duplicate comments (1)
apps/pro-web/components/onboarding/steps/step-q4.tsx (1)
148-156: Remove/gate PII logging and redact fields.Console output includes orgName and selections. Gate logs to dev/debug only and redact. As per coding guidelines.
Apply:
- console.log('Q4 confirmed', { - category: data.selectedCategory, - type: data.selectedType, - subType: data.selectedSubType, - orgName: data.orgName, - selectedBots: data.selectedBots, - botIds, - categoryIds: Array.from(categoryIds), - }) + if ( + process.env.NODE_ENV === 'development' || + process.env.NEXT_PUBLIC_ENABLE_DEBUG === '1' + ) { + // eslint-disable-next-line no-console + console.debug('Q4 confirmed', { + category: data.selectedCategory, + type: data.selectedType, + subType: data.selectedSubType, + orgName: data.orgName ? '[redacted]' : null, + selectedBotsCount: data.selectedBots.length, + botIdsCount: botIds.length, + categoryIdsCount: categoryIds.size, + }) + }
🧹 Nitpick comments (5)
apps/pro-web/app/auth/signup/page.tsx (1)
46-46: Text update is more engaging and action-oriented.The new copy shifts focus from the process ("Enter your email and password") to the benefit ("Start Chatting with Your Bots"), which aligns well with the new onboarding experience. The enthusiastic tone is appropriate for a signup CTA.
Optional: Consider whether the mid-sentence capitalization ("Sign Up Now to Start Chatting") matches your application's voice and style guide. While it works for emphasis, you may want to use sentence case for consistency with other copy.
apps/pro-web/components/onboarding/steps/step-q4.tsx (4)
210-215: Avoid inline arrow in JSX handlers; pass stable function references.Create a memoized handler map and reference it here. As per coding guidelines.
Apply:
@@ - {recommendedBots.map((bot) => ( + {recommendedBots.map((bot) => ( <BotCard key={bot.id} bot={bot} isSelected={data.selectedBots.includes(bot.name)} - onToggle={() => handleToggleBot(bot.name)} + onToggle={toggleHandlers.get(bot.name)!} /> ))}Add above (after recommendedBots):
+ const toggleHandlers = useMemo(() => { + const m = new Map<string, () => void>() + for (const b of recommendedBots) { + m.set(b.name, () => handleToggleBot(b.name)) + } + return m + }, [recommendedBots, handleToggleBot])
45-64: Compute candidates once; remove duplicate work.mapAnswersToBots runs twice. Memoize candidates and reuse in effect and recommendedBots.
Apply:
+ const candidates = useMemo(() => { + return mapAnswersToBots( + { + selectedCategory: data.selectedCategory, + selectedType: data.selectedType, + selectedSubType: data.selectedSubType, + }, + botsPreselection, + ) + }, [data.selectedCategory, data.selectedType, data.selectedSubType]) @@ - if (data.selectedBots.length === 0) { - const recommended = mapAnswersToBots( - { - selectedCategory: data.selectedCategory, - selectedType: data.selectedType, - selectedSubType: data.selectedSubType, - }, - botsPreselection, - ) - setSelectedBots(recommended.map((b) => b.chatbotName)) - } + if (data.selectedBots.length === 0) { + setSelectedBots(candidates.map((b) => b.chatbotName)) + } - }, [ - data.selectedCategory, - data.selectedType, - data.selectedSubType, - data.selectedBots.length, - setSelectedBots, - ]) + }, [candidates, data.selectedBots.length, setSelectedBots]) @@ - const recommendedBots = useMemo(() => { - const candidates = mapAnswersToBots( - { - selectedCategory: data.selectedCategory, - selectedType: data.selectedType, - selectedSubType: data.selectedSubType, - }, - botsPreselection, - ) + const recommendedBots = useMemo(() => {Also applies to: 67-76
159-161: Use replace to prevent navigating back into the modal.Avoid returning to a closed onboarding dialog via back button.
Apply:
- props.close() - router.push('/auth/signup') + props.close() + router.replace('/auth/signup')
67-103: Optional: pre-index bots by name to reduce nested lookups.Current loop is O(Categories × Bots). Build a Map once for O(1) lookups per candidate.
Apply:
- const recommendedBots = useMemo(() => { - const candidates = ... - // Map to actual chatbot data from allCategories - return candidates - .map((candidate) => { - // Find the chatbot in allCategories - for (const category of (allCategories ?? [])) { - const bot = category.chatbots.find( - (cb) => cb.chatbot.name === candidate.chatbotName, - ) - if (bot) { - return { - id: String(bot.chatbot.chatbotId), - name: bot.chatbot.name, - avatar: bot.chatbot.avatar || undefined, - description: bot.chatbot.description || undefined, - priority: candidate.priority, - } - } - } - return null - }) - .filter((bot): bot is NonNullable<typeof bot> => bot !== null) - }, [data.selectedCategory, data.selectedType, data.selectedSubType, allCategories]) + const botIndex = useMemo(() => { + const m = new Map<string, { id: string; name: string; avatar?: string; description?: string }>() + for (const category of (allCategories ?? [])) { + for (const b of category.chatbots) { + m.set(b.chatbot.name, { + id: String(b.chatbot.chatbotId), + name: b.chatbot.name, + avatar: b.chatbot.avatar || undefined, + description: b.chatbot.description || undefined, + }) + } + } + return m + }, [allCategories]) + + const recommendedBots = useMemo(() => { + return candidates + .map((c) => { + const b = botIndex.get(c.chatbotName) + return b ? { ...b, priority: c.priority } : null + }) + .filter((b): b is NonNullable<typeof b> => !!b) + }, [candidates, botIndex])
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/pro-web/app/auth/signup/page.tsx(1 hunks)apps/pro-web/components/auth/signin-form.tsx(1 hunks)apps/pro-web/components/auth/signup-form.tsx(1 hunks)apps/pro-web/components/onboarding/steps/step-q4.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (7)
apps/{web,pro-web}/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
apps/{web,pro-web}/**/*.tsx: Declare React components with the function keyword
Name React components using PascalCase
Order component files: imports → constants → component → styled components → types/interfaces
Use functional components and hooks; type props with a TypeScript interface
Use regular function references (not inline arrows) for React event handlers to avoid extra re-renders
apps/{web,pro-web}/**/*.tsx: Use regular function references for event handlers instead of inline arrow functions in JSX
Declare React components with the function keyword (function ComponentName() {})
Use PascalCase for React component names
Order React component files: imports, constants, component, styled components, types/interfaces
Style components with Tailwind CSS utility classes
Files:
apps/pro-web/components/auth/signin-form.tsxapps/pro-web/app/auth/signup/page.tsxapps/pro-web/components/auth/signup-form.tsxapps/pro-web/components/onboarding/steps/step-q4.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Avoid default exports; prefer named exports
Use meaningful variable names; prefix booleans with is/has/does/should
Use interface for objects/classes; type for unions/tuples/aliases; enum for fixed sets; const for literals
Avoid any; prefer specific types
Leverage type inference where clear; annotate function params and return types
Prefer type assertions with 'as' over angle-bracket syntax
Use type guards to narrow types in conditionals
**/*.{ts,tsx}: Avoid default exports; prefer named exports
Use modern JavaScript features with TypeScript across the codebase
Use meaningful names; prefix booleans with is/has/does/should (e.g., isDisabled)
Receive an object and return an object (RORO) for functions interfacing with external services
Type definitions: use interface for objects/classes; type for unions/tuples/aliases; const for literals; enum for fixed sets
Avoid any; prefer specific types
Leverage type inference; omit explicit annotations when obvious
Add explicit type annotations for function parameters and return values
Prefer type assertions with as over angle-bracket syntax
Use type guards to narrow types within conditionals
Favor composition over inheritance in code structure
**/*.{ts,tsx}: Avoid default exports; prefer named exports
Prefer RORO (Receive an object, return an object) for function signatures, especially for external service interactions
Use interface for object shapes/classes; type for unions/tuples/aliases; const for literals; enum for fixed enumerations
Avoid using any; prefer precise types
Leverage type inference when clear; omit redundant annotations
Explicitly annotate function parameters and return types
Prefer type assertions with as over angle-bracket syntax
Use type guards to narrow types safely
Use meaningful variable names; prefix booleans with is/has/does/should
Favor composition over inheritance
Use lowercase dash-separated names for files and folders; use extensions like .config.ts, .test.ts, .context.tsx, .typ...
Files:
apps/pro-web/components/auth/signin-form.tsxapps/pro-web/app/auth/signup/page.tsxapps/pro-web/components/auth/signup-form.tsxapps/pro-web/components/onboarding/steps/step-q4.tsx
apps/{web,pro-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
apps/{web,pro-web}/**/*.{ts,tsx}: Use lowercase kebab-case for directories and filenames (components can omit extension)
Verify DOM operations and consider timing (RAF/delays) when manipulating the DOM in React
Use Tailwind CSS utility classes for styling React components
apps/{web,pro-web}/**/*.{ts,tsx}: Use TypeScript to define React props types (interfaces for props)
Use custom hooks (useMBChat, useThread, useSidebar, useModel) for domain-specific state and keep providers focused and composed hierarchically
Separate presentation from business logic and compose small components
Use hasura.service.ts for all GraphQL operations from UI layers
apps/{web,pro-web}/**/*.{ts,tsx}: Prefer Server Components; use the use client directive only when client-side features are required
Implement Nested Layouts using the App Router
Use Streaming and Suspense in Next.js 14/15 where appropriate
Follow Next.js file conventions as per documentation
Use IndexedDB for local caching to enable immediate UI updates
Files:
apps/pro-web/components/auth/signin-form.tsxapps/pro-web/app/auth/signup/page.tsxapps/pro-web/components/auth/signup-form.tsxapps/pro-web/components/onboarding/steps/step-q4.tsx
**/*
📄 CodeRabbit inference engine (CLAUDE.md)
**/*: Use lowercase with dash-separated directory and file names; use specific extensions: .config.ts, .test.ts, .context.tsx, .type.ts, .hook.ts; components may omit extension
Use Bun for package management and scripts instead of npm/yarn
Use Biome for formatting and linting via bun format-and-lint:fix; avoid Prettier/ESLint configs
Files:
apps/pro-web/components/auth/signin-form.tsxapps/pro-web/app/auth/signup/page.tsxapps/pro-web/components/auth/signup-form.tsxapps/pro-web/components/onboarding/steps/step-q4.tsx
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/*.tsx: Avoid inline arrow functions in JSX props; use stable function references for event handlers
Declare React components with the function keyword (functional components)
Use PascalCase for React component names
Use functional components and hooks instead of class components
Type component props with TypeScript interfaces
Files:
apps/pro-web/components/auth/signin-form.tsxapps/pro-web/app/auth/signup/page.tsxapps/pro-web/components/auth/signup-form.tsxapps/pro-web/components/onboarding/steps/step-q4.tsx
apps/{web,pro-web}/components/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Order component files: imports → constants → component → styled components → types/interfaces
Files:
apps/pro-web/components/auth/signin-form.tsxapps/pro-web/components/auth/signup-form.tsxapps/pro-web/components/onboarding/steps/step-q4.tsx
apps/{web,pro-web}/app/**
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
apps/{web,pro-web}/app/**: Prefer Next.js Server Components; use 'use client' only when necessary
Leverage Streaming and Suspense for responsiveness in Next.js 15
Follow Next.js file conventions in the App Router
apps/{web,pro-web}/app/**: Leverage Server Components by default; use the use client directive only when client-side features are needed
Implement Nested Layouts using the App Router
Use Streaming and Suspense features in Next.js 14/15 where appropriate
Follow Next.js file conventions for routing and layout in the App Router
Optimize data fetching: fetch on the server, fetch where needed, and use preload patterns to avoid waterfalls
Files:
apps/pro-web/app/auth/signup/page.tsx
🧬 Code graph analysis (1)
apps/pro-web/components/onboarding/steps/step-q4.tsx (7)
apps/pro-web/components/ui/wizard/index.tsx (1)
WizardStepProps(14-21)apps/pro-web/lib/hooks/use-pro-onboarding.tsx (1)
useProOnboarding(87-95)apps/pro-web/lib/hooks/use-workspace.tsx (1)
useWorkspace(716-722)apps/pro-web/lib/constants/onboarding/businesses.ts (1)
businesses(43-493)apps/pro-web/lib/helpers/onboarding/mapping.ts (1)
mapAnswersToBots(27-63)apps/pro-web/lib/constants/onboarding/bots-preselection.ts (1)
botsPreselection(16-6325)apps/pro-web/components/onboarding/bot-card.tsx (1)
BotCard(27-204)
🔇 Additional comments (2)
apps/pro-web/components/auth/signin-form.tsx (1)
52-53: No issues found - redirect to "/" is correctly implemented with server-side auth verification.The redirect to "/" is intentional and properly secured. The
(pro)/page.tsxcomponent performs server-side session validation viagetServerSession(), checking JWT validity before rendering the dashboard. Unauthenticated users are automatically redirected to/auth/signin, and authenticated users see the dashboard—properly differentiating new and returning users at the server level. The comment "Proceed to the dashboard" accurately describes the destination route.apps/pro-web/components/onboarding/steps/step-q4.tsx (1)
167-241: Overall structure, accessibility, and state wiring look solid.Header/footer semantics, BotCard accessibility (aria-pressed), and wizard integration are well executed. Nice work.
AndlerRL
left a comment
AndlerRL
left a comment
There was a problem hiding this comment.
LGTM! Great job, Derian 👍 great feature implementation and thanks for taking care of the details and feedbacks. Definetly we need to work on some chatbot names, lol. The design is consistent so as the user flow and implementation looks right.
I noticed only a detail regarding DOM manipulation but it's OK to handle it in the new PR. Merging now!
| {/* Body with internal scroll */} | ||
| <div className="flex-1 min-h-0 overflow-y-auto p-4 md:p-8"> | ||
| <form onSubmit={handleSubmit(onSubmit)}> | ||
| <div className="max-w-xl mx-auto"> | ||
| <div className="rounded-2xl bg-white dark:bg-zinc-900 border shadow-sm"> | ||
| <div className="p-6 md:p-8 space-y-8"> | ||
| {/* Icon badge */} | ||
| <div className="w-fit mx-auto"> | ||
| <div | ||
| className="size-16 rounded-2xl border border-input bg-muted/40 dark:bg-zinc-800 | ||
| ring-1 ring-inset ring-black/5 dark:ring-white/5 | ||
| flex items-center justify-center" | ||
| > | ||
| <Building2 className="h-7 w-7 text-gray-700 dark:text-gray-300" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Label + input */} | ||
| <div className="space-y-2"> | ||
| <Label htmlFor="org-name">Organization Name</Label> | ||
| <Input | ||
| id="org-name" | ||
| {...register('name')} | ||
| placeholder="e.g., Acme Labs" | ||
| aria-invalid={!!nameError} | ||
| /> | ||
| {nameError && ( | ||
| <p role="alert" className="text-sm text-destructive"> | ||
| {nameError.message} | ||
| </p> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </div> |
There was a problem hiding this comment.
This is a good point. By having the type="submit" with and id that matches with the form element, the DOM would attempt to find the nearest form element that this submit button has and verify if there is a form with the button ID to execute the onSubmit event.
We can proceed to do this improvement to reduce the number of active events however, we can take this into another PR 👍
* fix: increase execution time - image generation
* chore: increase maxDuration
* fix: attachment upload management (#517)
* fix: attachment upload management
* chore: clean up
* perf(impr): log failed chunks
* feat: attachment upt cron n public browse tweaks (#520)
* feat: reresh attch cron + user attach async dep upt
* fix: load more missing props
* fix: attachment expires typeof sql value
* fix: public browse search + load more deps
* perf(impr): trnx support in attch link refresh cron
* [masterbots.ai] feat: stripe subscription plans and promocode support (#513)
* fix whirlpool animation
* feat: add validation for promo codes and subscriptions
* fix: initital coderabbitai recomendations
* chore: add improve to subscription flow
* chore: add card switcher
* chore: impr pro card
* chore: fix custom class
* chore: add free card newcolor
* [masterbots.ai] feat: thread context file (#519)
* feat(wip): thread context file
* fix: typo
* fix: attachment prop dep
* fix: user attachments upt concurrency
* feat(wip): thread context focus on open
* fix: content editable selection on first render
* fix: new line after enabling content editable
* fix: paste text in editable content + paste context
* fix: paste context + show attachment text content in public
* fix: show continue message cta in cutoff content trigger
* fix: contentEditable text encoding
* fix: hook race condition build
* [masterbots.ai] fix: bug fix and improvements (#523)
* fix whirlpool animation
* feat: add validation for promo codes and subscriptions
* fix: initital coderabbitai recomendations
* chore: add improve to subscription flow
* chore: add card switcher
* chore: impr pro card
* chore: fix custom class
* chore: add free card newcolor
* chore: add improvements and medium level bug fix
* feat: add example question modal
* chore: fix biome format
* chore: add modal and botcard redesing
* chore: fix sizes
* chore: enable example questions feat flag
* fix(impr): onboarding card responsiveness + space & bg style
---------
Co-authored-by: Roberto 'Andler' Lucas <contact@andler.dev>
* chore: enable subscription page navigation
* fix: attachment css + optimistic attch upt (#528)
* fix: attachment css + optimistic attch upt
* fix: messageAttachment ref assig loc
* chore: attch cnt read for dev
* [masterbots.ai] feat: onboarding and ui ux tweaks (#526)
* chore: fix color and new card style
* chore: restore white line
* fix: flicker + include new images
* chore: fix regresion issues
* chore: biome corrections
* fix: layout tweaks + onboard card render
* fix: tailwind class
* fix: tailwind class
---------
Co-authored-by: Roberto 'Andler' Lucas <contact@andler.dev>
* [masterbots.ai] chore(fix): change logic flow (#531)
* perf: dynamic imports (#530)
* perf(wip): dynamic imports
* chore(fix): rm static skeleton
* perf: dynamic imports in chat routes
* fix: tailwind class
* fix: persistent route (#529)
* fix: add persistent route build
* chore: remove comment section
* feat: phase 4, topics & chatbot order fields + new & upt seeds (#522)
* feat(wip): phase 4, topics + cat & chatbot order fields
* chore: add order field in gen types
* chore(wip): upt init config seed, phase 4, category order upt + wip chatbot new descriptions
* style: format and lint
* chore: upt chatbot new descriptions + new bots and prompts
* chore: upt chatbot prompt junction seeds inserts
* chore: upt chatbot categories juntion seeds
* chore: upt chatbots & relationships
* chore: upt chatbots & relationships
* fix: order field permissions + gen
* fix: onboarding chatbot description
* [masterbots.ai] fix: thread popup for threadquestion page (#516)
* update
* fix: update
* update
* update
* update
* update
* fix: thread style
* fix: thread style
* fix: added popup to threadQuestionPage
* fix: update
* fix: sub thread slug update on url:
* fix: update thread question slug navigation
* fix: update thread question slug navigation
* fix: update thread question slug navigation
* fix: update
* fix: update thread path
* fix: update
* fix: update package data
* fix: use proper error handling component on server
* fix: update
* fix: make the selected thread in popup open by the default
* fix: focus the last sub-thread when know sub-thread slug is on the pathname
* fix: popup flickering
* fix: handle bot page routing and threadquestion page
* fix: disable link on the bot view page
* fix: question not displaying
* fix: question not displaying
* fix: chatbot page loading more unrelated threads
---------
Co-authored-by: Roberto 'Andler' Lucas <contact@andler.dev>
* [hasura] fix(restore): is_pro + pro-exclusive chatbot table params
* revert: "fix: persistent route (#529)" (#533)
This reverts commit 5a464ab13a01165450fe602f3ec7964e43b14921.
* chore: upt canonical domains (#532)
* chore: upt canonical domains
* fix: getRouteType
* fix: missing canonical domains and topics
* fix: category slug
* fix: hydration warns + continue thread upt after start
* fix: upt init config chatbot inserts
* chore: upt biblebot expertise + chefbot n growbot descr puntuation
* fix: coderabbitai observation
* [materbots.ai] perf: impr onboarding cards ui (#535)
* [masterbots.ai] chore(style): logo updates (#525)
* update
* fix: update
* update
* update
* update
* update
* feat: import logos
* feat: added logo to app header
* feat: app logo
* chore: user page text
* fix: update
* feat: added bg to auth pages
* fix: update
* fix: wait for page to mount to load custom logos
* fix: update
* fix: update
* fix: update
* fix: update theme to use resolvedTheme instead
* fix: update assets
---------
Co-authored-by: Roberto 'Andler' Lucas <contact@andler.dev>
* perf(impr): overall layout css spacing at mob + footer mob loc
* fix: thread search context (#534)
* update
* fix: update
* update
* update
* update
* update
* fix: thread fetching render on search
* fix: thread fetching render on search
* fix: rm search input from botpage welcome view
* fix: introduce global search component
* fix: clean up browe(public) search
* fix: update
* fix: search from db on personal pages instead of the eveilable threads
* fix: search update
* fix: clean up
* chore: upt gemini models ref, web (#538)
* [masterbots.ai] feat: dashboard modal (#536)
* chore:add dashboard modal
* chore: add dashboard to public
* chore:upt design
* chore: add new flow
* chore: build issue + new ui
* chore: fix local storage - user pref
* fix: mobile chat panel a11y
* fix: mobile chat panel a11y
---------
Co-authored-by: Roberto 'Andler' Lucas <contact@andler.dev>
* chore: gpt reasoning model upt (#543)
* fix: new gpt 5 models selection & default
* fix: profile layout render
* [masterbots.ai] feat: impr sidebar nav onboarding (#540)
* chore:add dashboard modal
* chore: add dashboard to public
* chore:upt design
* chore: add new flow
* chore: build issue + new ui
* chore: fix local storage - user pref
* feat: sidebar nav onboarding
* chore: fix build
* chore: upt local storage conditions and debug
* fix: add persistent localstorage selection
* feat: add consistent selection
* fix: onboarding display logic
---------
Co-authored-by: brandonfernandezf <brandon@bitcash.org>
Co-authored-by: bran18 <andreyfdez18@gmail.com>
Co-authored-by: Brandon Fernández <31634868+Bran18@users.noreply.github.com>
* fix: create response stream object model temperature + impr output prompt
* chore: upt default llm
* chore: upt canonical domains + christbot, biblebot and new bot updated
* chore: upt core app folder name
* [pro-web] feat: masterbots pro, working documents (#423)
* wip: pro version layout
* perf(impr): pro navigation + layout
* feat: hasura chatbot pro properties + web TS formatting
* revert: showVerificationNotice condition at sign-up form
* fix: subcategory missing fields
* fix: thread + msg init seeds
* feat(pro): implement specialized pro chat interface components
- Add Pro-specific message, panel and action components
- Create Pro extended layout with improved UI
- Update workspace hooks for Pro interface support
- Add tabs component and markdown utilities
- Update package dependencies
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* feat(workspace): integrate workspace with chat UI
- Display workspace editor above chat input when workspace is active
- Keep chat input available for workspace mode to handle queries
- Update placeholder text to better reflect dual-purpose usage
- Remove separate workspace input component to avoid redundancy
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* feat(workspace): improve workspace integration with chat UI
- Extend workspace area to fill available height
- Standardize input handling by using PromptForm for both modes
- Add conditional logic to handle different input behaviors based on mode
- Improve placeholder text for better user context
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* feat(workspace): always show UI controls with toolbar and workspace
- Display expertise, reasoning, web search and workspace toggle buttons regardless of workspace mode
- Keep workspace toggle button in the main toolbar with other feature toggles
- Keep main right side controls visible regardless of mode
- Only conditionally show chat-specific buttons when in chat mode
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* fix: prevent maximum update depth exceeded in workspace component
- Enhanced useEffect hooks with better null checking and early returns
- Added conditionals to skip unnecessary state updates
- Fixed cascading dropdown behavior for Organization→Department→Project→Document
- Added value comparison in onChange handlers to prevent update loops
- Improved setDocumentContent to only update when values change
- Enhanced logging for better debugging
* fix: resolve maximum update depth exceeded error
- Fixed circular dependency in React hooks
- Added memoization for document options to prevent unnecessary re-renders
- Optimized useEffect hooks with proper dependency arrays
- Added proper state updates batching with requestAnimationFrame
- Improved state synchronization between components
- Added checks to prevent unnecessary state changes
* feat: improved document selector empty state
- Added '---' placeholder for document selector when no documents are available
- Enhanced document options handling in chat-panel-pro.tsx
- Added better disabled state checks for empty document lists
- Improved validation of document selection to handle edge cases
* fix: document selector displaying blank
- Fixed document selector initialization issue
- Added proper handling of null filteredDocumentList
- Added document dropdown state synchronization
- Added extra diagnostics for document selection
- Improved reliability of document type switching
* fix: document selection not working for Campaign A
- Added force re-render in document select dropdown with key
- Fixed document options memoization to create new references
- Added deep copy of document sources to prevent reference issues
- Enhanced debugging to trace document options availability
- Added special handling for Campaign A document options
- Improved option type handling and selection state updates
* fix: text document dropdown not working
- Fixed text document dropdown selection to match spreadsheet functionality
- Added deep copy with JSON stringify/parse for consistent references
- Added force re-render mechanism to ensure dropdown updates
- Enhanced document type selection to handle all document types consistently
- Improved debugging with render IDs to trace document selection issues
- Fixed reference handling for document type changes
* feat: integrate Yoopta rich text editor with context-based state management
- Add useRichEditor state and toggleRichEditor function to workspace context
- Update workspace-content to use context-based editor preference
- Create placeholder implementation for Yoopta editor
- Add documentation with installation instructions
The integration persists user preferences for the rich editor across
sessions and provides an intuitive, minimalist toggle UI.
* fix: prevent runtime errors in thread list and rich text editor
* Revert "fix: prevent runtime errors in thread list and rich text editor"
This reverts commit e61341d875f4f5fcbc05452bdb86de9fd20799b3.
* Revert "feat: integrate Yoopta rich text editor with context-based state management"
This reverts commit 0a79633458e6682bb1cc99ed8f0a6419b3eecba7.
* chore: add context-attachment component
* fix: workspace prompt exe w meta prompt
* chore: sync thread & msgs seeds
* chore: sync thread & msgs seeds
* fix: render ai request to selected working document
* chore(impr): add claude code monorepo ctx
* wip: save content live at cursor pos
* wip: working document live upt
* fix: pro infinite loop in output
* fix: section doc expand
* feat(wip): working document, fix init doc obj
* fix: missing pkg dep
* fix: pro user message
* fix: pro user message
* fix: workspace initial messages
* feat: edit, rewrite, expand workspace ctas
* fix: react render hoisting
* perf: impr project doc nav + saving working doc state in server cache + thread linking
* fix: web build
* feat(wip): thread pop-up chat connect workspace
* feat(wip): chat workspace connection
* fix(wip): workspace ui + chat connect w workspace
* fix: connect workspace chat w/mb chat
* fix: breadcrumb nav consistency w/state
* fix: breadcrumb nav consistency w/state
* fix: workspace doc thread creation + save doc version
* feat(impr): thread popup layout
---------
Co-authored-by: Jun Dam <jun@bitcash.org>
Co-authored-by: Claude <noreply@anthropic.com>
* [web] feat: refactor subscription flow (#549)
* chore: refactor subscription flow
* chore: fix import
* chore: add recent payment
* chore: revert condition
---------
Co-authored-by: Roberto 'Andler' Lucas <contact@andler.dev>
* fix: new thread pop-up ui aligment
* [pro-web] fix: pro workspace ui state & navigation (#552)
* fix: payment api missing routes
* fix: breadcrumb connect with thread documents
* fix: fetch missing docuemnts
* fix: document select & sync remote w local
* fix: document select & sync remote w local
* fix: header breadcrumb navigation + prompt + document creation impr
* fix: tailwindcss conflict
* fix: ts typo
* [pro-web] refactor: ai config, default gpt-5-mini, update routing and workspace (#554)
* fix: active section focus content
* fix: connect workspace prompt to chat panel and ctas
* fix(wip): attach new content to working document in workspace mode
* fix: implement preserved content structure for streaming LLM updates
- Add refs to preserve before/after selection content during streaming updates
- Use validStart position as anchor point for stable text replacement
- Ensure content structure is preserved across multiple LLM iterations
- Reset preserved content refs at start and end of operations
- Apply same logic to both section-based and full document editing modes
* fix: generated ai content in correct working document pos
* fix(wip): working document stream updates + preview section changes
* fix(wip): working document stream updates + preview section changes
* fix: del component unused prop
* fix: followingImages prompt loc in use-mb-chat
* fix: generated-imgage loader
* fix: following img prompt data
* fix: following img prompt data
* perf(impr): following img prompt
* fix: document update padEnd string in LLM responses
* fix: llm document stream results (#557)
* fix: llm document stream results
* fix: debounce save full source
* fix(pro-web): add missing onboarding logic
* [web] feat: upt dynamic og (#545)
* chore(wip): upt dynamic og
* fix: og image render issues
* chore: refactor og version
* chore: add suggestion
* chore: fix build
* chore: remove extra fallback
* chore: fix
---------
Co-authored-by: bran18 <andreyfdez18@gmail.com>
Co-authored-by: Brandon Fernández <31634868+Bran18@users.noreply.github.com>
* [pro-web] fix: refactor doc sourcing; add category dashboard; update hooks & header (#560)
* fix(wip): reactive doc breadcrumb header nav
* fix: breadcrumb navigation with active thread n user docs
* fix: hook arg dep
* fix(wip): build user breadcrumb nav from remote db
* feat: edit section prompt cta + auto-scroll in full source + delete doc section
* perf(impr): copilot instructions
* perf(impr): workspace document prompts
* fix: createWorkspaceMetaPrompt args
* fix(feat): add cron refresh workspace docs api route + add to active workspace doc cta
* fix: init config seeds statement typos
* [web/pro-web] feat: impr user profile and preferences (#561)
* Remove .env file
* Remove .env file
* Remove .env file
* update
* fix: update
* update
* update
* fix: rm breadcrumb on profile page
* fix: arrow pointed right for closed/collapsed and arrow pointed down for open/expanded
* feat: added user profile to preference
* fix: update
* fix: server pages restrictions
* fix: verify email ui
* feat: endpoint route for verify token
* feat: verify email setup
* fix: updating session and validate username
* fix: username update
* fix: prefrences updates
* feat: added theme and font-size setting
* feat: added theme and font-size setting
* fix: merged develop
* fix: update
* fix: update
* fix: google language translation updates
* fix: app clean up
* fix: update anon permision to see Isverified column
* fix: lint update
* fix: username update func
* fix: rm bredcrum on pref page
* fix: font icons
* fix: update
* fix: build error
* fix: error build
* fix: error build
* fix: rem master.ai folder
* fix: added isUsernameTaken verifycation to username on auth
* fix: add ts def
* fix: update
* fix: update font size in gloabl.css
---------
Co-authored-by: Jun Dam <jun@100xinvestors.com>
Co-authored-by: Roberto Lucas <andler@bitcash.org>
Co-authored-by: Roberto 'Andler' Lucas <contact@andler.dev>
* fix: thread questions's slug (chat & bot) (#562)
* fix: chat threadquestion showing cinema
* fix: bot page thread question url
* [pro-web] fix: switch to org routing; impr workspace file mgmt + refresh signed links (#563)
* fix: get user remote documents + refresh workspace document cron
* fix(feat): add cron refresh workspace docs api route + add to active workspace doc cta
* fix: init config seeds statement typos
* fix: providers render + onboarding card & sidebar ui tweaks
* fix: refresh workspace document old versions + wip pro flag in threads
* chore: sync latest changes with pro web
* feat: add is_pro flag on mb threads
* fix(pro): import typo
* fix(pro-web): og-image version
* fix(pro-web): upt route type conditions
* fix: missing ts def
* fix(pro-web): typo
* fix: import typo
* [pro-web] fix: workspace mode ui tweak + doc tree render (#565)
* fix: workspace mode ui tweak + doc tree render
* fix: tailwindcss contradicting classname
* chore: route /c clean up in pro + lazy load & loader in pro
* chore: upt prompt agent files (#566)
* [pro-web] fix: workspace chat state reset and thread creation logic (#567)
* fix: workspace chat state reset and thread creation logic
- Add error handling to reset workspaceProcessingState when errors occur
- Fix state cleanup to handle both successful and failed operations
- Remove premature thread creation from document save function
- Allow thread creation to happen naturally through use-mb-chat flow
- Ensure CTAs (edit/rewrite/expand) are re-enabled after errors or success
This fixes the issue where edit/rewrite/expand CTAs remained disabled
after errors and resolves thread creation inconsistencies in workspace mode.
Co-Authored-By: Andler Lucas <andre.rlucas@outlook.com>
* fix: handle undefined threadSlug in workspace document save
- Add early return when no thread exists to save document locally only
- Save to IndexedDB when thread hasn't been created yet
- Prevents TypeScript error from passing undefined to uploadWorkspaceDocument
- Thread will be created when first message is sent via use-mb-chat flow
Co-Authored-By: Andler Lucas <andre.rlucas@outlook.com>
* feat: add complete workspace document metadata when creating threads
- Include organization, department, URL, content, size, versions, expires, and messageIds
- Update threadSlug after thread is created to maintain consistency
- Ensures documents attached to newly created threads have full metadata
- Matches the comprehensive metadata structure used in saveDocument function
Co-Authored-By: Andler Lucas <andre.rlucas@outlook.com>
* feat: upload workspace documents to bucket when creating threads
- Upload documents to bucket using uploadWorkspaceDocument API
- Get proper URLs and metadata from bucket upload
- Fallback to original document data if upload fails
- Ensures workspace documents have same treatment as attachments
- Documents now get bucket URLs, checksums, and versioning like manual saves
Co-Authored-By: Andler Lucas <andre.rlucas@outlook.com>
* fix: resolve TypeScript type mismatch for workspace document versions
- Initialize uploadedDocuments as empty WorkspaceDocumentMetadata array
- Explicitly cast upload result to WorkspaceDocumentMetadata type
- Cast fallback documents with proper versions type
- Fixes Vercel build error with versions field type incompatibility
Co-Authored-By: Andler Lucas <andre.rlucas@outlook.com>
* refactor: use API route for document uploads and optimize upload logic
- Replace direct uploadWorkspaceDocument call with /api/documents/upload
- Only upload documents when new or content has changed
- Check existing documents in thread metadata before uploading
- Merge messageIds when document already exists
- Use fetch API for consistency with other API calls
- Remove uploadWorkspaceDocument import (unused after refactor)
Co-Authored-By: Andler Lucas <andre.rlucas@outlook.com>
* chore: remove accidentally committed bin/task binary
- Remove 18MB taskfile binary that was accidentally committed
- Add bin/task to .gitignore to prevent future commits
- Taskfile binary should be installed per-environment, not versioned
Co-Authored-By: Andler Lucas <andre.rlucas@outlook.com>
* fix: move document upload outside throttle for immediate execution
- Move workspace document upload outside throttled block
- Upload happens synchronously before thread metadata update
- Add detailed logging for upload tracking
- Capture thread slug before any async operations
- Ensures documents are uploaded and attached to thread immediately
- Fixes draft status not clearing after first message
Co-Authored-By: Andler Lucas <andre.rlucas@outlook.com>
* fix: delay workspace state cleanup to allow onFinish to complete
- Add 500ms delay before cleaning up workspace state
- Ensures onFinish in use-mb-chat has access to workspace values
- Prevents newDocuments array from being empty due to premature state reset
- Fixes document upload not triggering due to guard conditions
Co-Authored-By: Andler Lucas <andre.rlucas@outlook.com>
* docs: add next session implementation plan for workspace document upload fix
- Documents detailed analysis of the architectural issue
- Outlines correct flow: workspace hooks should handle uploads, not use-mb-chat
- Provides step-by-step implementation plan for next session
- Reverted incorrect changes to use-mb-chat.tsx
- Kept correct fixes for CTA reset and workspace state cleanup
Co-Authored-By: Andler Lucas <andre.rlucas@outlook.com>
* fix: improve workspace error handling and add document upload on thread creation
- Enhanced error handling to immediately reset state and show user feedback
- Added thread creation detection to automatically upload workspace documents
- Documents are now properly associated with threads when first message is sent
- CTAs (edit, rewrite, expand) are properly re-enabled after errors
- Follows correct architecture: workspace layer handles document upload
- Prevents Draft badge persistence by ensuring proper metadata updates
Co-Authored-By: Andler Lucas <andre.rlucas@outlook.com>
* chore: remove session planning document
Co-Authored-By: Andler Lucas <andre.rlucas@outlook.com>
* refactor: remove workspace document upload logic from use-mb-chat.tsx
- Remove workspace document upload logic from use-mb-chat.tsx
- Keep only the proper implementation in use-workspace-chat.tsx
- Follows correct architecture: workspace layer handles document lifecycle
- use-mb-chat.tsx restored to focus only on general chat functionality
- Prevents duplicate upload logic and timing issues
Co-Authored-By: Andler Lucas <andre.rlucas@outlook.com>
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Andler Lucas <andre.rlucas@outlook.com>
* [pro-web] feat: add reusable popup for create new organizations, departments, and projects (#569)
* feat(pro-web): add CreateEntityAlert component to replace window.prompt
- Create reusable CreateEntityAlert component with shadcn/ui AlertDialog
- Support organization, department, and project creation
- Add entity-specific icons (Building2, FolderTree, Briefcase)
- Include informative hints below input field
- Replace window.prompt calls in header.tsx with dialog
- Maintain existing entity creation logic and state updates
- Add input validation and keyboard accessibility (Enter/ESC)
- Follow DocumentCreateAlert styling patterns
Requested by: @derianrddev
Link to Devin run: https://app.devin.ai/sessions/f76bee4bc20040208c2b7ad39a95ba3e
Co-Authored-By: dmrodriguez2000@gmail.com <dmrodriguez2000@gmail.com>
* refactor(pro-web): use react-hook-form with Zod validation in CreateEntityAlert
- Install react-hook-form@7.63.0 and @hookform/resolvers@5.2.2
- Replace useState/useRef with useForm hook
- Add Zod schema: z.string().trim().min(1).max(64)
- Configure form with zodResolver and mode: 'onChange'
- Disable Create button when !formState.isValid || formState.isSubmitting
- Wrap form fields in <form> element with handleSubmit
- Maintain all existing UI elements and accessibility features
- Keep icon, title, hint text, and keyboard shortcuts (Enter/ESC)
Requested by: @derianrddev
Co-Authored-By: dmrodriguez2000@gmail.com <dmrodriguez2000@gmail.com>
* feat(pro-web): add error validation display in CreateEntityAlert
- Add custom error messages to Zod schema (min/max)
- Display validation errors below input in red with role='alert'
- Add aria-invalid attribute to Input when errors exist
- Add aria-describedby linking to hint and error message IDs
- Maintain Create button disabled state based on form validity
- Improve accessibility for screen readers
Requested by: @derianrddev
Co-Authored-By: dmrodriguez2000@gmail.com <dmrodriguez2000@gmail.com>
* feat(pro-web): replace CreateEntityAlert with button component and remove Enter key handling
* refactor(pro-web): add description to CreateEntityAlert and clean up code
* refactor(pro-web): improve comments for entity creation handling in Header component
* feat(pro-web): enhance DocumentCrumb and Crumb components with icon for new item action
* fix(pro-web): use requestAnimationFrame for setting focus on name input in CreateEntityAlert
* refactor(pro-web): rename DocumentCreateAlert component and file for consistency
* feat(pro-web): improve CreateEntityAlert UX and consistency
- Add loading state with spinner and 'Creating...' text for better feedback
- Rename 'open' prop to 'isOpen' for consistency across alert components
- Disable cancel button during submission to prevent conflicts
- Import Loader2 icon from lucide-react
- Add aria-hidden attribute to spinner for accessibility
- Update header.tsx to use renamed prop
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: dmrodriguez2000@gmail.com <dmrodriguez2000@gmail.com>
* [pro-web] refactor: move document type filter outside breadcrumb as separate filter (#570)
* feat(pro-web): add standalone DocumentTypeFilter component
Add dedicated document type filter component with icon-based
dropdown for filtering documents by type (all, text, image,
spreadsheet)
* refactor(pro-web): remove DocumentTypeCrumb component from breadcrumb
Remove DocumentTypeCrumb component as document type filtering
is now handled by a separate DocumentTypeFilter component
* refactor(pro-web): replace DocumentTypeCrumb with DocumentTypeFilter component
Move document type filter from breadcrumb to separate header
section for better UX and UI organization
* fix(pro-web): improve documentList merging logic across document types
Update documentList computation to properly merge text, image,
and spreadsheet documents per project
* refactor(pro-web): improve header responsive layout and accessibility
- Optimize breadcrumb spacing for medium screens (md breakpoint)
- Make DocumentTypeFilter compact showing icon-only on md/lg
- Add aria-hidden attributes for better accessibility
- Add useMemo optimization for activeTypeData
- Rename DocType to DocumentType for consistency
- Adjust header margins and gaps for responsive behavior
- Add title attribute to filter button for tooltip support
* fix(pro-web): sync documentType state with filter changes
Keep documentType state in sync with activeDocumentType when user
changes the document type filter to ensure consistent state across
the header component
* refactor(pro-web): separate document type state for filter and dialog
Rename documentType to alertDocumentType to clearly separate the
document creation dialog state from the filter state. Set alert
type from active filter when opening new document dialog
* fix(pro-web): add activeDocumentType to persistence dependencies
Ensure document type filter ('all', 'text', 'image', 'spreadsheet')
is properly persisted when changed by adding it to the useEffect
dependencies that trigger localStorage and server state sync.
* [pro-web] perf(wip): optimize workspace editor performance (#568)
* perf(pro-web): optimize workspace editor performance
- Remove expensive parseMarkdownSections() on every keystroke in Full Source tab
- Defer section parsing until view switching for better typing responsiveness
- Increase API debounce from 125ms to 2s with 5s maxWait for workspace/state
- Add dynamic debounce times based on AI generation state (1s-3s vs 400ms-1s)
- Add proper typing state tracking to prevent external updates during typing
Fixes:
- Full Source tab typing latency and missed input events
- Document Sections tab becoming unresponsive after AI actions
- Excessive api/workspace/state calls during streaming generation
- Browser crashes due to rapid updates during AI generation
Performance improvements:
- Full Source tab now has smooth, responsive typing
- Reduced API calls during AI streaming by ~15x
- Better handling of concurrent updates during generation
Co-Authored-By: Andler Lucas <andre.rlucas@outlook.com>
* fix(pro-web): prevent jarring section updates during typing and AI generation
- Skip section re-parsing during active user typing
- Skip section re-parsing during AI generation (workspaceProcessingState !== 'idle')
- Add debounced section parsing (500ms) for non-active updates
- Trigger section parse after user stops typing (1s delay)
- Trigger section parse after AI streaming completes
- Add workspaceProcessingState to parsing effect dependencies
This prevents the 'crazy' section tree updates during:
1. AI streaming - sections won't flicker while AI generates content
2. User typing - new headings won't create sections immediately
Sections will update smoothly:
- 1 second after user stops typing
- After AI generation completes
- When switching views
Co-Authored-By: Andler Lucas <andre.rlucas@outlook.com>
* fix(pro-web): resolve stale closure issue in section parsing timeouts
- Add fullMarkdownRef and activeSectionRef to avoid stale closures
- Update markUserTyping to use refs for latest values
- Update handleStreamingComplete to use refs for latest values
- Remove fullMarkdown/activeSection from callback dependencies
- Keep refs synced with state via useEffect
This fixes the regression where:
1. User edits content
2. Timeout fires with stale fullMarkdown value
3. Old content overwrites new changes
4. Second edit works because timeout now has correct value
Now timeouts always read the latest values from refs.
Co-Authored-By: Andler Lucas <andre.rlucas@outlook.com>
* fix: workspace content scrolling wrapper
* perf(wip): fix ai content generate section upt
* fix: textarea workspace typing
* fix: workspace section item cta index in ui tree
* fix(wip): workspace text gen
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Andler Lucas <andre.rlucas@outlook.com>
Co-authored-by: Roberto 'Andler' Lucas <contact@andler.dev>
* [web/pro-web] fix: enable individual chatbot deselection and improve sidebar filter checkbox behavior (#572)
* fix(sidebar): implement indeterminate checkbox states for category filtering
- Add indeterminate state for category checkboxes (partial bot selection)
- Show categories when any bot is selected, not just when fully selected
- Simplify toggleChatbotSelection by removing auto-category logic
- Add memoized allBotsSelected and someBotsSelected calculations
- Update filteredCategories to check hasSomeBotsSelected condition
- Standardize urlBuilders parameter formatting
- Apply changes to both web and pro-web apps
* feat(sidebar): add custom checkbox config with indeterminate icon support
* feat(sidebar): persist chatbot selections to localStorage
- Add chatbot storage support to useCategorySelections hook
- Sync selectedChatbots state with localStorage in both apps
- Update category dashboard to preserve existing chatbot selections
- Implement incremental chatbot selection (add/remove instead of replace)
- Add deep comparison to prevent unnecessary localStorage writes
- Update onboarding section to handle chatbot state properly
- Apply changes to both web and pro-web apps for consistency
* fix(sidebar): auto-sync category selection based on chatbot selections
- Automatically update selectedCategories when chatbots are selected/deselected
- Include category in selection if at least one of its bots is selected
- Add categories dependency to chatbot sync effect
- Ensure category state stays in sync with chatbot selections
- Apply to both web and pro-web apps
* refactor(sidebar): centralize category/chatbot selection hooks in mb-lib
Move useLocalStorage, useCategorySelections to mb-lib
Extract filtering, initialization and sync hooks
Add array utility functions for normalized comparisons
Update imports in both web and pro-web apps
* refactor(mb-lib): migrate useSyncChatbotsToStorage to lodash utilities
Replace arraysHaveSameElements() with lodash isEqual()
Replace normalizeArray() with lodash sortBy() + uniq() for normalization and deduplication
Remove obsolete array-utils.ts
* fix: rm legacy seeds from main seeds
* [pro-web] feat: add pro onboarding ui (#574)
* feat(pro-web): add Pro Onboarding components (DialogWizard + StepQ1)
• Create ProOnboarding container that mounts DialogWizard with steps array
• Implement StepQ1 with Accordion sections (Local/Service/Online/Other) and selectable pill Buttons
• Define types (Group, GroupItem) and provide static groups dataset with specialties
• Add Lucide icon map + getIcon helper for each business type
• Include sticky step header/footer and scrollable content area
• Add keyboard accessibility (Enter/Space) and aria-pressed state handling
• Open all accordions by default; single-select state with Continue and Skip actions
* refactor(pro-web): move Education Services under Service Business and keep only one Crypto card
* feat(pro-web): create Bot Preselection array (rules + priorities)
• Define base types (BotRule, BotEntry) and static botsPreselection dataset
• Per-bot rules with OR lists (category/type/subtype) and priority resolution
• Route business profiles → deterministic shortlist of suggested bots
• Declarative, maintainable config (add/edit without coupled logic)
* feat(pro-web): add Pro Onboarding context + StepQ2 (subtype picker)
• Introduce context/provider + hook (selectedType, selectedSubType; setters)
• Implement StepQ2: load subTypes from businesses by selectedType
• Render pills grid; keyboard a11y (Enter/Space) + aria-pressed
• Add pills header with icon from icon map + selected type label
• General refactor: clarified variable names across steps
• Extract businesses and icon map constants to a separate file
• Update StepQ1 to persist selectedType and log selection
* feat(pro-web): add StepQ3 component and integrate into onboarding flow
• Create StepQ3 component to collect organization name (zod + react-hook-form)
• Extend ProOnboardingData with orgName and add setOrgName setter
• Wire StepQ3 into wizard flow
* feat(pro-web): auto-advance on pill/card selection (Q1/Q2) and remove continue
* fix(pro-web): update navigation methods in StepQ1 and StepQ3 components
* feat(pro-web): add progress bar to DialogWizard for step tracking
* feat(pro-web): enhance onboarding business types with structured subtypes and update context state
- Refactored business subtypes in onboarding constants to use structured objects with id and label.
- Updated the ProOnboardingData interface to include selectedCategory.
- Added setSelectedCategory function to manage selected category state in onboarding context.
* feat(pro-web): add Avatar and HoverCard components from shadcn/ui
* feat(pro-web): add StepQ4 component and improve onboarding flow
- Introduced BotCard component for displaying chatbots with selection functionality.
- Updated ProOnboarding to include a new step (StepQ4) for selecting recommended chatbots.
- Modified StepQ1 to change default selection logic for business items.
- Enhanced StepQ3 to handle navigation more intuitively based on current step.
- Updated bots preselection logic to simplify business types related to crypto.
- Refactored businesses data structure for consistency in IDs.
- Created mapping utility to match user answers with recommended bots.
- Extended useProOnboarding hook to manage selected bots state.
* feat(pro-web): refactor onboarding components and replace OnboardingSection with ProOnboarding
* feat(pro-web): enhance StepQ4 to save selected chatbots, categories and org name to LocalStorage
* feat(pro-web): replace HoverCard with Tooltip for bot name display in BotCard component
* fix(pro-web): adjust layout and styling in StepQ2 component for improved user experience
* feat(pro-web): enhance BotCard component with improved tooltip functionality and markdown rendering
* feat(pro-web): update SignUpPage message and redirect to signup after closing StepQ4 wizard
* docs: add comprehensive hasura readme with seed debugging and onboarding (#576)
* Initial plan
* Add comprehensive Hasura README with seed debugging and explanations
Co-authored-by: AndlerRL <35474730+AndlerRL@users.noreply.github.com>
---------
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: AndlerRL <35474730+AndlerRL@users.noreply.github.com>
* fix: Sep/22nd release merge regressions and issues (#571)
* fix: chat threadquestion showing cinema
* fix: bot page thread question url
* fix: threads not found message
* fix(pro): threads not found message
* fix: restored hero bg banner
* fix: update
* fix: added isverified colum perm
* fix: update
* fix: theme toggle resize
* fix: added select all category
* fix: update
* fix: select all fix
* revert: hasura latest thread table permissions
---------
Co-authored-by: Roberto 'Andler' Lucas <contact@andler.dev>
* [pro-web] perf(fix): workspace + chat rendering, ui tweaks & chat and workspace refactor (#573)
* refactor(wip): use-workspace-chat streaming update
* perf: impr typing and text gen rendering
* fix: build + reduce hook deps + wip view model togg
* fix(wip): document state reset to parent active section
* fix(wip): workspace content integrity
* fix: save document content condition
* fix: replaceSectionContent h1 to h3
* perf(impr): single chat panel pro for pro + workspace chat guards
* chore: rm unused component + prompt form disable typo
* fix(wip): workspace hook re-render in chat
* perf: add startTransition to crit hooks
* fix: slow chat mode in thread + smal ui color state tweaks
* perf: impr is workspacemode space w/smooth transition
* fix: debounce workspace state update
* fix: current thread in thread popup
* chore: upt output instructions details (#548)
* [pro-web] feat: persist the organizations and selected chatbots in the backend (#579)
* fix(hasura): remove chatbot_id column from preference table and update relationships
* fix(hasura): update user permissions to enforce user_id checks in insert and select permissions
* feat(hasura): create organizations table with permissions and relationships
* feat(pro-web): implement GET and POST endpoints for organizations management
* feat(hasura): add default value for id column in organizations table
* feat(pro-web): implement PATCH endpoint for updating organizations
* feat(pro-web): enhance organization management functionality with new hooks and updates
* feat(pro-web): add functionality to persist organization and their categories/chatbots during signup
* refactor(pro-web): simplify header, create orgs with ProOnboarding, and remove CategoryDashboard
* feat(hasura): remove chatbots and categories columns from organizations table
* feat(hasura): create departments table with id and name columns
* feat(hasura): add department_id column and foreign key constraint to chatbot table
* feat(hasura): create organization_chatbot table
* feat(hasura): update metadata for organizations, chatbot, departments, and organizations_chatbot
* feat(hasura): add default departments to the seed data
* chore: update drizzle and graphql types
* refactor(hasura): rename org/dept tables, PKs, and update org_chatbot refs
* refactor(pro-web): group chatbots into default departments (general, marketing, product/service)
* fix(pro-web): add form ID to organization form and link submit button
* feat(hasura): add department field to getAllChatbots function
* refactor(hasura): remove department field from getCategories and getAllChatbots functions
* refactor(hasura): remove departmentId from getBrowseThreads function metadata
* refactor(pro-web): use 'id' instead of 'organizationId' and adjust department in getDepartment
* fix(web): replace chatbot __scalar in sitemap chatbots
* fix: organization table insert columns permissions @coderabbitai[bot]
Apply suggestion from @coderabbitai[bot]
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---------
Co-authored-by: Roberto Lucas <andler@bitcash.org>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
* [pro-web] refactor: add transactional org/chatbot insertion and improve validation (#582)
* fix(pro-web): correct SEO description handling for department selection
* refactor(pro-web): optimize organization and chatbot insertion using transactions
* fix(pro-web): validate chatbot existence before updating organization chatbots
* feat(pro-web): add keyword parameter in BrowseList
* fix(pro-web): include allDepartments in useSidebar for ChatLayoutSection
* fix(pro-web): handle null department name in search placeholder
* fix(pro-web): handle errors in getDepartments and ensure safe return of department data
* fix: 578 workspace hotfixes v5 + workspace state refactor (#580)
* feat(workspace): phase 0 diagnostics
- workspace-debug.ts: debug flags & timing utils
- use-workspace: toggleWorkspace, addDocument,
setDocumentContent, updateWorkspaceStateData
- use-workspace-content-hook: handleSaveDocument
with checksum logging
- markdown-utils: parseMarkdownSections,
replaceSectionContent
- use-mb-chat: onFinish streaming
- logs gated by window.__DEBUG_WORKSPACE__
- zero perf impact when disabled
refs #578
* fix: get user workspace documents
- Refactor how to get documents.
- Created default initial states for users upon landing.
- Created server initial state for workspaces.
* fix: table markdown nav
* feat(wip): tanstack query migration
* chore(feat): tanstack query integration flag, comparison
* fix: tanstack query server first & chk
* fix: pro web build and auth redir with init workspace state
* fix: tanstack query stream
* fix: tanstack document content integrity
* fix(refactor): tanstack streaming & doc save + handleDocumentUpdate
* chore: rm tst page
* refactor(feat): organization workspace
* feat(wip): upt workspace layout
* chore(fix): align upt workspace sidebar per organizations + onboarding
* fix: workspace build
* feat(wip): upt workspace layout
* feat(wip): workspace upt layout
* fix: pro missing hook var
* fix: gpt-5-nano & mini output headings + organization list
* [pro-web] refactor: workspace document mode queries with server-first persistence (#583)
* fix: workspadce doc init state + simplify workspace hook
* fix: workspace document state track
* fix: thread routing w/dept + doc ai gen & manual content upt
* fix(wip): query mutations & invalidations
* fix: document update integrity and gen
* fix: query mutations & invalidations
* fix: query mutations & invalidations
* fix: breadcrumb navigation on file and project creation
* feat(wip): workspace ai actions
* feat(wip): workspace ai actions
* fix: pro navigation + workspace ai actions, document mode
* fix: css build
* fix: css build
* fix: css build
* [pro-web] fix: updating accurate document section (#585)
* fix: updating accurate document section
* style(docs): add code comments for document update logic reminder
* [pro-web] fix: profile page preferences & layout (#587)
* fix: profile page preferences & layout UI
* fix: typo
* fix: user pro subscription guard
* perf(impr): mb pro onboarding init trigger (#588)
* [pro-web] fix: chk disable onboard in browse list
* [pro-web] fix: upt user workspace state with anon values (#589)
* fix: upt user workspace state with anon values
* style: normalize doc key with helper fn
* [pro-web] feat: workspace media tab, add img gen w/gpt-image-1 & nano banana (#584)
* chore(pro-web): update package dependencies to include @google/genai
* feat(pro-web): integrate Google Gemini model support for image generation
* feat(pro-web): update workspace context to include active tab management
* feat(pro-web): add WorkspaceMediaProvider and context to manage media-related state in the workspace
* feat(pro-web): integrate media tab in PromptForm for dynamic placeholder and submission handling
* feat(pro-web): enhance MediaWorkspace with image generation and context integration
* refactor(pro-web): align selected model with generation logic and stabilize prompt handler
* refactor(pro-web): add error handling for missing Google API key in image generation
* refactor(pro-web): streamline WorkspaceMediaHandlers interface for improved type safety and clarity
* refactor(pro-web): improve media tab context and move library/version history to workspace tab menu
* feat(pro-web): add centered frame size selector above canvas
* refactor(pro-web): revert frame size updates, move selector to menubar and improve responsiveness
* feat(pro-web): unify media selection wizard steps for size and template
* feat(pro-web): update media sidebar buttons, add tooltips and improve template flow
* feat(pro-web): expand frame sizes options and update your descriptions
* chore(pro-web): add new template images for various social media formats
* feat(pro-web): implement media templates API and integrate into workspace
- Add new API route to fetch available media templates from the filesystem.
- Update MediaWorkspace component to load templates on mount and manage loading state.
- Refactor SelectTemplateStep to display templates with loading and empty states.
- Enhance SelectSizeStep with ScrollArea for better usability.
- Introduce helper functions for template parsing and filtering by frame and social media.
- Update context to include openTemplates action for dialog management.
* feat(pro-web): hide progress bar when single step
* feat(pro-web): add reference image upload functionality with drag-and-drop support
* refactor(pro-web): split MediaWorkspace into reusable components
- Added MediaCanvas component for displaying generated images and templates.
- Introduced ReferenceImagesPanel for managing reference images with upload functionality.
- Created MediaSidebar for navigation between templates and social media actions.
- Implemented wizards for selecting sizes and templates, including LibraryStep for image selection.
- Enhanced hooks to manage workspace media state and integrate new components.
---------
Co-authored-by: Roberto 'Andler' Lucas <contact@andler.dev>
* [pro-web] chore: upt doc ai actions prompts + restructure workspace nav state (#592)
* chore: simplify ai actions document prompts
* fix: isWorkspaceActive prompts condition
* fix: workspace structure core nav + doc aai action prompt upt
* [pro-web] fix: workspace document display, drafts & navigation (#593)
* fix: normalize ai heading content
* fix: freeze active workspace section while stream
* refactor: workspace doc tab components reloc + doc nav impr
* fix: impr workspace doc ai action prompts
* fix: document drafts
* fix: document drafts
* fix: doc thread nav + draft nav + new doc creation + save new doc to server
* fix: workspace thread nav + whitelist user impr & clean-up
* fix: whitelist user impr
* fix: profile route relocated + workspace context leak
* fix: new document from thread nav
* fix: user docs filter + change docs alert a11y impr
* fix: get server init state in workspace structure
* fix: doc debounced save rm from doc-text-edit
* chore(style): add onsucess log in upt doc content cb fn
* fix: ts build
* [pro-web] feat: enhance media workspace with multi-ref img, template type filtering, and size reframing (#594)
* feat(pro-web): integrate TanStack Query for media templates fetching in MediaWorkspace
* refactor(pro-web): rename openFrameSizes to openSizeSelector for consistency in media actions
* refactor(pro-web): centralize media workspace types in dedicated file
* refactor(pro-web): optimize reference image management with useCallback
* refactor(pro-web): simplify parsing logic in parseTemplateFilename function
* refactor(pro-web): replace object URLs with base64 for image previews
* refactor(pro-web): update template type import path for consistency
* feat(pro-web): add multi-reference image support and eliminate prop drilling
- Add support for multiple reference images (up to 4) in Gemini image generation
- Centralize all state management in useWorkspaceMedia provider
- Remove prop drilling across all media tab components
- Add parseBase64Image helper for handling image data URLs
- Update API route to process reference images in Gemini content parts
- Refactor MediaWorkspace, MediaCanvas, MediaSidebar to use hook directly
- Move referenceImages and currentVersion state to provider
- Implement addReferenceImage, addMultipleReferenceImages, removeReferenceImage actions
- Update GenerateImageRequest type with optional referenceImages field
- Pass reference images through full generation pipeline
* feat(pro-web): add dynamic filter dropdown with adaptive layout
- Add Filter by Type dropdown with all social media and aspect ratio options
- Implement smart badge visibility based on active filter
- Add conditional layout: grid for square filter, masonry for others
- Capitalize social media names in badges
- Adjust column count based on filtered template count
* refactor(pro-web): enhance canvas empty state, simplify template step layout, persist filter type
* feat(pro-web): implement aspect ratio control and size change workflow
- Add aspectRatio parameter to Gemini image generation API
- Remove standalone size selector dialog in favor of menu-based workflow
- Add generateImageForSize action for dynamic aspect ratio changes
- Implement comprehensive reframing prompt for size transformations
- Add mediaSizeOptions with social media format presets
- Update canvas aspect ratios to match social media platforms
- Refactor media wizards to auto-set size from template selection
- Remove FrameSize description field from types
* chore: add gemini 3 pro image model to default img gen
* feat(pro-web): add aspect ratio validation and 2K resolution for Gemini API
- Define AspectRatio type with valid Gemini API values (1:1, 2:3, 3:2, etc.)
- Add runtime validation in generate-images route with clear error messages
- Update FrameSize interface to use strongly-typed AspectRatio
- Update GenerateImageRequest and GenerateImageOptions interfaces
- Configure Gemini imageSize to 2K for high-quality output
- Add type safety across media workspace components
- Fix error handling in imageUrlToBase64 helper
- Remove debug console.log statements
* fix(pro-web): improve frame size matching with semantic purpose
---------
Co-authored-by: Roberto 'Andler' Lucas <contact@andler.dev>
* chore: upt react ver
* fix: bun lock conflicts
* [pro-web] fix: workspace structure and nav state (#596)
* fix: dept from path guard
* fix: workspace structure chk missing project in dept
* fix: department n threads navigation
* fix: workspace active navigation persistent state
* style: header component clean up
* fix: css build
* fix: new proj among dept + thread refresh & filter
* chore: upt nextjs ver
* chore: upt react ver
* chore: rm legacy component
* chore: rm legacy component
* chore: rm legacy files
* [pro-web] feat: enhance media tab with version history UI & reference image storage (#595)
* feat(pro-web): simplify image reframing prompt
* feat(pro-web): add Gemini 3 Pro model to available image models
* feat(pro-web): enhance download/share functionality with loading state and mobile sharing support
* feat(pro-web): implement checksum-based reference image uploads with GCS storage
- Add server actions for reference image upload with checksum deduplication
- Replace client-side base64 uploads with server-side GCS bucket storage
- Upload images individually to avoid body size limits (5MB per request)
- Update workspace media context to use ReferenceImagePayload with checksums
- Modify image generation API to resolve checksums to base64 on server
- Add reference images debug page with dark/light mode support
- Configure Next.js serverActions bodySizeLimit to 5mb
- Maintain backward compatibility with legacy base64 approach
Storage: reference-images/${checksum} with 7-day signed URLs
Resolves payload size issues and enables efficient image reuse
* feat(pro-web): redesign version history dialog UI
- Create VersionHistoryDialog with current/previous version display
- Add carousel navigation for version browsing
- Implement restore and duplicate version actions
- Extract version history logic from media-canvas component
- Improve responsive design and user interactions
* feat(pro-web): implement smooth card stack animation for version history
- Add framer-motion animations with global progress tracking
- Implement horizontal slide with smooth sin curve for card transitions
- Add vertical arc movement as cards emerge from stack
- Apply scale interpolation with slight overshoot effect
- Add rotation straightening during transitions with directional snap
- Calculate shortest cycling direction for better UX
- Implement dynamic z-index management during animations
- Add stable random rotations for stacked cards
- Improve card depth calculation and visibility logic
- Enhance visual feedback with indigo ring for current card
* refactor(pro-web): extract version card logic to separate component
* refactor(media-tab): redesign version history UI from stacked cards to carousel layout
- Delete version-card.tsx component with complex motion animations
- Replace stack navigation (prev/next cycling) with carousel thumbnails
- Add side-by-side preview comparison (current vs selected)
- Implement direct thumbnail selection instead of animated card flipping
- Include carousel pagination with dots and arrow controls
- Enhance dialog structure with bordered sections and action buttons
* feat(media-tab): implement version history carousel with flying image transitions
* chore: update next.js version from 15.2.4 to 15.5.7 in package.json
* refactor(media-tab): update image display styles in version history dialog
* refactor(media-tab): improve styling for version history dialog header and images
* refactor(media-tab): adjust image display properties in FlyingImage component
* fix(media-tab): improve reference image upload reliability
Replace custom checksum with native crypto.createHash
Add upload state guard to prevent concurrent uploads
Improve error handling with early return and state reset
Adjust body size limit comment for clarity
Add TODO for library image checksum handling
* fix(reference-images): validate checksum format in fetchReferenceImageByChecksum function
---------
Co-authored-by: bran18 <andreyfdez18@gmail.com>
Co-authored-by: Brandon Fernández <31634868+Bran18@users.noreply.github.com>
Co-authored-by: Jimoh sherifdeen <63134009+sheriffjimoh@users.noreply.github.com>
Co-authored-by: brandonfernandezf <brandon@bitcash.org>
Co-authored-by: Jun Dam <jun@bitcash.org>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Jun Dam <jun@100xinvestors.com>
Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: dmrodriguez2000@gmail.com <dmrodriguez2000@gmail.com>
Co-authored-by: Derian <59376626+derianrddev@users.noreply.github.com>
Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
📖 Description
This pull request introduces a multi-step onboarding flow for the Pro workspace, including new UI components and step logic for selecting business type, sub-type, organization name, and more. The onboarding process is organized into a wizard interface with clear navigation and accessibility features. The main changes are grouped below:
✅ Changes Made
Onboarding Wizard Structure and Integration
ProOnboardingcomponent that wraps the onboarding steps in a dialog wizard, setting up the overall flow and state management for the onboarding process. (apps/pro-web/components/onboarding/pro-onboarding.tsx)apps/pro-web/components/onboarding/steps/index.ts)Step Components and User Interaction
StepQ1for selecting the business category and type, featuring accessible accordions, selection buttons, and a skip option with sensible defaults. (apps/pro-web/components/onboarding/steps/step-q1.tsx)StepQ2for choosing the main business offering (sub-type), including error handling if no type is selected, and navigation controls. (apps/pro-web/components/onboarding/steps/step-q2.tsx)StepQ3for entering and validating the organization name, using a form with Zod schema validation and UI feedback for errors. (apps/pro-web/components/onboarding/steps/step-q3.tsx)Reusable UI Component
BotCardcomponent for displaying bot information with avatar, description, selection state, and accessibility support, which can be leveraged in onboarding or other parts of the app. (apps/pro-web/components/onboarding/bot-card.tsx)🖼️ Media (screenshots/videos)
Screen.Recording.2025-10-23.134524.mp4
Summary by Sourcery
Introduce the initial Pro Web onboarding flow by adding a DialogWizard container and a first step (StepQ1) for selecting a business type using interactive accordions, iconized selection pills, and full keyboard accessibility.
New Features:
Enhancements:
Summary by CodeRabbit
New Features
Removed
Chores
UX