bhetherman/open-webui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek committed 2026-08-13 18:33:51 -06:00
1 parent 133549a87e
commit b018feb741
1 file changed
+51 -93
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/AskUserCard.svelte
+51 -93
View File
@@ -170,115 +170,73 @@
</script> </script>
{#if show} {#if show}
<section <section class="my-1 rounded-2xl bg-gray-50/70 px-3.5 py-3 dark:bg-white/[0.035]">
class="my-2 rounded-2xl border border-gray-50 bg-white px-3.5 py-3 dark:border-gray-850 dark:bg-gray-900" <div class="space-y-2">
>
<div class="mb-3 flex items-center justify-between gap-3">
<div class="text-[0.6875rem] tracking-wide text-gray-500 dark:text-gray-400">
{$i18n.t('Assistant needs your input')}
</div>
<div class="shrink-0 text-right text-[0.6875rem] text-gray-500 dark:text-gray-400">
{$i18n.t('Question')}
{questionIndex + 1}
{$i18n.t('of')}
{questions.length}
</div>
</div>
<div class="space-y-2.5">
{#if question} {#if question}
{#key question.id} {#key question.id}
<div class="space-y-2.5"> <div class="space-y-2">
<div> <div>
<div class="text-sm font-medium tracking-[-0.01em] text-gray-900 dark:text-gray-100"> <div class="flex items-center justify-between gap-3">
{question.header} <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
{question.header}
</div>
{#if questions.length > 1}
<div
class="shrink-0 text-right text-[0.6875rem] text-gray-500 dark:text-gray-400"
>
{questionIndex + 1}/{questions.length}
</div>
{/if}
</div> </div>
<div class="mt-1 text-xs leading-relaxed text-gray-600 dark:text-gray-300"> <div class="mt-0.5 text-xs leading-relaxed text-gray-600 dark:text-gray-300">
{question.question} {question.question}
</div> </div>
</div> </div>
<div class="space-y-0.5"> <div class="space-y-1">
{#each question.options || [] as option, optionIndex} <div class="space-y-0.5">
<!-- svelte-ignore a11y_click_events_have_key_events --> {#each question.options || [] as option, optionIndex}
<!-- svelte-ignore a11y_no_noninteractive_element_interactions --> <button
<label type="button"
class="flex cursor-pointer items-start gap-2.5 rounded-2xl px-2.5 py-2 transition-colors {isSelectedOption( class="group flex w-full min-w-0 items-baseline gap-2 rounded-lg py-1.5 text-left transition-colors {isSelectedOption(
question,
optionIndex
)
? 'bg-gray-50 shadow-sm dark:bg-white/[0.08]'
: 'hover:bg-gray-50/80 dark:hover:bg-white/[0.05]'}"
on:click={() => isSelectedOption(question, optionIndex) && advance()}
>
<input
class="sr-only"
type="radio"
name={question.id}
value={option.label}
checked={isSelectedOption(question, optionIndex)}
on:change={() => selectOption(question, option, optionIndex)}
/>
<span
class="mt-1 flex size-3.5 shrink-0 items-center justify-center rounded-full border {isSelectedOption(
question, question,
optionIndex optionIndex
) )
? 'border-gray-900 dark:border-white' ? 'text-gray-950 dark:text-white'
: 'border-gray-300 dark:border-white/25'}" : 'text-gray-700 hover:text-gray-950 dark:text-gray-300 dark:hover:text-white'}"
on:click={() => selectOption(question, option, optionIndex)}
> >
{#if isSelectedOption(question, optionIndex)} <span class="min-w-0 shrink-0 text-xs">{option.label}</span>
<span class="size-1.5 rounded-full bg-gray-900 dark:bg-white"></span> <span
{/if} class="min-w-0 text-xs leading-relaxed text-gray-500 transition-colors group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300"
</span> >
<span class="min-w-0 text-xs"> {option.description}
<span class="text-gray-800 dark:text-gray-100">{option.label}</span> </span>
{#if optionIndex === 0} {#if optionIndex === 0}
<span class="ml-1.5 text-[0.625rem] text-gray-400 dark:text-gray-500"> <span
class="shrink-0 rounded-full bg-gray-200/70 px-1.5 py-0.5 text-[0.625rem] text-gray-500 dark:bg-white/[0.08] dark:text-gray-400"
>
{$i18n.t('Recommended')} {$i18n.t('Recommended')}
</span> </span>
{/if} {/if}
<span class="mt-0.5 block leading-relaxed text-gray-500 dark:text-gray-400"> </button>
{option.description} {/each}
</span> </div>
</span>
</label>
{/each}
{#if questionAllowsOther(question)} {#if questionAllowsOther(question)}
<label <div class="flex min-w-0 items-baseline gap-2 rounded-lg py-1.5">
class="flex cursor-pointer items-center gap-2.5 rounded-2xl px-2.5 py-2 text-xs transition-colors {isSelectedOther( <div
question class="shrink-0 text-xs {isSelectedOther(question)
) ? 'text-gray-950 dark:text-white'
? 'bg-gray-50 shadow-sm dark:bg-white/[0.08]' : 'text-gray-700 dark:text-gray-300'}"
: 'hover:bg-gray-50/80 dark:hover:bg-white/[0.05]'}"
>
<input
class="sr-only"
type="radio"
name={question.id}
value="__other__"
checked={isSelectedOther(question)}
on:change={() => selectOther(question)}
/>
<span
class="flex size-3.5 shrink-0 items-center justify-center rounded-full border {isSelectedOther(
question
)
? 'border-gray-900 dark:border-white'
: 'border-gray-300 dark:border-white/25'}"
> >
{#if selectedAnswer?.type === 'other'} {$i18n.t('Other')}
<span class="size-1.5 rounded-full bg-gray-900 dark:bg-white"></span> </div>
{/if}
</span>
<span class="text-gray-700 dark:text-gray-200">{$i18n.t('Other')}</span>
</label>
{#if selectedAnswer?.type === 'other'}
<input <input
class="w-full rounded-2xl border border-gray-100 bg-white px-3 py-2 text-xs text-gray-800 outline-hidden placeholder:text-gray-400 focus:border-gray-200 dark:border-gray-850 dark:bg-gray-950 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-gray-700" class="min-w-0 flex-1 bg-transparent text-xs text-gray-800 outline-hidden placeholder:text-gray-400 dark:text-gray-100 dark:placeholder:text-gray-500"
placeholder={$i18n.t('Type your answer')} placeholder={$i18n.t('Type your answer')}
value={otherText(question)} value={otherText(question)}
on:focus={() => selectOther(question)}
on:input={(event) => on:input={(event) =>
updateOther(question, (event.currentTarget as HTMLInputElement).value)} updateOther(question, (event.currentTarget as HTMLInputElement).value)}
on:keydown={(event) => { on:keydown={(event) => {
@@ -288,25 +246,25 @@
} }
}} }}
/> />
{/if} </div>
{/if} {/if}
</div> </div>
</div> </div>
{/key} {/key}
{/if} {/if}
<div class="flex items-center justify-between gap-2 pt-0.5"> <div class="flex items-center justify-between gap-2">
<div class="flex items-center gap-1.5"> <div class="flex items-center gap-1.5">
<button <button
type="button" type="button"
class="rounded-full px-3 py-1.5 text-xs text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-100" class="rounded-full py-1 pr-2.5 text-xs text-gray-500 transition-colors hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100"
on:click={cancel} on:click={cancel}
> >
{$i18n.t('Cancel')} {$i18n.t('Cancel')}
</button> </button>
<button <button
type="button" type="button"
class="rounded-full px-3 py-1.5 text-xs text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800 disabled:opacity-30 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-100" class="rounded-full px-2.5 py-1 text-xs text-gray-500 transition-colors hover:text-gray-800 disabled:opacity-30 dark:text-gray-400 dark:hover:text-gray-100"
disabled={questionIndex === 0} disabled={questionIndex === 0}
on:click={() => (questionIndex -= 1)} on:click={() => (questionIndex -= 1)}
> >
@@ -316,7 +274,7 @@
{#if questionIndex < questions.length - 1} {#if questionIndex < questions.length - 1}
<button <button
type="button" type="button"
class="rounded-full bg-gray-900 px-3.5 py-1.5 text-xs font-medium text-white transition hover:bg-gray-800 active:scale-[0.98] dark:bg-white dark:text-black dark:hover:bg-white/90" class="rounded-full bg-gray-900 px-3 py-1 text-xs font-medium text-white transition hover:opacity-90 active:scale-[0.98] dark:bg-white dark:text-black"
on:click={() => (questionIndex += 1)} on:click={() => (questionIndex += 1)}
> >
{$i18n.t('Next')} {$i18n.t('Next')}
@@ -324,7 +282,7 @@
{:else} {:else}
<button <button
type="button" type="button"
class="rounded-full bg-gray-900 px-3.5 py-1.5 text-xs font-medium text-white transition hover:bg-gray-800 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-40 dark:bg-white dark:text-black dark:hover:bg-white/90" class="rounded-full bg-gray-900 px-3 py-1 text-xs font-medium text-white transition hover:opacity-90 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-40 dark:bg-white dark:text-black"
disabled={!complete} disabled={!complete}
on:click={() => submit()} on:click={() => submit()}
> >