obsidian-plugin/murashit_codex-panel
1
0
Fork 0
mirror of https://github.com/murashit/codex-panel.git synced 2026-07-22 06:57:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Wrap composer input and status in one frame

Browse source
This commit is contained in:
murashit 2026-06-05 13:02:12 +09:00
parent 7711050786
commit 55dedb47d6
3 changed files with 55 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/features/chat/ui/composer.tsx
View file

@ -129,28 +129,30 @@ function ComposerShell({
return (
<div className="codex-panel__composer">
<textarea
ref={composerRef}
className="codex-panel-ui__text-input codex-panel__composer-input"
placeholder={sendMode.canInterrupt ? "Add steering message..." : normalPlaceholder}
role="combobox"
aria-autocomplete="list"
aria-expanded={suggestions.length > 0 ? "true" : "false"}
aria-controls={`${viewId}-composer-suggestions`}
aria-activedescendant={selectedSuggestionId}
value={draft}
onInput={(event) => {
if (syncComposerHeight(event.currentTarget)) callbacks.onComposerResize();
callbacks.onInput(event.currentTarget.value);
}}
onKeyUp={callbacks.onUpdateSuggestions}
onClick={callbacks.onUpdateSuggestions}
onSelect={callbacks.onUpdateSuggestions}
onKeyDown={(event) => {
callbacks.onKeydown(event);
}}
/>
<ComposerMeta meta={meta} sendMode={sendMode} callbacks={callbacks} />
<div className="codex-panel__composer-frame">
<textarea
ref={composerRef}
className="codex-panel-ui__text-input codex-panel__composer-input"
placeholder={sendMode.canInterrupt ? "Add steering message..." : normalPlaceholder}
role="combobox"
aria-autocomplete="list"
aria-expanded={suggestions.length > 0 ? "true" : "false"}
aria-controls={`${viewId}-composer-suggestions`}
aria-activedescendant={selectedSuggestionId}
value={draft}
onInput={(event) => {
if (syncComposerHeight(event.currentTarget)) callbacks.onComposerResize();
callbacks.onInput(event.currentTarget.value);
}}
onKeyUp={callbacks.onUpdateSuggestions}
onClick={callbacks.onUpdateSuggestions}
onSelect={callbacks.onUpdateSuggestions}
onKeyDown={(event) => {
callbacks.onKeydown(event);
}}
/>
<ComposerMeta meta={meta} sendMode={sendMode} callbacks={callbacks} />
</div>
<ComposerSuggestions
containerRef={suggestionsRef}
selectedRef={selectedSuggestionRef}

31
src/styles/33-chat-composer.css
View file

@ -1,15 +1,41 @@
.codex-panel__composer {
position: relative;
padding: var(--codex-panel-section-gap) var(--codex-panel-edge-padding-x)
calc(var(--codex-panel-section-gap) + var(--codex-panel-bottom-safe-area));
}
.codex-panel__composer-frame {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--codex-panel-control-gap);
padding: var(--codex-panel-section-gap) var(--codex-panel-edge-padding-x)
calc(var(--codex-panel-section-gap) + var(--codex-panel-bottom-safe-area));
min-width: 0;
border: var(--input-border-width, var(--border-width, 1px)) solid var(--background-modifier-border);
border-radius: var(--input-radius, var(--radius-s));
background: var(--background-modifier-form-field);
}
.codex-panel__composer-frame:focus-within {
border-color: var(--background-modifier-border-focus);
box-shadow: 0 0 0 var(--input-border-width, var(--border-width, 1px)) var(--background-modifier-border-focus);
}
.codex-panel__composer-input {
min-height: var(--codex-panel-composer-min-height);
max-height: min(var(--codex-panel-size-composer-input-max-height), 40vh);
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.codex-panel__composer-input.codex-panel__composer-input:hover,
.codex-panel__composer-input.codex-panel__composer-input:focus,
.codex-panel__composer-input.codex-panel__composer-input:focus-visible,
.codex-panel__composer-input.codex-panel__composer-input:active {
border: 0;
background: transparent;
box-shadow: none;
outline: none;
}
.codex-panel__composer-action {
@ -35,6 +61,7 @@
font-size: var(--font-ui-smaller);
line-height: var(--line-height-tight);
user-select: none;
padding: 0 var(--size-4-2) var(--size-4-1);
}
.codex-panel__composer-meta-status {

2
tests/styles.test.ts
View file

@ -123,9 +123,11 @@ describe("chat toolbar CSS", () => {
});
it("aligns composer status text with the input text inset", () => {
const composerFrame = /\.codex-panel__composer-frame \{(?<body>[^}]+)\}/.exec(styles)?.groups?.["body"] ?? "";
const composerMetaStatus = /\.codex-panel__composer-meta-status \{(?<body>[^}]+)\}/.exec(styles)?.groups?.["body"] ?? "";
const composerMetaFatal = /\.codex-panel__composer-meta-fatal \{(?<body>[^}]+)\}/.exec(styles)?.groups?.["body"] ?? "";
expect(composerFrame).toContain("background: var(--background-modifier-form-field)");
expect(composerMetaStatus).toContain("position: relative");
expect(composerMetaStatus).toContain("padding-inline-start: calc(var(--size-4-1) / 2)");
expect(composerMetaFatal).toContain("padding-inline-start: calc(var(--size-4-1) / 2)");