github/AutoGPT
1
1
Fork 0
mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-04-30 03:00:41 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(copilot): auto-size editable step textareas on initial render and input

Browse Source 
- Replace <input type="text"> with <textarea> for step descriptions
- Use ref callback to set height from scrollHeight on every render so
  long descriptions wrap to multiple lines by default without interaction
- Bump countdown ring container from 20px to 24px and text from 9px to
  11px for better legibility

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
anvyle
2026-04-09 22:10:51 +02:00
parent 5fa33111de
commit b9d47a8cf5
1 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
autogpt_platform/frontend/src/app/(platform)/copilot/tools/DecomposeGoal/DecomposeGoal.tsx
View File

@@ -27,7 +27,7 @@ import {
ToolIcon,
} from "./helpers";
const COUNTDOWN_SECONDS = 99;
const COUNTDOWN_SECONDS = 60;
const RADIUS = 15;
const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
@@ -191,21 +191,27 @@ export function DecomposeGoalTool({ part, isLastMessage }: Props) {
{editableSteps.map((step, i) => (
<div key={step.step_id} className="flex flex-col">
<div className="flex items-center gap-2 py-1">
<span className="w-5 shrink-0 text-xs text-slate-400">
<div className="flex items-start gap-2 py-1">
<span className="w-5 shrink-0 pt-1 text-xs text-slate-400">
{i + 1}.
</span>
<input
type="text"
<textarea
ref={(el) => {
if (el) {
el.style.height = "auto";
el.style.height = `${el.scrollHeight}px`;
}
}}
value={step.description}
onChange={(e) => handleStepChange(i, e.target.value)}
className="flex-1 rounded border border-slate-200 px-2 py-1 text-sm focus:border-neutral-400 focus:outline-none"
rows={1}
className="flex-1 resize-none overflow-hidden rounded border border-slate-200 px-2 py-1 text-sm focus:border-neutral-400 focus:outline-none"
placeholder="Step description"
/>
<button
type="button"
onClick={() => handleStepDelete(i)}
className="text-slate-400 hover:text-red-500"
className="mt-1 text-slate-400 hover:text-red-500"
aria-label="Remove step"
>
<TrashIcon size={14} />
@@ -248,10 +254,10 @@ export function DecomposeGoalTool({ part, isLastMessage }: Props) {
<span className="group/label inline-flex items-center gap-1">
<span className="inline-flex items-center gap-1 group-hover/label:hidden">
Starting in
<span className="relative inline-flex h-5 w-5 items-center justify-center">
<span className="relative inline-flex h-6 w-6 items-center justify-center">
<svg
width="20"
height="20"
width="24"
height="24"
viewBox="0 0 34 34"
className="absolute -rotate-90"
>
@@ -277,7 +283,7 @@ export function DecomposeGoalTool({ part, isLastMessage }: Props) {
className="text-neutral-600 transition-[stroke-dashoffset] duration-1000 ease-linear"
/>
</svg>
<span className="relative z-10 text-[9px] font-semibold tabular-nums text-neutral-700">
<span className="relative z-10 text-[11px] font-semibold tabular-nums text-neutral-700">
{secondsLeft}
</span>
</span>