apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-05-25 18:55:19 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix import json related glitches

Browse source
This commit is contained in:
akhisud3195 2025-07-21 13:41:51 +05:30
parent 2551b34b26
commit a29169a6db
1 changed files with 75 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

45
apps/rowboat/app/projects/select/components/create-project.tsx
View file

@ -317,7 +317,7 @@ export function CreateProject({ defaultName, onOpenProjectPane, isProjectPaneOpe
> >
{/* Main Section: What do you want to build? and Import JSON */} {/* Main Section: What do you want to build? and Import JSON */}
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
<div className="flex w-full items-center justify-between"> <div className="flex w-full items-center">
<label className={largeSectionHeaderStyles}> <label className={largeSectionHeaderStyles}>
✏️ What do you want to build? ✏️ What do you want to build?
</label> </label>
@ -335,8 +335,8 @@ export function CreateProject({ defaultName, onOpenProjectPane, isProjectPaneOpe
{/* If a file is imported, show filename, cross button, and create button. Otherwise, show compose box. */} {/* If a file is imported, show filename, cross button, and create button. Otherwise, show compose box. */}
{importedJson ? ( {importedJson ? (
<div className="flex flex-col items-start gap-4"> <div className="flex flex-col items-start gap-4">
<div className="flex items-center gap-2 bg-transparent border border-gray-300 dark:border-gray-700 rounded-full px-3 py-1.5 shadow-sm"> <div className="flex items-center gap-2">
<Upload size={16} className="text-indigo-500 dark:text-indigo-400 mr-1" /> <div className="flex items-center bg-transparent border border-gray-300 dark:border-gray-700 rounded-full px-3 h-8 shadow-sm">
<span className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate max-w-[160px]">{importedFilename}</span> <span className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate max-w-[160px]">{importedFilename}</span>
<button <button
type="button" type="button"
@ -347,6 +347,7 @@ export function CreateProject({ defaultName, onOpenProjectPane, isProjectPaneOpe
<X size={16} /> <X size={16} />
</button> </button>
</div> </div>
</div>
<Button <Button
type="submit" type="submit"
variant="primary" variant="primary"
@ -357,7 +358,9 @@ export function CreateProject({ defaultName, onOpenProjectPane, isProjectPaneOpe
</Button> </Button>
</div> </div>
) : ( ) : (
<div className="relative group"> <>
<div className="relative group flex flex-col">
<div className="relative">
<Textarea <Textarea
value={customPrompt} value={customPrompt}
onChange={(e) => { onChange={(e) => {
@ -371,35 +374,24 @@ export function CreateProject({ defaultName, onOpenProjectPane, isProjectPaneOpe
"text-gray-900 dark:text-gray-100", "text-gray-900 dark:text-gray-100",
promptError && "border-red-500 focus:ring-red-500/20", promptError && "border-red-500 focus:ring-red-500/20",
!customPrompt && emptyTextareaStyles, !customPrompt && emptyTextareaStyles,
"pr-12 pb-10" // space for send button and import pill "pr-14" // more space for send button
)} )}
style={{ minHeight: "120px" }} style={{ minHeight: "120px" }}
autoFocus autoFocus
autoResize autoResize
required required
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Enter' && !importedJson && !e.shiftKey) { if (e.key === 'Enter' && !e.shiftKey && !importedJson) {
e.preventDefault(); e.preventDefault();
handleSubmit(); handleSubmit();
} }
}} }}
/> />
{/* Import Assistant JSON pill inside textarea */} <div className="absolute right-3 bottom-3 z-10">
<div className="absolute left-3 bottom-3 flex items-center">
<button
type="button"
onClick={handleImportJsonClick}
className="flex items-center gap-1 text-xs font-medium text-gray-700 dark:text-gray-200 focus:outline-none"
>
<Upload size={14} className="text-indigo-500 dark:text-indigo-400" />
Import JSON instead
</button>
</div>
<button <button
type="submit" type="submit"
disabled={importLoading || !customPrompt.trim()} disabled={importLoading || !customPrompt.trim()}
className={clsx( className={clsx(
"absolute right-3 bottom-3",
"rounded-full p-2", "rounded-full p-2",
customPrompt.trim() customPrompt.trim()
? "bg-indigo-50 hover:bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:hover:bg-indigo-800/60 dark:text-indigo-300" ? "bg-indigo-50 hover:bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:hover:bg-indigo-800/60 dark:text-indigo-300"
@ -409,12 +401,27 @@ export function CreateProject({ defaultName, onOpenProjectPane, isProjectPaneOpe
> >
<Send size={18} /> <Send size={18} />
</button> </button>
</div>
</div>
{promptError && ( {promptError && (
<p className="text-sm text-red-500 mt-2"> <p className="text-sm text-red-500 m-0 mt-2">
{promptError} {promptError}
</p> </p>
)} )}
</div> </div>
{/* Import JSON button always below the main input, left-aligned, when no file is selected */}
<div className="mt-2">
<Button
variant="secondary"
size="sm"
onClick={handleImportJsonClick}
type="button"
startContent={<Upload size={16} />}
>
Import JSON
</Button>
</div>
</>
)} )}
</div> </div>
</div> </div>