copy prompt #2477
copy prompt #2477
Conversation
|
This PR was not deployed automatically as @atharvadeosthale does not have access to the Railway project. In order to get automatic PR deploys, please add @atharvadeosthale to your workspace on Railway. |
WalkthroughAdds a new Svelte component llmBanner.svelte and integrates it into the "Clone starter" step of Android, Apple, Flutter, React Native, and Web platform creation UIs. Adds an exported LLMPromptConfig type and exported functions generatePromptFromConfig and buildPlatformConfig in the platform store. LlmBanner accepts platform/config props, resolves a final LLMPromptConfig (using custom config or building from platform+configCode), generates a prompt string, renders an inline alert with a copy-to-clipboard action, and emits an analytics event when the prompt is copied. No existing public exports were removed. Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
🔇 Additional comments (1)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (5)
src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte (1)
220-231: Simplify the disabled condition.The condition
!prompt || prompt.length === 0is redundant. Sincepromptis a constant string that's always defined and non-empty in this file, checking!promptis sufficient (an empty string is falsy in JavaScript).Apply this diff:
<Button compact size="s" on:click={copyPrompt} - disabled={!prompt || prompt.length === 0}>Copy prompt</Button> + disabled={!prompt}>Copy prompt</Button>src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte (1)
245-256: Simplify the disabled condition.The condition
!prompt || prompt.length === 0is redundant since an empty string is falsy in JavaScript.Apply this diff:
<Button compact size="s" on:click={copyPrompt} - disabled={!prompt || prompt.length === 0}>Copy prompt</Button> + disabled={!prompt}>Copy prompt</Button>src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte (1)
191-202: Simplify the disabled condition.The condition
!prompt || prompt.length === 0is redundant.Apply this diff:
<Button compact size="s" on:click={copyPrompt} - disabled={!prompt || prompt.length === 0}>Copy prompt</Button> + disabled={!prompt}>Copy prompt</Button>src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte (1)
330-341: Simplify the disabled condition.The condition
!prompt || prompt.length === 0is redundant.Apply this diff:
<Button compact size="s" on:click={copyPrompt} - disabled={!prompt || prompt.length === 0}>Copy prompt</Button> + disabled={!prompt}>Copy prompt</Button>src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte (1)
301-312: Simplify the disabled condition.The condition
!prompt || prompt.length === 0is redundant.Apply this diff:
<Button compact size="s" on:click={copyPrompt} - disabled={!prompt || prompt.length === 0}>Copy prompt</Button> + disabled={!prompt}>Copy prompt</Button>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte(3 hunks)src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte(4 hunks)src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte(4 hunks)src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte(4 hunks)src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte(3 hunks)
🔇 Additional comments (4)
src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte (1)
45-59: Approve the prompt structure.The multi-step prompt with embedded code blocks is clear and follows the same pattern as other platform creation flows.
src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte (1)
44-58: LGTM!The React Native prompt follows the established pattern with clear multi-step instructions and proper code block formatting.
src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte (1)
43-58: LGTM!The Android prompt is well-structured with appropriate Kotlin code examples and clear setup instructions.
src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte (1)
46-60: LGTM!The Flutter prompt provides clear instructions with proper Dart code examples and follows the established pattern.
| async function copyPrompt() { | ||
| await navigator.clipboard.writeText(prompt); | ||
| addNotification({ | ||
| type: 'success', | ||
| message: 'Prompt copied to clipboard' | ||
| }); | ||
| } |
There was a problem hiding this comment.
Add error handling and consider extracting to a shared utility.
The copyPrompt function is duplicated across all five platform files with identical implementation. Consider extracting this to a shared utility function to reduce duplication and centralize error handling.
Apply this diff to add error handling:
async function copyPrompt() {
+ try {
await navigator.clipboard.writeText(prompt);
addNotification({
type: 'success',
message: 'Prompt copied to clipboard'
});
+ } catch (error) {
+ addNotification({
+ type: 'error',
+ message: 'Failed to copy prompt to clipboard'
+ });
+ }
}Consider creating a shared utility function in a separate file (e.g., src/lib/helpers/clipboard.ts):
import { addNotification } from '$lib/stores/notifications';
export async function copyToClipboard(text: string, successMessage = 'Copied to clipboard'): Promise<boolean> {
try {
await navigator.clipboard.writeText(text);
addNotification({
type: 'success',
message: successMessage
});
return true;
} catch (error) {
addNotification({
type: 'error',
message: 'Failed to copy to clipboard'
});
return false;
}
}Then use it in each platform file:
import { copyToClipboard } from '$lib/helpers/clipboard';
async function copyPrompt() {
await copyToClipboard(prompt, 'Prompt copied to clipboard');
}🤖 Prompt for AI Agents
In
src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
around lines 60 to 66, the copyPrompt implementation lacks error handling and is
duplicated across five platform files; extract a shared utility and use it here.
Create a new helper (e.g., src/lib/helpers/clipboard.ts) that wraps
navigator.clipboard.writeText in try/catch, emits success and error
notifications via addNotification, and returns a boolean, then import and call
that copyToClipboard helper from this file (await copyToClipboard(prompt,
'Prompt copied to clipboard')) to centralize logic and handle failures.
| async function copyPrompt() { | ||
| await navigator.clipboard.writeText(prompt); | ||
| addNotification({ | ||
| type: 'success', | ||
| message: 'Prompt copied to clipboard' | ||
| }); | ||
| } |
There was a problem hiding this comment.
Add error handling for clipboard operations.
The navigator.clipboard.writeText API can fail in insecure contexts (non-HTTPS), when permissions are denied, or when the clipboard is unavailable. Consider wrapping the operation in a try-catch block.
Apply this diff to add error handling:
async function copyPrompt() {
+ try {
await navigator.clipboard.writeText(prompt);
addNotification({
type: 'success',
message: 'Prompt copied to clipboard'
});
+ } catch (error) {
+ addNotification({
+ type: 'error',
+ message: 'Failed to copy prompt to clipboard'
+ });
+ }
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| async function copyPrompt() { | |
| await navigator.clipboard.writeText(prompt); | |
| addNotification({ | |
| type: 'success', | |
| message: 'Prompt copied to clipboard' | |
| }); | |
| } | |
| async function copyPrompt() { | |
| try { | |
| await navigator.clipboard.writeText(prompt); | |
| addNotification({ | |
| type: 'success', | |
| message: 'Prompt copied to clipboard' | |
| }); | |
| } catch (error) { | |
| addNotification({ | |
| type: 'error', | |
| message: 'Failed to copy prompt to clipboard' | |
| }); | |
| } | |
| } |
🤖 Prompt for AI Agents
In
src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
around lines 70-76, wrap the navigator.clipboard.writeText call in a try-catch
to handle failures; on success keep the existing success notification, and on
catch call addNotification with a failure/error type and include a concise error
message (or a friendly fallback message) so the UI informs the user when
clipboard access is denied or unavailable; optionally implement a DOM fallback
(create a hidden textarea, select, document.execCommand('copy')) inside the
catch before showing the error notification to improve compatibility.
| async function copyPrompt() { | ||
| await navigator.clipboard.writeText(prompt); | ||
| addNotification({ | ||
| type: 'success', | ||
| message: 'Prompt copied to clipboard' | ||
| }); | ||
| } |
There was a problem hiding this comment.
Add error handling for clipboard operations.
The navigator.clipboard.writeText API can fail in insecure contexts, when permissions are denied, or when the clipboard is unavailable.
Apply this diff to add error handling:
async function copyPrompt() {
+ try {
await navigator.clipboard.writeText(prompt);
addNotification({
type: 'success',
message: 'Prompt copied to clipboard'
});
+ } catch (error) {
+ addNotification({
+ type: 'error',
+ message: 'Failed to copy prompt to clipboard'
+ });
+ }
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| async function copyPrompt() { | |
| await navigator.clipboard.writeText(prompt); | |
| addNotification({ | |
| type: 'success', | |
| message: 'Prompt copied to clipboard' | |
| }); | |
| } | |
| async function copyPrompt() { | |
| try { | |
| await navigator.clipboard.writeText(prompt); | |
| addNotification({ | |
| type: 'success', | |
| message: 'Prompt copied to clipboard' | |
| }); | |
| } catch (error) { | |
| addNotification({ | |
| type: 'error', | |
| message: 'Failed to copy prompt to clipboard' | |
| }); | |
| } | |
| } |
🤖 Prompt for AI Agents
In
src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
around lines 128-134, the clipboard write call lacks error handling; wrap
navigator.clipboard.writeText(prompt) in a try/catch, keep the success
addNotification on successful write, and in the catch branch log the error
(console.error) and call addNotification with a failure type/message (e.g.,
"Failed to copy prompt to clipboard"). Optionally implement a fallback copy
method (create a hidden textarea, select, document.execCommand('copy')) inside
the catch before showing the failure notification so we attempt a fallback copy
for insecure contexts or denied permissions. Ensure notifications are clear and
any thrown error is swallowed after logging to avoid unhandled promise
rejections.
| async function copyPrompt() { | ||
| await navigator.clipboard.writeText(prompt); | ||
| addNotification({ | ||
| type: 'success', | ||
| message: 'Prompt copied to clipboard' | ||
| }); | ||
| } |
There was a problem hiding this comment.
Add error handling for clipboard operations.
The navigator.clipboard.writeText API can fail in insecure contexts (non-HTTPS), when permissions are denied, or when the clipboard is unavailable. This issue is duplicated across all platform files.
Apply this diff to add error handling:
async function copyPrompt() {
+ try {
await navigator.clipboard.writeText(prompt);
addNotification({
type: 'success',
message: 'Prompt copied to clipboard'
});
+ } catch (error) {
+ addNotification({
+ type: 'error',
+ message: 'Failed to copy prompt to clipboard'
+ });
+ }
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| async function copyPrompt() { | |
| await navigator.clipboard.writeText(prompt); | |
| addNotification({ | |
| type: 'success', | |
| message: 'Prompt copied to clipboard' | |
| }); | |
| } | |
| async function copyPrompt() { | |
| try { | |
| await navigator.clipboard.writeText(prompt); | |
| addNotification({ | |
| type: 'success', | |
| message: 'Prompt copied to clipboard' | |
| }); | |
| } catch (error) { | |
| addNotification({ | |
| type: 'error', | |
| message: 'Failed to copy prompt to clipboard' | |
| }); | |
| } | |
| } |
src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
Outdated
Show resolved
Hide resolved
| async function copyPrompt() { | ||
| await navigator.clipboard.writeText(prompt); | ||
| addNotification({ | ||
| type: 'success', | ||
| message: 'Prompt copied to clipboard' | ||
| }); | ||
| } |
There was a problem hiding this comment.
Add error handling for clipboard operations.
The navigator.clipboard.writeText API can fail in insecure contexts, when permissions are denied, or when the clipboard is unavailable.
Apply this diff to add error handling:
async function copyPrompt() {
+ try {
await navigator.clipboard.writeText(prompt);
addNotification({
type: 'success',
message: 'Prompt copied to clipboard'
});
+ } catch (error) {
+ addNotification({
+ type: 'error',
+ message: 'Failed to copy prompt to clipboard'
+ });
+ }
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| async function copyPrompt() { | |
| await navigator.clipboard.writeText(prompt); | |
| addNotification({ | |
| type: 'success', | |
| message: 'Prompt copied to clipboard' | |
| }); | |
| } | |
| async function copyPrompt() { | |
| try { | |
| await navigator.clipboard.writeText(prompt); | |
| addNotification({ | |
| type: 'success', | |
| message: 'Prompt copied to clipboard' | |
| }); | |
| } catch (error) { | |
| addNotification({ | |
| type: 'error', | |
| message: 'Failed to copy prompt to clipboard' | |
| }); | |
| } | |
| } |
🤖 Prompt for AI Agents
In
src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
around lines 187-193, the clipboard write call lacks error handling; wrap the
await navigator.clipboard.writeText(prompt) in a try/catch, log the error
(console.error) and call addNotification with a failure type/message when it
throws, and optionally provide a fallback UI message or alternative copy
approach; ensure the function still returns/awaits correctly so callers handle
the outcome.
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (1)
src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte (1)
155-168: UndefinedselectedFrameworkconcerns already raised.This segment was flagged in a previous review regarding potential undefined access to
selectedFrameworkproperties. While optional chaining is used throughout, ifselectedFrameworkis undefined, the derived strings will contain "undefined" text (e.g., incloneCommandandrunInstructions).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte(2 hunks)src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte(3 hunks)src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte(3 hunks)src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte(2 hunks)src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte(3 hunks)src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte(1 hunks)src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
- src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
🧰 Additional context used
🪛 GitHub Actions: Tests
src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
[error] 15-15: ts: 'Alert' is declared but its value is never read. (no-unused-vars)
src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
[error] 15-15: ts: 'Alert' is declared but its value is never read. (no-unused-vars)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: e2e
🔇 Additional comments (8)
src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte (1)
309-309: LGTM: Clean integration of LlmBanner component.The LlmBanner is correctly integrated with the derived
llmConfig, providing a streamlined UX for copying LLM prompts.src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte (1)
202-202: LGTM: Correct LlmBanner integration for Apple platform.The LlmBanner is properly integrated with the correct platform identifier and configCode.
src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte (1)
284-284: LGTM: Correct LlmBanner integration for Flutter platform.The LlmBanner is properly integrated with the correct platform identifier and configCode.
src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte (2)
18-22: LGTM: Solid config derivation with proper error handling.The derived config logic correctly prioritizes
customConfig, falls back to building fromplatformandconfigCode, and throws a clear error for invalid prop combinations.
36-42: LGTM: Clean UI with appropriate button state management.The Alert rendering is well-structured, and the button correctly disables when the prompt is empty, preventing user errors.
src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts (3)
20-27: LGTM: Well-designed LLMPromptConfig type.The type definition is clear, comprehensive, and provides a solid foundation for standardized prompt configuration across platforms.
33-95: LGTM: Clean prompt generation with well-organized platform metadata.The
generatePromptFromConfigfunction creates consistent, multi-step instructions, and theplatformConfigsmapping provides a maintainable structure for platform-specific settings. The absence of "web" inplatformConfigsis intentional since Web builds framework-specific configs inline.
97-111: LGTM: Robust platform config builder with proper validation.The function correctly validates the platform key, provides a clear error for unknown platforms, and constructs a well-formed
LLMPromptConfig.
src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
Outdated
Show resolved
Hide resolved
src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
Outdated
Show resolved
Hide resolved
src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts (1)
103-118: Consider improving the error message for unknown platforms.The error handling at line 106 is good, but the error message could be more helpful by listing the valid platform keys.
Apply this diff to improve the error message:
export function buildPlatformConfig(platformKey: string, configCode: string): LLMPromptConfig { const config = platformConfigs[platformKey]; if (!config) { - throw new Error(`Unknown platform: ${platformKey}`); + throw new Error(`Unknown platform: ${platformKey}. Valid platforms are: ${Object.keys(platformConfigs).join(', ')}`); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte(2 hunks)src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte(3 hunks)src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: e2e
🔇 Additional comments (4)
src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte (1)
30-30: LGTM! Clean integration of LlmBanner component.The LlmBanner component is properly imported and integrated into the Clone starter section. The platform prop value "flutter" correctly matches the platform key in the store's platformConfigs mapping, and the configCode prop passes the necessary Flutter configuration.
Also applies to: 283-283
src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts (3)
20-28: LGTM! Well-structured type definition.The LLMPromptConfig type clearly defines all necessary fields for generating platform-specific prompts. The field names are descriptive and the structure is straightforward.
34-48: LGTM! Clean prompt generation with good defaults.The function correctly generates a formatted multi-step prompt with markdown code blocks. The fallback for the
usingfield (line 35) is a good defensive practice.
60-101: ****The Web platform does not use the
buildPlatformConfigfunction and therefore does not require a 'web' entry inplatformConfigs. IncreateWeb.svelte, thellmConfigis independently computed as a$derivedvalue with all necessary configuration properties, then passed directly to theLlmBannercomponent. TheLlmBannercomponent only callsbuildPlatformConfigwhen aplatformparameter is provided; when passed aconfigobject directly (as Web does), it skips that code path entirely. The mobile platforms (Android, Apple, Flutter, React Native) usebuildPlatformConfigvia theplatformparameter, while Web uses a self-contained approach—both are intentional and correct.Likely an incorrect or invalid review comment.
Summary by CodeRabbit