diff --git a/packages/app/src/pages/session/composer/session-question-dock.tsx b/packages/app/src/pages/session/composer/session-question-dock.tsx index fd2ced3dc81..926de735083 100644 --- a/packages/app/src/pages/session/composer/session-question-dock.tsx +++ b/packages/app/src/pages/session/composer/session-question-dock.tsx @@ -1,4 +1,4 @@ -import { For, Show, createMemo, onCleanup, onMount, type Component } from "solid-js" +import { For, Show, createEffect, createMemo, onCleanup, onMount, type Component } from "solid-js" import { createStore } from "solid-js/store" import { Button } from "@opencode-ai/ui/button" import { DockPrompt } from "@opencode-ai/ui/dock-prompt" @@ -20,6 +20,8 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit answers: [] as QuestionAnswer[], custom: [] as string[], customOn: [] as boolean[], + expanded: {} as Record, + clipped: {} as Record, editing: false, sending: false, }) @@ -81,6 +83,27 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit root.style.setProperty("--question-prompt-max-height", `${max}px`) } + const clip = () => { + if (!root) return + + root.querySelectorAll(`[data-slot="option-description"][data-tab="${store.tab}"]`).forEach((item) => { + if (!(item instanceof HTMLElement)) return + if (item.dataset.expanded === "true") return + if (!item.dataset.opt) return + const opt = Number(item.dataset.opt) + if (Number.isNaN(opt)) return + const key = `${store.tab}:${opt}` + setStore("clipped", key, item.scrollWidth > item.clientWidth + 1) + // if content width is bigger than visible width, it is clipped/truncated. + }) + } + + createEffect(() => { + store.tab + options() + requestAnimationFrame(() => clip()) + }) + onMount(() => { let raf: number | undefined const update = () => { @@ -88,6 +111,7 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit raf = requestAnimationFrame(() => { raf = undefined measure() + clip() }) } @@ -203,6 +227,15 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit pick(opt.label) } + const expand = (event: MouseEvent, opt: number) => { + event.preventDefault() + event.stopPropagation() + if (store.sending) return + const key = `${store.tab}:${opt}` + setStore("expanded", key, (value) => !value) + requestAnimationFrame(() => clip()) + } + const commitCustom = () => { setStore("editing", false) customUpdate(input()) @@ -287,6 +320,10 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit {(opt, i) => { const picked = () => store.answers[store.tab]?.includes(opt.label) ?? false + const text = opt.description?.trim() ?? "" + const key = () => `${store.tab}:${i()}` + const opened = () => store.expanded[key()] === true + const clipped = () => store.clipped[key()] === true return ( diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css index bea33ff54cf..07909487131 100644 --- a/packages/ui/src/components/message-part.css +++ b/packages/ui/src/components/message-part.css @@ -1013,6 +1013,28 @@ white-space: nowrap; } + [data-slot="option-description"][data-expanded="true"] { + overflow: visible; + text-overflow: clip; + white-space: normal; + overflow-wrap: anywhere; + } + + [data-slot="option-description-toggle"] { + font-family: var(--font-family-sans); + font-size: 12px; + font-weight: var(--font-weight-medium); + line-height: var(--line-height-large); + color: var(--text-interactive-base); + cursor: pointer; + width: fit-content; + user-select: none; + + &:hover { + text-decoration: underline; + } + } + [data-slot="question-option"][data-custom="true"] { [data-slot="option-description"] { overflow: visible; diff --git a/packages/ui/src/i18n/ar.ts b/packages/ui/src/i18n/ar.ts index 4d79f3d001c..65b0603121b 100644 --- a/packages/ui/src/i18n/ar.ts +++ b/packages/ui/src/i18n/ar.ts @@ -115,4 +115,6 @@ export const dict = { "ui.question.multiHint": "حدد كل ما ينطبق", "ui.question.singleHint": "حدد إجابة واحدة", "ui.question.custom.placeholder": "اكتب إجابتك...", + "ui.question.readMore": "اقرأ المزيد", + "ui.question.readLess": "اقرأ أقل", } diff --git a/packages/ui/src/i18n/br.ts b/packages/ui/src/i18n/br.ts index 777f1455bd5..b8b7bed4fa9 100644 --- a/packages/ui/src/i18n/br.ts +++ b/packages/ui/src/i18n/br.ts @@ -115,4 +115,6 @@ export const dict = { "ui.question.multiHint": "Selecione todas que se aplicam", "ui.question.singleHint": "Selecione uma resposta", "ui.question.custom.placeholder": "Digite sua resposta...", + "ui.question.readMore": "Ler mais", + "ui.question.readLess": "Ler menos", } diff --git a/packages/ui/src/i18n/bs.ts b/packages/ui/src/i18n/bs.ts index e499647dff3..08b05057a28 100644 --- a/packages/ui/src/i18n/bs.ts +++ b/packages/ui/src/i18n/bs.ts @@ -119,4 +119,6 @@ export const dict = { "ui.question.multiHint": "Odaberi sve što važi", "ui.question.singleHint": "Odaberi jedan odgovor", "ui.question.custom.placeholder": "Unesi svoj odgovor...", + "ui.question.readMore": "Pročitaj više", + "ui.question.readLess": "Pročitaj manje", } satisfies Partial> diff --git a/packages/ui/src/i18n/da.ts b/packages/ui/src/i18n/da.ts index 546040598f8..2f8827cb3ea 100644 --- a/packages/ui/src/i18n/da.ts +++ b/packages/ui/src/i18n/da.ts @@ -114,4 +114,6 @@ export const dict = { "ui.question.multiHint": "Vælg alle der gælder", "ui.question.singleHint": "Vælg ét svar", "ui.question.custom.placeholder": "Skriv dit svar...", + "ui.question.readMore": "Læs mere", + "ui.question.readLess": "Læs mindre", } diff --git a/packages/ui/src/i18n/de.ts b/packages/ui/src/i18n/de.ts index bf5730f85f2..05176f17aed 100644 --- a/packages/ui/src/i18n/de.ts +++ b/packages/ui/src/i18n/de.ts @@ -118,4 +118,6 @@ export const dict = { "ui.question.multiHint": "Alle zutreffenden auswählen", "ui.question.singleHint": "Eine Antwort auswählen", "ui.question.custom.placeholder": "Geben Sie Ihre Antwort ein...", + "ui.question.readMore": "Mehr lesen", + "ui.question.readLess": "Weniger lesen", } satisfies Partial> diff --git a/packages/ui/src/i18n/en.ts b/packages/ui/src/i18n/en.ts index 4c9b89c6cfe..79aa9d04878 100644 --- a/packages/ui/src/i18n/en.ts +++ b/packages/ui/src/i18n/en.ts @@ -115,4 +115,6 @@ export const dict = { "ui.question.multiHint": "Select all answers that apply", "ui.question.singleHint": "Select one answer", "ui.question.custom.placeholder": "Type your answer...", + "ui.question.readMore": "Read more", + "ui.question.readLess": "Read less", } diff --git a/packages/ui/src/i18n/es.ts b/packages/ui/src/i18n/es.ts index 2f21b398f1c..0cc4c4a4be5 100644 --- a/packages/ui/src/i18n/es.ts +++ b/packages/ui/src/i18n/es.ts @@ -115,4 +115,6 @@ export const dict = { "ui.question.multiHint": "Selecciona todas las que correspondan", "ui.question.singleHint": "Selecciona una respuesta", "ui.question.custom.placeholder": "Escribe tu respuesta...", + "ui.question.readMore": "Leer más", + "ui.question.readLess": "Leer menos", } diff --git a/packages/ui/src/i18n/fr.ts b/packages/ui/src/i18n/fr.ts index d4ea9386848..36432245d98 100644 --- a/packages/ui/src/i18n/fr.ts +++ b/packages/ui/src/i18n/fr.ts @@ -115,4 +115,6 @@ export const dict = { "ui.question.multiHint": "Sélectionnez tout ce qui s'applique", "ui.question.singleHint": "Sélectionnez une réponse", "ui.question.custom.placeholder": "Tapez votre réponse...", + "ui.question.readMore": "Lire plus", + "ui.question.readLess": "Lire moins", } diff --git a/packages/ui/src/i18n/ja.ts b/packages/ui/src/i18n/ja.ts index 0a4366ebefd..00c9495b776 100644 --- a/packages/ui/src/i18n/ja.ts +++ b/packages/ui/src/i18n/ja.ts @@ -114,4 +114,6 @@ export const dict = { "ui.question.multiHint": "該当するものをすべて選択", "ui.question.singleHint": "1 つ選択", "ui.question.custom.placeholder": "回答を入力...", + "ui.question.readMore": "続きを読む", + "ui.question.readLess": "表示を減らす", } diff --git a/packages/ui/src/i18n/ko.ts b/packages/ui/src/i18n/ko.ts index 58bd51b9910..c950eb87541 100644 --- a/packages/ui/src/i18n/ko.ts +++ b/packages/ui/src/i18n/ko.ts @@ -115,4 +115,6 @@ export const dict = { "ui.question.multiHint": "해당하는 항목 모두 선택", "ui.question.singleHint": "하나의 답변을 선택", "ui.question.custom.placeholder": "답변 입력...", + "ui.question.readMore": "더 보기", + "ui.question.readLess": "접기", } diff --git a/packages/ui/src/i18n/no.ts b/packages/ui/src/i18n/no.ts index b7e604f9acb..2d5339114d7 100644 --- a/packages/ui/src/i18n/no.ts +++ b/packages/ui/src/i18n/no.ts @@ -118,4 +118,6 @@ export const dict: Record = { "ui.question.multiHint": "Velg alle som gjelder", "ui.question.singleHint": "Velg ett svar", "ui.question.custom.placeholder": "Skriv svaret ditt...", + "ui.question.readMore": "Les mer", + "ui.question.readLess": "Les mindre", } diff --git a/packages/ui/src/i18n/pl.ts b/packages/ui/src/i18n/pl.ts index fbccb92207c..59d718fecc6 100644 --- a/packages/ui/src/i18n/pl.ts +++ b/packages/ui/src/i18n/pl.ts @@ -114,4 +114,6 @@ export const dict = { "ui.question.multiHint": "Zaznacz wszystkie pasujące", "ui.question.singleHint": "Wybierz jedną odpowiedź", "ui.question.custom.placeholder": "Wpisz swoją odpowiedź...", + "ui.question.readMore": "Czytaj więcej", + "ui.question.readLess": "Czytaj mniej", } diff --git a/packages/ui/src/i18n/ru.ts b/packages/ui/src/i18n/ru.ts index 705f2d21090..d2cb22c1c7e 100644 --- a/packages/ui/src/i18n/ru.ts +++ b/packages/ui/src/i18n/ru.ts @@ -114,4 +114,6 @@ export const dict = { "ui.question.multiHint": "Выберите все подходящие", "ui.question.singleHint": "Выберите один ответ", "ui.question.custom.placeholder": "Введите ваш ответ...", + "ui.question.readMore": "Читать дальше", + "ui.question.readLess": "Читать меньше", } diff --git a/packages/ui/src/i18n/th.ts b/packages/ui/src/i18n/th.ts index cf536e1ff6c..158f4ca9a70 100644 --- a/packages/ui/src/i18n/th.ts +++ b/packages/ui/src/i18n/th.ts @@ -116,4 +116,6 @@ export const dict = { "ui.question.multiHint": "เลือกทั้งหมดที่ใช้", "ui.question.singleHint": "เลือกหนึ่งคำตอบ", "ui.question.custom.placeholder": "พิมพ์คำตอบของคุณ...", + "ui.question.readMore": "อ่านเพิ่มเติม", + "ui.question.readLess": "อ่านน้อยลง", } diff --git a/packages/ui/src/i18n/zh.ts b/packages/ui/src/i18n/zh.ts index 5d3d5613da5..f50a2b8e972 100644 --- a/packages/ui/src/i18n/zh.ts +++ b/packages/ui/src/i18n/zh.ts @@ -119,4 +119,6 @@ export const dict = { "ui.question.multiHint": "可多选", "ui.question.singleHint": "选择一个答案", "ui.question.custom.placeholder": "输入你的答案...", + "ui.question.readMore": "阅读更多", + "ui.question.readLess": "阅读更少", } satisfies Partial> diff --git a/packages/ui/src/i18n/zht.ts b/packages/ui/src/i18n/zht.ts index b61349e25d2..5a572639ec3 100644 --- a/packages/ui/src/i18n/zht.ts +++ b/packages/ui/src/i18n/zht.ts @@ -119,4 +119,6 @@ export const dict = { "ui.question.multiHint": "可多選", "ui.question.singleHint": "選擇一個答案", "ui.question.custom.placeholder": "輸入你的答案...", + "ui.question.readMore": "閱讀更多", + "ui.question.readLess": "閱讀更少", } satisfies Partial>