Борьба с многострочным полем ввода для комбинированного пользователя и текста ИИ ⇐ CSS

[Anonymous]

Я работаю над полем ввода, которое объединяет ввод пользователя (

Код: Выделить всё

userText

) и сгенерированные AI предложения (

Код: Выделить всё

aiText

). Цель состоит в том, чтобы их появились как часть одного и того же предложения, даже если пользователь еще не принял предложения ИИ. : //i.sstatic.net/wyxeoey8.png "/>
В настоящее время поле ввода однострочное, и когда aitext больше, оно неловко разбивается в Середина поля ввода, заставляя его выглядеть разрозненным. В идеале, если aitext должен завершить новую строку, она должна начинаться с самого левого от входного компонента, а не с середины, где usertext заканчивается.
Вот текущая реализация: < /p>

Код: Выделить всё

  onClick={focusContentEditable}
className="relative flex justify-start items-start p-3 border border-border
bg-[#FFFFFF] text-[#1F1F1F] dark:bg-[#2A2A40] dark:text-[#EAEAEA]
focus-within:outline focus-within:outline-[#9462fd]
cursor-text rounded-2xl text-left w-full h-20 mx-auto
overflow-hidden"
>
{/* Placeholder */}
{userText.trim() === "" && !isFocused && (
Ask me anything...
)}


{/* {userText} */}


{aiText.length > 0 && userText.trim() !== "" && {aiText}}



< /code>
 Проблема: < /h3>
[list]
[*] Поле ввода однострочное, и я не применяю разрывы строк. < / li>
 Когда Aitext < /code> присутствует и длинная, он ломается в середине линии, что нарушает поток текста. < /li>
 Я хочу поле ввода для расширения по высоте, чтобы при необходимости разместить вторую строку, поэтому aitext 

может чисто завернуть к следующей строке, начиная с левого края.
[/list]
Что я пробовал:

• Использование довольного для ввода динамического текста.
• Комбинирование пользовательского текста и aitext в одном контейнере с Inline-Flex , чтобы сохранить их выровненные.

желаемое поведение:

[*] Поле ввода должно расширяться по высоте, чтобы разрешить многострочный текст. < /li>

Код: Выделить всё

aiText

должен завершить следующую строку, начиная с левого края, если она не вписывается в текущую строку.

Код: Выделить всё

userText

и aitext должны отображаться как часть одного и того же предложения. Заранее спасибо!


Подробнее здесь: https://stackoverflow.com/questions/794 ... nd-ai-text