Conversation
Add static_select, multi_static_select, file_input, and multiline plain_text_input to the /showcase modal command. Fix inconsistent text input heights (h-8 vs py-2) and add spacing between modal form fields.
- Make input labels bold, bright, and clickable to focus their field - Update button styles: outlined secondary, solid primary/danger - Add global cursor:pointer on buttons - Show bot avatar icon in modal header - Show header border only when content is scrolled - Pass botId through view_open SSE event to UI
📝 WalkthroughWalkthroughAdds new form fields to the /showcase modal, introduces a static Slack Block Kit search-results payload, propagates an optional botId through modal open/update flows and server events, and updates UI components for modal header behaviour, input labelling, button/input styling, and message spacing. Changes
Sequence Diagram(s)sequenceDiagram
participant SSE as SSE Stream
participant Dispatcher as Dispatcher
participant State as State Manager
participant ModalOverlay as ModalOverlay Component
participant DOM as DOM/UI
SSE->>Dispatcher: view_open event (view, viewState, botId)
Dispatcher->>State: showModal(viewId, view, botId)
State->>State: simulatorState.activeModal = { viewId, view, botId }
ModalOverlay->>State: read simulatorState.activeModal
ModalOverlay->>ModalOverlay: derive modalBot from botId
ModalOverlay->>DOM: render header (avatar or Sparkles), content, footer
DOM->>ModalOverlay: onscroll event
ModalOverlay->>ModalOverlay: set contentScrolled -> update header border
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/ui/src/lib/state/bots.svelte.ts (1)
88-92:⚠️ Potential issue | 🟡 Minor
updateModalloses thebotIdwhen updating the view.When
updateModalreplaces theactiveModalobject, it only preservesviewIdandview, discarding thebotIdthat was set duringshowModal. This would cause the bot avatar to disappear from the modal header after any modal update.🐛 Proposed fix to preserve botId
export function updateModal(viewId: string, view: SlackView): void { if (simulatorState.activeModal?.viewId === viewId) { - simulatorState.activeModal = { viewId, view } + simulatorState.activeModal = { viewId, view, botId: simulatorState.activeModal.botId } } }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/ui/src/lib/state/bots.svelte.ts` around lines 88 - 92, updateModal currently replaces simulatorState.activeModal with a new object containing only viewId and view, dropping the existing botId and causing the avatar to disappear; modify updateModal so it preserves the existing botId (if any) when updating the view—e.g., merge or copy simulatorState.activeModal.botId into the new activeModal object so the botId set by showModal remains intact.
🧹 Nitpick comments (3)
apps/ui/src/components/blockkit/elements/UrlInput.svelte (1)
2-2: Use$libpath alias for imports fromsrc/lib/.As per coding guidelines, imports from
src/lib/should use the$libalias for consistency.♻️ Suggested fix
- import type { SlackUrlInputElement } from '../../../lib/types' + import type { SlackUrlInputElement } from '$lib/types'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/ui/src/components/blockkit/elements/UrlInput.svelte` at line 2, Replace the relative import path in UrlInput.svelte that references the lib types with the $lib alias; specifically update the import statement importing SlackUrlInputElement to use "$lib/types" (or the appropriate module under $lib) so it follows the project convention for imports from src/lib/.apps/ui/src/components/blockkit/elements/Button.svelte (1)
2-2: Use$libpath alias for imports fromsrc/lib/.As per coding guidelines, imports from
src/lib/should use the$libalias for consistency.♻️ Suggested fix
- import type { SlackButtonElement } from '../../../lib/types' + import type { SlackButtonElement } from '$lib/types'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/ui/src/components/blockkit/elements/Button.svelte` at line 2, Replace the relative import for the SlackButtonElement type in Button.svelte: change the import that references '../../../lib/types' to use the $lib alias (importing from '$lib/types') so the SlackButtonElement type import follows the project's path-alias convention.apps/ui/src/components/blockkit/elements/EmailInput.svelte (1)
2-2: Use$libpath alias for imports fromsrc/lib/.As per coding guidelines, imports from
src/lib/should use the$libalias for consistency.♻️ Suggested fix
- import type { SlackEmailInputElement } from '../../../lib/types' + import type { SlackEmailInputElement } from '$lib/types'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/ui/src/components/blockkit/elements/EmailInput.svelte` at line 2, Replace the relative import of SlackEmailInputElement with the $lib alias: change the import line that references '../../../lib/types' (the SlackEmailInputElement type import at the top of EmailInput.svelte) to use '$lib/types' so imports from src/lib use the standardized $lib path alias.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
apps/showcase-bot/src/listeners/commands/showcase.tsapps/showcase-bot/src/messages/blocks/16-search-results.jsonapps/ui/src/app.cssapps/ui/src/components/Message.svelteapps/ui/src/components/ModalOverlay.svelteapps/ui/src/components/blockkit/blocks/InputBlock.svelteapps/ui/src/components/blockkit/elements/Button.svelteapps/ui/src/components/blockkit/elements/EmailInput.svelteapps/ui/src/components/blockkit/elements/UrlInput.svelteapps/ui/src/lib/dispatcher.svelte.tsapps/ui/src/lib/state.svelte.tsapps/ui/src/lib/state/bots.svelte.tspackages/slack/src/server/state.ts
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx}: Use camelCase for variable names in TypeScript/JavaScript code
No semicolons in code, enforced by Prettier
Use single quotes instead of double quotes
Use trailing commas in es5 format
Prefix unused variables with underscore (_)
Files:
apps/ui/src/lib/state.svelte.tsapps/showcase-bot/src/listeners/commands/showcase.tspackages/slack/src/server/state.tsapps/ui/src/lib/state/bots.svelte.tsapps/ui/src/lib/dispatcher.svelte.ts
apps/ui/src/**/*.{ts,tsx,svelte}
📄 CodeRabbit inference engine (CLAUDE.md)
Use
$libpath alias when importing fromsrc/lib/in Svelte applications
Files:
apps/ui/src/lib/state.svelte.tsapps/ui/src/components/blockkit/elements/UrlInput.svelteapps/ui/src/components/blockkit/blocks/InputBlock.svelteapps/ui/src/lib/state/bots.svelte.tsapps/ui/src/components/blockkit/elements/EmailInput.svelteapps/ui/src/lib/dispatcher.svelte.tsapps/ui/src/components/Message.svelteapps/ui/src/components/blockkit/elements/Button.svelteapps/ui/src/components/ModalOverlay.svelte
packages/*/src/server/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
packages/*/src/server/*.ts: Platform emulator plugins must implement WebSocket protocol for event broadcasting to the frontend
Organize platform plugin packages withserver/state.tsfor in-memory state,server/web-api.tsfor API handlers, andserver/persistence.tsfor storage
Files:
packages/slack/src/server/state.ts
packages/slack/src/server/**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
Use SSE (Server-Sent Events) for broadcasting events from the emulator to the frontend
Files:
packages/slack/src/server/state.ts
**/*.svelte
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.svelte: Use{@html}in Svelte for mrkdwn rendering (ESLint rule disabled for this specific use case)
Use Svelte 5 runes ($state,$derived,$effect) for reactivity instead of legacy stores
Files:
apps/ui/src/components/blockkit/elements/UrlInput.svelteapps/ui/src/components/blockkit/blocks/InputBlock.svelteapps/ui/src/components/blockkit/elements/EmailInput.svelteapps/ui/src/components/Message.svelteapps/ui/src/components/blockkit/elements/Button.svelteapps/ui/src/components/ModalOverlay.svelte
🧠 Learnings (4)
📚 Learning: 2026-02-20T00:31:35.696Z
Learnt from: CR
Repo: tyom/botarium PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-02-20T00:31:35.696Z
Learning: Applies to packages/slack/src/server/**/*.ts : Use SSE (Server-Sent Events) for broadcasting events from the emulator to the frontend
Applied to files:
packages/slack/src/server/state.ts
📚 Learning: 2026-02-20T00:31:35.696Z
Learnt from: CR
Repo: tyom/botarium PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-02-20T00:31:35.696Z
Learning: Applies to packages/slack/src/server/socket-mode.ts : Slack API emulator must implement Socket Mode protocol for bot communication
Applied to files:
packages/slack/src/server/state.ts
📚 Learning: 2026-02-20T00:31:35.696Z
Learnt from: CR
Repo: tyom/botarium PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-02-20T00:31:35.696Z
Learning: Applies to packages/*/src/server/*.ts : Organize platform plugin packages with `server/state.ts` for in-memory state, `server/web-api.ts` for API handlers, and `server/persistence.ts` for storage
Applied to files:
packages/slack/src/server/state.ts
📚 Learning: 2026-01-14T21:36:07.933Z
Learnt from: tyom
Repo: tyom/botarium PR: 1
File: apps/ui/src/components/MessagePanel.svelte:10-23
Timestamp: 2026-01-14T21:36:07.933Z
Learning: In the client-only Botarium UI (Vite + Svelte), do not add or rely on SSR-specific guards (e.g., checks for sessionStorage) in components. Since the app runs only in Electron or the browser, code that accesses browser APIs will execute in a non-SSR environment, so SSR-unsafe checks are unnecessary and can be removed for maintainability.
Applied to files:
apps/ui/src/components/blockkit/elements/UrlInput.svelteapps/ui/src/components/blockkit/blocks/InputBlock.svelteapps/ui/src/components/blockkit/elements/EmailInput.svelteapps/ui/src/components/Message.svelteapps/ui/src/components/blockkit/elements/Button.svelteapps/ui/src/components/ModalOverlay.svelte
🧬 Code graph analysis (1)
apps/ui/src/lib/state/bots.svelte.ts (2)
apps/ui/src/lib/state.svelte.ts (2)
showModal(108-108)simulatorState(31-66)apps/ui/src/lib/types.ts (1)
SlackView(90-101)
🪛 GitHub Actions: CI
apps/showcase-bot/src/messages/blocks/16-search-results.json
[warning] 1-1: Code style issues found in the file. Run Prettier with --write to fix.
🔇 Additional comments (16)
apps/ui/src/app.css (1)
6-8: LGTM!The global
cursor: pointerrule for buttons complements the existing button reset in@layer baseand improves user feedback on interactive elements.apps/ui/src/components/blockkit/elements/UrlInput.svelte (1)
19-25: LGTM!The padding change from fixed height (
h-8) to vertical padding (py-2) is consistent with similar input components and allows for more flexible sizing.packages/slack/src/server/state.ts (1)
945-953: LGTM!The addition of
botIdto theview_openevent emission correctly propagates the bot identifier through the modal state system, aligning with the related frontend state changes.apps/ui/src/lib/state.svelte.ts (1)
24-28: LGTM!The optional
botIdproperty cleanly extends theModalStateinterface whilst maintaining backward compatibility. This enables the modal overlay to display bot-specific avatars and context.apps/ui/src/components/blockkit/elements/EmailInput.svelte (1)
19-25: LGTM!The padding change is consistent with the similar update in
UrlInput.svelte, maintaining uniform input styling across the Block Kit elements.apps/ui/src/components/Message.svelte (1)
356-358: LGTM!The simplified padding logic removes the conditional vertical spacing for grouped messages, applying consistent
py-2spacing throughout. This aligns with the broader UI spacing refinements in this PR.apps/ui/src/components/blockkit/elements/Button.svelte (1)
57-98: LGTM!The button styling improvements enhance the visual appearance with larger touch targets, rounder corners, and more defined outline variant borders. The transition updates ensure smooth state changes.
apps/showcase-bot/src/messages/blocks/16-search-results.json (1)
1-157: LGTM on structure!The Slack Block Kit payload is well-structured with appropriate use of section, context, divider, and actions blocks for displaying hotel search results. The placeholder URLs (
fakeLink.toHotelPage.com) are suitable for showcase purposes.apps/ui/src/lib/dispatcher.svelte.ts (1)
402-402: LGTM!The
botIdis correctly propagated from the SSE event to theshowModalfunction, aligning with the extended signature that accepts an optional bot identifier.apps/showcase-bot/src/listeners/commands/showcase.ts (1)
231-321: LGTM!The new modal inputs are well-structured and follow the established patterns:
- Department: single-select with clear options
- Skills: multi-select with relevant programming language options
- Attachments: file input limited to 3 files
- Additional Notes: optional multiline text with appropriate placeholder and hint
All blocks use consistent formatting and adhere to Slack Block Kit conventions.
apps/ui/src/lib/state/bots.svelte.ts (1)
79-85: LGTM!The
showModalfunction correctly accepts an optionalbotIdparameter and propagates it to the modal state.apps/ui/src/components/ModalOverlay.svelte (5)
44-52: LGTM!Good use of Svelte 5 runes. The
contentScrolledstate andmodalBotderived value are well-implemented for tracking scroll state and looking up the associated bot.
338-358: Nice UX enhancement with the bot avatar and scroll-aware header border.The conditional rendering of the bot avatar (with fallback to Sparkles icon) and the scroll-based border transition provide good visual feedback.
375-380: LGTM!The scroll handler cleanly updates
contentScrolledto trigger the header border transition.
403-411: LGTM!Button styling improvements with
font-boldand refined hover states.
422-426: LGTM!The scoped global style appropriately adjusts spacing within the BlockKitRenderer for modal content.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/showcase-bot/src/messages/blocks/16-search-results.json`:
- Around line 1-157: Run Prettier to fix the CI formatting error in this JSON
block; specifically format the file containing the "blocks" array that includes
action_ids like "showcase_search_results_filter" and
"showcase_search_results_next" by executing npx prettier --write on that file so
the JSON adheres to the project's style (this will resolve the Prettier check
failure).
In `@apps/ui/src/components/blockkit/blocks/InputBlock.svelte`:
- Around line 90-100: The label currently has an onclick handler that focuses
the associated input but lacks keyboard support and focusability; update the
label element (the same <label ... onclick=...> block) to be keyboard-accessible
by adding tabindex="0" and an on:keydown handler that listens for Enter and
Space and triggers the same focus logic (mirroring the onclick behavior), and
remove the svelte-ignore a11y_click_events_have_key_events (and
a11y_no_noninteractive_element_interactions if no longer needed) so the a11y
checks pass; keep the existing onclick as-is but ensure the on:keydown reuses
the same querySelector/focus logic.
---
Outside diff comments:
In `@apps/ui/src/lib/state/bots.svelte.ts`:
- Around line 88-92: updateModal currently replaces simulatorState.activeModal
with a new object containing only viewId and view, dropping the existing botId
and causing the avatar to disappear; modify updateModal so it preserves the
existing botId (if any) when updating the view—e.g., merge or copy
simulatorState.activeModal.botId into the new activeModal object so the botId
set by showModal remains intact.
---
Nitpick comments:
In `@apps/ui/src/components/blockkit/elements/Button.svelte`:
- Line 2: Replace the relative import for the SlackButtonElement type in
Button.svelte: change the import that references '../../../lib/types' to use the
$lib alias (importing from '$lib/types') so the SlackButtonElement type import
follows the project's path-alias convention.
In `@apps/ui/src/components/blockkit/elements/EmailInput.svelte`:
- Line 2: Replace the relative import of SlackEmailInputElement with the $lib
alias: change the import line that references '../../../lib/types' (the
SlackEmailInputElement type import at the top of EmailInput.svelte) to use
'$lib/types' so imports from src/lib use the standardized $lib path alias.
In `@apps/ui/src/components/blockkit/elements/UrlInput.svelte`:
- Line 2: Replace the relative import path in UrlInput.svelte that references
the lib types with the $lib alias; specifically update the import statement
importing SlackUrlInputElement to use "$lib/types" (or the appropriate module
under $lib) so it follows the project convention for imports from src/lib/.
Replace the onclick/querySelector hack in InputBlock with proper <label for> / id pairing on child input elements. This provides native click-to-focus and keyboard accessibility, removing all svelte-ignore a11y comments. Fix updateModal dropping botId when replacing activeModal, which caused the bot avatar to disappear on modal updates. Also normalize relative imports to $lib/types in Button, EmailInput, and UrlInput.
There was a problem hiding this comment.
🧹 Nitpick comments (4)
apps/ui/src/components/blockkit/elements/PlainTextInput.svelte (1)
2-2: Use$libpath alias for consistency.The import should use the
$libpath alias instead of a relative path to align with the coding guidelines and the pattern used in other input components in this PR (e.g.,EmailInput.svelte,UrlInput.svelte).Suggested fix
- import type { SlackPlainTextInputElement } from '../../../lib/types' + import type { SlackPlainTextInputElement } from '$lib/types'As per coding guidelines: "Use
$libpath alias when importing fromsrc/lib/in Svelte applications".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/ui/src/components/blockkit/elements/PlainTextInput.svelte` at line 2, Replace the relative import of SlackPlainTextInputElement with the $lib alias: update the import statement that currently references '../../../lib/types' in PlainTextInput.svelte to use '$lib/types' so it matches other components (e.g., EmailInput.svelte, UrlInput.svelte) and the project's coding guideline; ensure the imported symbol SlackPlainTextInputElement remains unchanged.apps/ui/src/components/blockkit/elements/NumberInput.svelte (1)
2-2: Use$libpath alias for consistency.The import should use the
$libpath alias instead of a relative path to align with the coding guidelines and the pattern used in other input components in this PR.Suggested fix
- import type { SlackNumberInputElement } from '../../../lib/types' + import type { SlackNumberInputElement } from '$lib/types'As per coding guidelines: "Use
$libpath alias when importing fromsrc/lib/in Svelte applications".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/ui/src/components/blockkit/elements/NumberInput.svelte` at line 2, Replace the relative import of SlackNumberInputElement in NumberInput.svelte with the $lib path alias; locate the import statement that currently references '../../../lib/types' and change it to import from '$lib/types' so the component (NumberInput.svelte) consistently uses the $lib alias for SlackNumberInputElement.apps/ui/src/components/blockkit/blocks/InputBlock.svelte (1)
18-18: Use$libpath alias for consistency.The import should use the
$libpath alias instead of a relative path to align with the coding guidelines.Suggested fix
- } from '../../../lib/types' + } from '$lib/types'As per coding guidelines: "Use
$libpath alias when importing fromsrc/lib/in Svelte applications".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/ui/src/components/blockkit/blocks/InputBlock.svelte` at line 18, The import in InputBlock.svelte currently uses a relative path ("../../../lib/types"); update that import to use the Svelte $lib path alias (import from "$lib/types") to follow project guidelines and keep imports consistent—modify the existing import statement that references types in ../../../lib/types so it points to $lib/types instead.apps/ui/src/components/blockkit/elements/StaticSelect.svelte (1)
2-5: Use$libpath alias for consistency.The import should use the
$libpath alias instead of a relative path to align with the coding guidelines and other components in this PR.Suggested fix
- import type { - SlackStaticSelectElement, - SlackOption, - } from '../../../lib/types' + import type { + SlackStaticSelectElement, + SlackOption, + } from '$lib/types'As per coding guidelines: "Use
$libpath alias when importing fromsrc/lib/in Svelte applications".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/ui/src/components/blockkit/elements/StaticSelect.svelte` around lines 2 - 5, Replace the relative import in StaticSelect.svelte that brings in SlackStaticSelectElement and SlackOption from '../../../lib/types' with the $lib alias import; update the import statement to reference '$lib/types' so the component (StaticSelect.svelte) uses the project-wide $lib path alias for SlackStaticSelectElement and SlackOption.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
apps/showcase-bot/src/messages/blocks/16-search-results.jsonapps/ui/src/components/blockkit/blocks/InputBlock.svelteapps/ui/src/components/blockkit/elements/Button.svelteapps/ui/src/components/blockkit/elements/EmailInput.svelteapps/ui/src/components/blockkit/elements/NumberInput.svelteapps/ui/src/components/blockkit/elements/PlainTextInput.svelteapps/ui/src/components/blockkit/elements/StaticSelect.svelteapps/ui/src/components/blockkit/elements/UrlInput.svelteapps/ui/src/lib/state/bots.svelte.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- apps/ui/src/lib/state/bots.svelte.ts
- apps/ui/src/components/blockkit/elements/Button.svelte
- apps/showcase-bot/src/messages/blocks/16-search-results.json
🧰 Additional context used
📓 Path-based instructions (2)
**/*.svelte
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.svelte: Use{@html}in Svelte for mrkdwn rendering (ESLint rule disabled for this specific use case)
Use Svelte 5 runes ($state,$derived,$effect) for reactivity instead of legacy stores
Files:
apps/ui/src/components/blockkit/elements/NumberInput.svelteapps/ui/src/components/blockkit/blocks/InputBlock.svelteapps/ui/src/components/blockkit/elements/StaticSelect.svelteapps/ui/src/components/blockkit/elements/EmailInput.svelteapps/ui/src/components/blockkit/elements/UrlInput.svelteapps/ui/src/components/blockkit/elements/PlainTextInput.svelte
apps/ui/src/**/*.{ts,tsx,svelte}
📄 CodeRabbit inference engine (CLAUDE.md)
Use
$libpath alias when importing fromsrc/lib/in Svelte applications
Files:
apps/ui/src/components/blockkit/elements/NumberInput.svelteapps/ui/src/components/blockkit/blocks/InputBlock.svelteapps/ui/src/components/blockkit/elements/StaticSelect.svelteapps/ui/src/components/blockkit/elements/EmailInput.svelteapps/ui/src/components/blockkit/elements/UrlInput.svelteapps/ui/src/components/blockkit/elements/PlainTextInput.svelte
🧠 Learnings (2)
📚 Learning: 2026-01-14T21:36:07.933Z
Learnt from: tyom
Repo: tyom/botarium PR: 1
File: apps/ui/src/components/MessagePanel.svelte:10-23
Timestamp: 2026-01-14T21:36:07.933Z
Learning: In the client-only Botarium UI (Vite + Svelte), do not add or rely on SSR-specific guards (e.g., checks for sessionStorage) in components. Since the app runs only in Electron or the browser, code that accesses browser APIs will execute in a non-SSR environment, so SSR-unsafe checks are unnecessary and can be removed for maintainability.
Applied to files:
apps/ui/src/components/blockkit/elements/NumberInput.svelteapps/ui/src/components/blockkit/blocks/InputBlock.svelteapps/ui/src/components/blockkit/elements/StaticSelect.svelteapps/ui/src/components/blockkit/elements/EmailInput.svelteapps/ui/src/components/blockkit/elements/UrlInput.svelteapps/ui/src/components/blockkit/elements/PlainTextInput.svelte
📚 Learning: 2026-02-20T00:31:35.696Z
Learnt from: CR
Repo: tyom/botarium PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-02-20T00:31:35.696Z
Learning: Applies to apps/ui/src/**/*.{ts,tsx,svelte} : Use `$lib` path alias when importing from `src/lib/` in Svelte applications
Applied to files:
apps/ui/src/components/blockkit/elements/UrlInput.svelte
🔇 Additional comments (7)
apps/ui/src/components/blockkit/elements/PlainTextInput.svelte (1)
6-12: LGTM!The optional
idprop is correctly added and propagated to both thetextareaandinputelements, enabling proper label-for interactions. The use of Svelte 5 runes ($props()and$derived) is correct.Also applies to: 17-34
apps/ui/src/components/blockkit/elements/UrlInput.svelte (1)
1-27: LGTM!The implementation correctly adds the optional
idprop, uses the$libpath alias for imports, and properly employs Svelte 5 runes. The styling update from fixed height to vertical padding is consistent with other input components.apps/ui/src/components/blockkit/blocks/InputBlock.svelte (2)
85-96: Good accessibility improvement with proper label association.The
inputIdderivation andfor={inputId}attribute correctly replace the previous onclick-based approach, providing native label-input association. This addresses the earlier accessibility concern about keyboard support.
100-156: The current approach appears intentionally differentiated based on component structure rather than inconsistency.Components like Checkboxes and RadioButtonGroup render multiple interactive elements (checkboxes/radio buttons in a loop), each with its own associated label. A single
idprop cannot properly associate with multiple elements—the current per-element labelling approach is the correct accessibility pattern.DatePicker, TimePicker, DateTimePicker, and FileInput handle labelling differently: they're either complex widgets managing their own interaction state or provide their own label handling. Propagating
idto these would not meaningfully improve accessibility and could create confusion with the parent label'sforattribute (which only associates with a single element).The existing pattern is sound: simple text inputs receive
idfor parent label association, while multi-element and complex components use alternative labelling strategies.Likely an incorrect or invalid review comment.
apps/ui/src/components/blockkit/elements/StaticSelect.svelte (1)
10-18: LGTM!The optional
idprop is correctly added to the Props interface, destructured, and passed through to the<select>element. This enables proper label-for association when used withInputBlock.Also applies to: 52-53
apps/ui/src/components/blockkit/elements/EmailInput.svelte (1)
1-27: LGTM!The implementation correctly adds the optional
idprop, uses the$libpath alias for imports, and properly employs Svelte 5 runes. The changes are consistent with the other input components in this PR.apps/ui/src/components/blockkit/elements/NumberInput.svelte (1)
6-12: LGTM!The optional
idprop is correctly added and propagated to the input element. The use of Svelte 5 runes is correct.Also applies to: 17-18
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@apps/ui/src/components/blockkit/blocks/InputBlock.svelte`:
- Line 18: The import in InputBlock.svelte currently uses a relative path
("../../../lib/types"); update that import to use the Svelte $lib path alias
(import from "$lib/types") to follow project guidelines and keep imports
consistent—modify the existing import statement that references types in
../../../lib/types so it points to $lib/types instead.
In `@apps/ui/src/components/blockkit/elements/NumberInput.svelte`:
- Line 2: Replace the relative import of SlackNumberInputElement in
NumberInput.svelte with the $lib path alias; locate the import statement that
currently references '../../../lib/types' and change it to import from
'$lib/types' so the component (NumberInput.svelte) consistently uses the $lib
alias for SlackNumberInputElement.
In `@apps/ui/src/components/blockkit/elements/PlainTextInput.svelte`:
- Line 2: Replace the relative import of SlackPlainTextInputElement with the
$lib alias: update the import statement that currently references
'../../../lib/types' in PlainTextInput.svelte to use '$lib/types' so it matches
other components (e.g., EmailInput.svelte, UrlInput.svelte) and the project's
coding guideline; ensure the imported symbol SlackPlainTextInputElement remains
unchanged.
In `@apps/ui/src/components/blockkit/elements/StaticSelect.svelte`:
- Around line 2-5: Replace the relative import in StaticSelect.svelte that
brings in SlackStaticSelectElement and SlackOption from '../../../lib/types'
with the $lib alias import; update the import statement to reference
'$lib/types' so the component (StaticSelect.svelte) uses the project-wide $lib
path alias for SlackStaticSelectElement and SlackOption.
1 participant
Summary by CodeRabbit
New Features
Style