mirror of
https://github.com/davidkaya/aryx.git
synced 2026-08-27 21:33:58 +02:00
fix: send button overlaps toolbar border and empty code block glitch
- Move send button into MarkdownComposer children slot so it positions relative to the editor content area, not the full container - Always create a text node when inserting a code block to prevent Lexical from rendering a split/empty code block artifact Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -1013,7 +1013,7 @@ export function ChatPane({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="relative rounded-xl border border-zinc-700 bg-zinc-900 transition-colors focus-within:border-indigo-500/50">
|
<div className="rounded-xl border border-zinc-700 bg-zinc-900 transition-colors focus-within:border-indigo-500/50">
|
||||||
<MarkdownComposer
|
<MarkdownComposer
|
||||||
ref={composerRef}
|
ref={composerRef}
|
||||||
disabled={isComposerDisabled}
|
disabled={isComposerDisabled}
|
||||||
@@ -1028,23 +1028,24 @@ export function ChatPane({
|
|||||||
? 'Saving scratchpad settings...'
|
? 'Saving scratchpad settings...'
|
||||||
: 'Message...'
|
: 'Message...'
|
||||||
}
|
}
|
||||||
/>
|
|
||||||
<button
|
|
||||||
className={`absolute bottom-2 right-2 flex size-8 items-center justify-center rounded-lg transition ${
|
|
||||||
canSubmitInput
|
|
||||||
? 'bg-indigo-600 text-white hover:bg-indigo-500'
|
|
||||||
: 'bg-zinc-800 text-zinc-600'
|
|
||||||
}`}
|
|
||||||
disabled={!canSubmitInput}
|
|
||||||
onClick={() => composerRef.current?.submit()}
|
|
||||||
type="button"
|
|
||||||
>
|
>
|
||||||
{isSessionBusy ? (
|
<button
|
||||||
<Loader2 className="size-4 animate-spin" />
|
className={`absolute bottom-2 right-2 flex size-8 items-center justify-center rounded-lg transition ${
|
||||||
) : (
|
canSubmitInput
|
||||||
<ArrowUp className="size-4" />
|
? 'bg-indigo-600 text-white hover:bg-indigo-500'
|
||||||
)}
|
: 'bg-zinc-800 text-zinc-600'
|
||||||
</button>
|
}`}
|
||||||
|
disabled={!canSubmitInput}
|
||||||
|
onClick={() => composerRef.current?.submit()}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
{isSessionBusy ? (
|
||||||
|
<Loader2 className="size-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<ArrowUp className="size-4" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</MarkdownComposer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -87,6 +87,7 @@ export interface MarkdownComposerProps {
|
|||||||
placeholder: string;
|
placeholder: string;
|
||||||
onSubmit: (markdown: string) => void;
|
onSubmit: (markdown: string) => void;
|
||||||
onContentChange: (hasContent: boolean) => void;
|
onContentChange: (hasContent: boolean) => void;
|
||||||
|
children?: React.ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Internal plugins ─────────────────────────────────── */
|
/* ── Internal plugins ─────────────────────────────────── */
|
||||||
@@ -283,10 +284,10 @@ function ToolbarPlugin({ disabled }: { disabled: boolean }) {
|
|||||||
p.selectEnd();
|
p.selectEnd();
|
||||||
} else {
|
} else {
|
||||||
const code = $createCodeNode();
|
const code = $createCodeNode();
|
||||||
const text = topElement.getTextContent();
|
const textNode = $createTextNode(topElement.getTextContent());
|
||||||
if (text) code.append($createTextNode(text));
|
code.append(textNode);
|
||||||
topElement.replace(code);
|
topElement.replace(code);
|
||||||
code.selectEnd();
|
textNode.select(0, 0);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}, [editor]);
|
}, [editor]);
|
||||||
@@ -341,7 +342,7 @@ function ToolbarButton({
|
|||||||
/* ── MarkdownComposer ─────────────────────────────────── */
|
/* ── MarkdownComposer ─────────────────────────────────── */
|
||||||
|
|
||||||
export const MarkdownComposer = forwardRef<MarkdownComposerHandle, MarkdownComposerProps>(
|
export const MarkdownComposer = forwardRef<MarkdownComposerHandle, MarkdownComposerProps>(
|
||||||
function MarkdownComposer({ disabled, placeholder, onSubmit, onContentChange }, ref) {
|
function MarkdownComposer({ disabled, placeholder, onSubmit, onContentChange, children }, ref) {
|
||||||
const editorRef = useRef<LexicalEditor | null>(null);
|
const editorRef = useRef<LexicalEditor | null>(null);
|
||||||
const submitRef = useRef(() => {});
|
const submitRef = useRef(() => {});
|
||||||
|
|
||||||
@@ -390,6 +391,7 @@ export const MarkdownComposer = forwardRef<MarkdownComposerHandle, MarkdownCompo
|
|||||||
}
|
}
|
||||||
ErrorBoundary={LexicalErrorBoundary}
|
ErrorBoundary={LexicalErrorBoundary}
|
||||||
/>
|
/>
|
||||||
|
{children}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<HistoryPlugin />
|
<HistoryPlugin />
|
||||||
|
|||||||
Reference in New Issue
Block a user