mirror of
https://github.com/rowboatlabs/rowboat.git
synced 2026-05-25 18:55:19 +02:00
Fix import json related glitches
This commit is contained in:
akhisud3195
parent
2551b34b26
commit
a29169a6db
1 changed files with 75 additions and 68 deletions
|
|
@ -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,17 +335,18 @@ 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"
|
||||||
onClick={handleRemoveImportedFile}
|
onClick={handleRemoveImportedFile}
|
||||||
className="ml-1 p-1 rounded-full transition-colors text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/30 focus:outline-none"
|
className="ml-1 p-1 rounded-full transition-colors text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/30 focus:outline-none"
|
||||||
aria-label="Remove imported file"
|
aria-label="Remove imported file"
|
||||||
>
|
>
|
||||||
<X size={16} />
|
<X size={16} />
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
|
|
@ -357,64 +358,70 @@ export function CreateProject({ defaultName, onOpenProjectPane, isProjectPaneOpe
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="relative group">
|
<>
|
||||||
<Textarea
|
<div className="relative group flex flex-col">
|
||||||
value={customPrompt}
|
<div className="relative">
|
||||||
onChange={(e) => {
|
<Textarea
|
||||||
setCustomPrompt(e.target.value);
|
value={customPrompt}
|
||||||
setPromptError(null);
|
onChange={(e) => {
|
||||||
}}
|
setCustomPrompt(e.target.value);
|
||||||
placeholder="Example: Create a customer support assistant that can handle product inquiries and returns"
|
setPromptError(null);
|
||||||
className={clsx(
|
}}
|
||||||
textareaStyles,
|
placeholder="Example: Create a customer support assistant that can handle product inquiries and returns"
|
||||||
"text-base",
|
className={clsx(
|
||||||
"text-gray-900 dark:text-gray-100",
|
textareaStyles,
|
||||||
promptError && "border-red-500 focus:ring-red-500/20",
|
"text-base",
|
||||||
!customPrompt && emptyTextareaStyles,
|
"text-gray-900 dark:text-gray-100",
|
||||||
"pr-12 pb-10" // space for send button and import pill
|
promptError && "border-red-500 focus:ring-red-500/20",
|
||||||
|
!customPrompt && emptyTextareaStyles,
|
||||||
|
"pr-14" // more space for send button
|
||||||
|
)}
|
||||||
|
style={{ minHeight: "120px" }}
|
||||||
|
autoFocus
|
||||||
|
autoResize
|
||||||
|
required
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === 'Enter' && !e.shiftKey && !importedJson) {
|
||||||
|
e.preventDefault();
|
||||||
|
handleSubmit();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div className="absolute right-3 bottom-3 z-10">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={importLoading || !customPrompt.trim()}
|
||||||
|
className={clsx(
|
||||||
|
"rounded-full p-2",
|
||||||
|
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-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500",
|
||||||
|
"transition-all duration-200 scale-100 hover:scale-105 active:scale-95 disabled:opacity-50 disabled:scale-95 hover:shadow-md dark:hover:shadow-indigo-950/10"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Send size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{promptError && (
|
||||||
|
<p className="text-sm text-red-500 m-0 mt-2">
|
||||||
|
{promptError}
|
||||||
|
</p>
|
||||||
)}
|
)}
|
||||||
style={{ minHeight: "120px" }}
|
|
||||||
autoFocus
|
|
||||||
autoResize
|
|
||||||
required
|
|
||||||
onKeyDown={(e) => {
|
|
||||||
if (e.key === 'Enter' && !importedJson && !e.shiftKey) {
|
|
||||||
e.preventDefault();
|
|
||||||
handleSubmit();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/* Import Assistant JSON pill inside textarea */}
|
|
||||||
<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>
|
</div>
|
||||||
<button
|
{/* Import JSON button always below the main input, left-aligned, when no file is selected */}
|
||||||
type="submit"
|
<div className="mt-2">
|
||||||
disabled={importLoading || !customPrompt.trim()}
|
<Button
|
||||||
className={clsx(
|
variant="secondary"
|
||||||
"absolute right-3 bottom-3",
|
size="sm"
|
||||||
"rounded-full p-2",
|
onClick={handleImportJsonClick}
|
||||||
customPrompt.trim()
|
type="button"
|
||||||
? "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"
|
startContent={<Upload size={16} />}
|
||||||
: "bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500",
|
>
|
||||||
"transition-all duration-200 scale-100 hover:scale-105 active:scale-95 disabled:opacity-50 disabled:scale-95 hover:shadow-md dark:hover:shadow-indigo-950/10"
|
Import JSON
|
||||||
)}
|
</Button>
|
||||||
>
|
</div>
|
||||||
<Send size={18} />
|
</>
|
||||||
</button>
|
|
||||||
{promptError && (
|
|
||||||
<p className="text-sm text-red-500 mt-2">
|
|
||||||
{promptError}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue