[settings] Use new components by julien-nc · Pull Request #393 · nextcloud/assistant

julien-nc · 2025-11-10T11:22:21Z

And fix some style issues.

Update vue and nextcloud/vue
Use NcFormGroup, NcFormBox and NcFormBoxSwitch for boolean settings
Remove redundant words like "Enable" in labels
Hide switch group titles
Only in admin settings
- Replace first admin settings hint with a note card
- Fix style issue in some note cards (extra bottom space)
- Move notecards below the switches
Only in personal settings
- Replace old custom warning hint with a note card

Location	Before	After
Admin
Personal

julien-nc · 2025-11-10T11:24:31Z

@marcoambrosini Can you guide us with this? Does this more or less covers the requirements of nextcloud/server#55667 ?

marcoambrosini · 2025-11-10T12:51:11Z

@julien-nc I think everything should wrap to the same width of the new components. Copying @kra-mo for further input

julien-nc · 2025-11-10T15:26:31Z

@marcoambrosini Done. Updated the initial comment.

lukasdotcom

LGTM except for something unrelated I noticed could be improved.

ShGKme · 2025-11-11T13:30:46Z

+				<NcFormBoxSwitch v-if="state.assistant_available"
+					:model-value="state.assistant_enabled"
+					@update:model-value="onCheckboxChanged($event, 'assistant_enabled')">
 					{{ t('assistant', 'Enable Nextcloud Assistant in header') }}
-				</div>
-			</NcCheckboxRadioSwitch>
-			<NcCheckboxRadioSwitch v-if="state.audio_chat_available"
-				:model-value="state.autoplay_audio_chat"
-				@update:model-value="onCheckboxChanged($event, 'autoplay_audio_chat')">
-				<div class="checkbox-text">
+				</NcFormBoxSwitch>
+				<NcFormBoxSwitch v-if="state.audio_chat_available"
+					:model-value="state.autoplay_audio_chat"
+					@update:model-value="onCheckboxChanged($event, 'autoplay_audio_chat')">
 					{{ t('assistant', 'Auto-play audio chat responses') }}
-				</div>
-			</NcCheckboxRadioSwitch>
-			<NcCheckboxRadioSwitch v-if="state.free_prompt_picker_available"
-				:model-value="state.free_prompt_picker_enabled"
-				@update:model-value="onCheckboxChanged($event, 'free_prompt_picker_enabled')">
-				<div class="checkbox-text">
+				</NcFormBoxSwitch>
+				<NcFormBoxSwitch v-if="state.free_prompt_picker_available"
+					:model-value="state.free_prompt_picker_enabled"
+					@update:model-value="onCheckboxChanged($event, 'free_prompt_picker_enabled')">
 					{{ t('assistant', 'Enable AI text generation in smart picker') }}
-				</div>
-			</NcCheckboxRadioSwitch>
-			<NcCheckboxRadioSwitch v-if="state.text_to_image_picker_available"
-				:model-value="state.text_to_image_picker_enabled"
-				@update:model-value="onCheckboxChanged($event, 'text_to_image_picker_enabled')">
-				<div class="checkbox-text">
+				</NcFormBoxSwitch>
+				<NcFormBoxSwitch v-if="state.text_to_image_picker_available"
+					:model-value="state.text_to_image_picker_enabled"
+					@update:model-value="onCheckboxChanged($event, 'text_to_image_picker_enabled')">
 					{{ t('assistant', 'Enable AI image generation in smart picker') }}
-				</div>
-			</NcCheckboxRadioSwitch>
-			<NcCheckboxRadioSwitch v-if="state.text_to_sticker_picker_available"
-				:model-value="state.text_to_sticker_picker_enabled"
-				@update:model-value="onCheckboxChanged($event, 'text_to_sticker_picker_enabled')">
-				<div class="checkbox-text">
+				</NcFormBoxSwitch>
+				<NcFormBoxSwitch v-if="state.text_to_sticker_picker_available"
+					:model-value="state.text_to_sticker_picker_enabled"
+					@update:model-value="onCheckboxChanged($event, 'text_to_sticker_picker_enabled')">
 					{{ t('assistant', 'Enable AI sticker generation in smart picker') }}
-				</div>
-			</NcCheckboxRadioSwitch>
-			<NcCheckboxRadioSwitch v-if="state.speech_to_text_picker_available"
-				:model-value="state.speech_to_text_picker_enabled"
-				@update:model-value="onCheckboxChanged($event, 'speech_to_text_picker_enabled')">
-				<div class="checkbox-text">
+				</NcFormBoxSwitch>
+				<NcFormBoxSwitch v-if="state.speech_to_text_picker_available"
+					:model-value="state.speech_to_text_picker_enabled"
+					@update:model-value="onCheckboxChanged($event, 'speech_to_text_picker_enabled')">
 					{{ t('assistant', 'Enable AI transcription in smart picker') }}
-				</div>
-			</NcCheckboxRadioSwitch>
-			<div v-if="noProvidersAvailable" class="settings-hint">
-				<InformationOutlineIcon class="icon" />
-				<span>
-					{{ t('assistant', 'No suitable providers are available. They must first be enabled by your administrator.') }}
-				</span>
-			</div>
+				</NcFormBoxSwitch>


All the NcFormBox* components are supposed to be used inside the <NcFormBox> component.(maybe not clear from the documentation, but follows Vue naming convention).

It makes it visually grouped with the rounded box effect and a small gap.

Are you saying it's fine to have a <NcFormGroup> wrapping a <NcFormGroup> wrapping <NcFormBox*> like this?

<NcFormGroup> <NcFormBox> <NcFormBoxSwitch /> </NcFormBox> </NcFormGroup>

ShGKme · 2025-11-11T13:31:30Z

+					<NcFormBoxSwitch :model-value="state.assistant_enabled"
+						@update:model-value="onCheckboxChanged($event, 'assistant_enabled')">
 						{{ t('assistant', 'Enable Nextcloud Assistant in header') }}
-					</div>
-				</NcCheckboxRadioSwitch>
-				<NcNoteCard v-if="!state.text_processing_available" type="warning">
-					{{ t('assistant', 'To be able to use this feature, please install at least one AI task processing provider.') }}
-				</NcNoteCard>
-				<NcCheckboxRadioSwitch
-					:model-value="state.free_prompt_picker_enabled"
-					:disabled="!state.free_prompt_task_type_available"
-					@update:model-value="onCheckboxChanged($event, 'free_prompt_picker_enabled')">
-					<div class="checkbox-text">
+					</NcFormBoxSwitch>


Might be less important for a single item, but better to still put it into the box to follow the structure.

Not sure what you mean. Should we only have NcFormBox* inside NcFormBox? No NcNoteCard?

Here is how it looks now with some NcFormBoxSwitch and NcNoteCard inside one NcFormBox:

Never mind, I miss looking at the collapsed diff view on GitHub.

However, NcNoteCard inside NcFormBox does look a bit off because of the extra margin it adds.

But I'll leave it to designers 👀

But I'll leave it to designers 👀

Yeah, no haha. I wouldn't put it in the box with such margins.

I moved the notecards below the group. They are not close to their related switch anymore but it's close enough:

…issues Signed-off-by: Julien Veyssier <julien-nc@posteo.net>

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>

kra-mo

What I said, and the boxes. But I'll let you developers sort that out :)

kra-mo · 2025-11-14T09:01:20Z

-						</ul>
-					</div>
-				</NcNoteCard>
+				<NcFormGroup :label="t('assistant', 'Select which features you want to enable')"


This is very redundant. Can we kill it? :D

Just label the group "Assistant features" or something for a11y and hide the label.

If you don't want to change strings with this PR, that is also fine, just hide it for now.

Nevermind, I can see you changed other strings.

A general note to labelling — it should be the name of a thing but not an instruction to the end user. Even if it is hidden, because for a11y using assistive technology with "Assistant features landmark" or "Assistant features group" is easier than "Select which features you want to enable landmark".

A long instruction if needed can be added to the description.

…ve switch labels Signed-off-by: Julien Veyssier <julien-nc@posteo.net>

julien-nc · 2025-11-14T11:41:16Z

The screenshots in the initial comment have been updated.

marcelklehr · 2025-11-14T12:22:34Z

Thanks @kra-mo @ShGKme @julien-nc ! Looks great now :)

julien-nc requested review from janepie, lukasdotcom and marcelklehr November 10, 2025 11:22

julien-nc added enhancement New feature or request 3. to review priority high labels Nov 10, 2025

julien-nc requested a review from marcoambrosini November 10, 2025 11:22

julien-nc changed the title ~~[admin settings] Use new components~~ [settings] Use new components Nov 10, 2025

marcelklehr reviewed Nov 10, 2025

View reviewed changes

Comment thread src/components/AdminSettings.vue Outdated

lukasdotcom approved these changes Nov 10, 2025

View reviewed changes

Comment thread src/components/AdminSettings.vue Outdated

ShGKme reviewed Nov 11, 2025

View reviewed changes

julien-nc added 6 commits November 13, 2025 12:27

enh(admin-settings): use new components in admin settings, fix style …

9c0c038

…issues Signed-off-by: Julien Veyssier <julien-nc@posteo.net>

enh(perso-settings): use new components in admin settings

8c0b15d

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>

enh(settings): use NcFormGroup instead of NcFormBox

25e865f

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>

enh(settings): make everything the same width in admin settings

a4e30af

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>

enh(settings): adjust the title for chat title generation system prompt

34b4a88

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>

enh(settings): wrap NcFormBox* in NcFormBox

5e03dab

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>

julien-nc force-pushed the enh/385/reoranize-settings branch from 2178283 to 5e03dab Compare November 13, 2025 11:39

julien-nc requested review from ShGKme and marcelklehr November 13, 2025 11:45

kra-mo requested changes Nov 14, 2025

View reviewed changes

enh(settings): hide group titles, move notecards out of groups, impro…

2ff2f64

…ve switch labels Signed-off-by: Julien Veyssier <julien-nc@posteo.net>

julien-nc requested review from ShGKme and kra-mo and removed request for ShGKme November 14, 2025 11:41

kra-mo approved these changes Nov 14, 2025

View reviewed changes

julien-nc merged commit a6c96ab into main Nov 14, 2025
17 checks passed

julien-nc deleted the enh/385/reoranize-settings branch November 14, 2025 12:51

julien-nc mentioned this pull request Nov 14, 2025

Assistant settings reorganization #385

Closed

julien-nc linked an issue Nov 14, 2025 that may be closed by this pull request

Assistant settings reorganization #385

Closed

janepie mentioned this pull request Dec 2, 2025

Prepare v2.10.0 #412

Merged

Uh oh!

Conversation

julien-nc commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

julien-nc commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

marcoambrosini commented Nov 10, 2025

Uh oh!

julien-nc commented Nov 10, 2025

Uh oh!

lukasdotcom left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

julien-nc Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kra-mo left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

julien-nc commented Nov 14, 2025

Uh oh!

marcelklehr commented Nov 14, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

julien-nc commented Nov 10, 2025 •

edited

Loading

julien-nc commented Nov 10, 2025 •

edited

Loading

julien-nc Nov 13, 2025 •

edited

Loading