chore: add badges & apply ai service prompt changes

telerik · Sep 20, 2024 · 27ebedf · 27ebedf
1 parent 7ce240d
commit 27ebedf
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 38 deletions.
diff --git a/...warehouse/src/app/components/numeric-textbox-buttons/numeric-textbox-buttons.component.ts b/...warehouse/src/app/components/numeric-textbox-buttons/numeric-textbox-buttons.component.ts
@@ -44,6 +44,7 @@ export class NumericTextboxButtonsComponent {
     public increaseValue(): void {
         if (this.max && this.value + this.step >= this.max) {
             this.value = this.max;
+            this.valueChange.emit(this.value);
             return;
         }
         this.value += this.step;
@@ -53,6 +54,7 @@ export class NumericTextboxButtonsComponent {
     public decreaseValue(): void {
         if (this.min && this.value - this.step <= this.min) {
             this.value = this.min;
+            this.valueChange.emit(this.value);
             return;
         }
         this.value -= this.step;

diff --git a/...standalone/coffee-warehouse/src/app/components/settings-list/settings-list.component.html b/...standalone/coffee-warehouse/src/app/components/settings-list/settings-list.component.html
@@ -1,56 +1,72 @@
 <kendo-label text="Specify disability:"></kendo-label>
-<kendo-combobox
-    [data]="disabilitiesData"
-    [valuePrimitive]="true"
-    (valueChange)="onValueChange($event)"
-    textField="text"
-    valueField="text" class="k-mb-4 !k-w-full"
-    [size]="'large'"
-    placeholder="Write or select type of disability">
-    <ng-template kendoSuffixTemplate>
-        <button kendoButton fillMode="flat" (click)="activateSpeech()" [svgIcon]="microphoneIcon"></button>
-    </ng-template>
-</kendo-combobox>
+<kendo-badge-container>
+    <kendo-combobox
+        [data]="disabilitiesData"
+        [valuePrimitive]="true"
+        (valueChange)="onValueChange($event)"
+        [value]="comboboxValue"
+        textField="text"
+        valueField="text" class="k-mb-4 !k-w-full"
+        [size]="'large'"
+        placeholder="Write or select type of disability">
+        <ng-template kendoSuffixTemplate>
+            <button kendoButton fillMode="flat" (click)="activateSpeech()" [svgIcon]="microphoneIcon"></button>
+        </ng-template>
+    </kendo-combobox>
+    <kendo-info-badge *ngIf="comboboxValue"></kendo-info-badge>
+</kendo-badge-container>
 
 <kendo-expansionpanel title="Accessibility settings" [(expanded)]="settingsExpanded">
     <form class="k-form k-form-md">
         <kendo-formfield>
             <kendo-label text="Text size:"></kendo-label>
-            <kendo-numeric-textbox-buttons (valueChange)="settingChange({'fontSize': $event})" [value]="getSetting('fontSize')"></kendo-numeric-textbox-buttons>
+            <kendo-numeric-textbox-buttons [showBadge]="getSetting('fontSize') !== 16" (valueChange)="settingChange({'fontSize': $event})" [value]="getSetting('fontSize')"></kendo-numeric-textbox-buttons>
         </kendo-formfield>
         <kendo-formfield>
             <kendo-label text="Color theme:"></kendo-label>
-            <kendo-buttongroup selection="single" width="100%">
-                <button kendoButton size="large" [svgIcon]="contrastIcon" (click)="settingChange({'colorTheme': getSetting('colorTheme') === 'contrast' ? 'defaultTheme' : 'contrast'})" [selected]="getSetting('colorTheme') === 'contrast'">Contrast</button>
-                <button kendoButton size="large" [svgIcon]="darkModeIcon" (click)="settingChange({'colorTheme': getSetting('colorTheme') === 'dark' ? 'defaultTheme' : 'dark'})" [selected]="getSetting('colorTheme') === 'dark'">Dark</button>
-            </kendo-buttongroup>
+            <kendo-badge-container>
+                <kendo-buttongroup selection="single" width="100%">
+                    <button kendoButton size="large" [svgIcon]="contrastIcon" (click)="settingChange({'colorTheme': getSetting('colorTheme') === 'contrast' ? 'defaultTheme' : 'contrast'})" [selected]="getSetting('colorTheme') === 'contrast'">Contrast</button>
+                    <button kendoButton size="large" [svgIcon]="darkModeIcon" (click)="settingChange({'colorTheme': getSetting('colorTheme') === 'dark' ? 'defaultTheme' : 'dark'})" [selected]="getSetting('colorTheme') === 'dark'">Dark</button>
+                </kendo-buttongroup>
+                <kendo-info-badge *ngIf="getSetting('colorTheme') === 'dark' || getSetting('colorTheme') === 'contrast'"></kendo-info-badge>
+            </kendo-badge-container>
         </kendo-formfield>
 
         <kendo-formfield>
             <kendo-label text="Font:"></kendo-label>
-            <kendo-buttongroup selection="single" width="100%">
-                <button kendoButton [svgIcon]="fontIcon" size="large" (click)="settingChange({'fontFamily': getSetting('fontFamily') === 'legible' ? 'defaultFont' : 'legible'})" [selected]="getSetting('fontFamily') === 'legible'">Legible Font</button>
-                <button kendoButton [svgIcon]="dyslexiaFontIcon" size="large" (click)="settingChange({'fontFamily': getSetting('fontFamily') === 'dyslexia' ? 'defaultFont' : 'dyslexia'})" [selected]="getSetting('fontFamily') === 'dyslexia'">Dyslexia Font</button>
-            </kendo-buttongroup>
+            <kendo-badge-container>
+                <kendo-buttongroup selection="single" width="100%">
+                    <button kendoButton [svgIcon]="fontIcon" size="large" (click)="settingChange({'fontFamily': getSetting('fontFamily') === 'legible' ? 'defaultFont' : 'legible'})" [selected]="getSetting('fontFamily') === 'legible'">Legible Font</button>
+                    <button kendoButton [svgIcon]="dyslexiaFontIcon" size="large" (click)="settingChange({'fontFamily': getSetting('fontFamily') === 'dyslexia' ? 'defaultFont' : 'dyslexia'})" [selected]="getSetting('fontFamily') === 'dyslexia'">Dyslexia Font</button>
+                </kendo-buttongroup>
+                <kendo-info-badge *ngIf="getSetting('fontFamily') === 'legible' || getSetting('fontFamily') === 'dyslexia'"></kendo-info-badge>
+            </kendo-badge-container>
         </kendo-formfield>
 
         <div class="common-wrapper">
             <kendo-label text="Common:"></kendo-label>
             <div class="buttons-wrapper">
-                <button kendoButton size="large" [svgIcon]="underlineIcon" [toggleable]="true" (selectedChange)="settingChange({'underlineLinks': $event})" [selected]="getSetting('underlineLinks')">Underiline Links</button>
-                <button kendoButton size="large" [svgIcon]="pauseIcon" [toggleable]="true" (selectedChange)="settingChange({'pauseAnimations': $event})" [selected]="getSetting('pauseAnimations')">Pause Animation</button>
+                <kendo-badge-container>
+                    <button kendoButton size="large" [svgIcon]="underlineIcon" [toggleable]="true" (selectedChange)="settingChange({'underlineLinks': $event})" [selected]="getSetting('underlineLinks')">Underiline Links</button>
+                    <kendo-info-badge *ngIf="getSetting('underlineLinks')"></kendo-info-badge>
+                </kendo-badge-container>
+                <kendo-badge-container>
+                    <button kendoButton size="large" [svgIcon]="pauseIcon" [toggleable]="true" (selectedChange)="settingChange({'pauseAnimations': $event})" [selected]="getSetting('pauseAnimations')">Pause Animation</button>
+                    <kendo-info-badge *ngIf="getSetting('pauseAnimations')"></kendo-info-badge>
+                </kendo-badge-container>
                 <button kendoButton size="large" [svgIcon]="resizeIcon" [toggleable]="true" (selectedChange)="settingChange({'lgSizeWidgets': $event})" [selected]="getSetting('lgSizeWidgets')">Large Size Widgets</button>
             </div>
         </div>
 
         <kendo-formfield>
             <kendo-label text="Line Height:"></kendo-label>
-            <kendo-numeric-textbox-buttons [min]="1" (valueChange)="settingChange({'lineHeight': $event})" [value]="getSetting('lineHeight')"></kendo-numeric-textbox-buttons>
+            <kendo-numeric-textbox-buttons [showBadge]="getSetting('lineHeight') !== 1" [min]="1" (valueChange)="settingChange({'lineHeight': $event})" [value]="getSetting('lineHeight')"></kendo-numeric-textbox-buttons>
         </kendo-formfield>
 
         <kendo-formfield>
             <kendo-label text="Letter Spacing:"></kendo-label>
-            <kendo-numeric-textbox-buttons (valueChange)="settingChange({'letterSpacing': $event})" [value]="getSetting('letterSpacing')"></kendo-numeric-textbox-buttons>
+            <kendo-numeric-textbox-buttons [showBadge]="getSetting('letterSpacing') !== 0" (valueChange)="settingChange({'letterSpacing': $event})" [value]="getSetting('letterSpacing')"></kendo-numeric-textbox-buttons>
         </kendo-formfield>
 
         <kendo-formfield>

diff --git a/...s-standalone/coffee-warehouse/src/app/components/settings-list/settings-list.component.ts b/...s-standalone/coffee-warehouse/src/app/components/settings-list/settings-list.component.ts
@@ -1,5 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
-import { SettingsService } from '../../settings.service';
+import { defaultFont, SettingsService } from '../../settings.service';
 import { groupBy } from '@progress/kendo-data-query';
 import { SVGIcon, arrowRotateCcwIcon, fontFamilyIcon, imageResizeIcon, pauseSmIcon, underlineIcon } from '@progress/kendo-svg-icons';
 import { contrastIcon, darkModeIcon, dyslexiaFontIcon, microphoneIcon } from './svg-icons';
@@ -15,6 +15,7 @@ import { IWindow } from '../../models/window.model';
 export class SettingsListComponent {
     public settingsExpanded = true;
     public settings: any;
+    public comboboxValue = null;
 
     public disabilitiesData: any[] = groupBy([{
             type: 'Visual Impairments',
@@ -44,7 +45,7 @@ export class SettingsListComponent {
             type: 'Cognitive Disabilities',
             text: 'ADHD'
         }], [{field: 'type'}]);
-        
+
     public recognition: any;
 
     public resetIcon: SVGIcon = arrowRotateCcwIcon;
@@ -56,6 +57,7 @@ export class SettingsListComponent {
     public pauseIcon: SVGIcon = pauseSmIcon;
     public resizeIcon: SVGIcon = imageResizeIcon;
     public dyslexiaFontIcon: SVGIcon = dyslexiaFontIcon;
+    public defaultFont = defaultFont;
 
     @ViewChild(ComboBoxComponent) private combo: ComboBoxComponent;
     private subs: Subscription = new Subscription();
@@ -92,7 +94,7 @@ export class SettingsListComponent {
     	};
     }
 
-    public getSetting(prop: string): string {
+    public getSetting(prop: string): any {
         return this.settingsService.settings[prop];
     }
 
@@ -118,6 +120,8 @@ export class SettingsListComponent {
             body: 'body',
             userId: 1,
         }).subscribe(r => console.log('from API', r)));
+
+        this.comboboxValue = value;
     }
 
     public activateSpeech() {

diff --git a/examples-standalone/coffee-warehouse/src/app/openai.service.ts b/examples-standalone/coffee-warehouse/src/app/openai.service.ts
@@ -35,14 +35,17 @@ export class OpenAIService {
 
     const completion = await this.client.chat.completions.create(messages);
     const result = completion.choices[0].message.content;
+    console.log(result);
     return result;
   }
 
   private createMessages(selectedDisabilities: string[]): ChatCompletionCreateParamsNonStreaming {
     const prompt = `
     Based on the following disabilities: ${selectedDisabilities.join(', ')},
-    suggest the appropriate accessibility settings as a list of key-value pairs.
-    The keys should match the following settings:
+    suggest the appropriate accessibility settings as a single object.
+    Only include the settings that are applicable to the disabilities.
+
+    The possible settings are:
     - textSize: Numeric value for text size (e.g. 16)
     - colorTheme: Either 'contrast' or 'dark'
     - font: Either 'legible' or 'dyslexia'
@@ -52,9 +55,9 @@ export class OpenAIService {
     - lineHeight: Numeric value for line height (e.g. 1.2)
     - letterSpacing: Numeric value for letter spacing (e.g. 1)
 
-    The response should only return valid key-value pairs, for example:
-    [{textSize: 16}, {colorTheme: 'contrast'}, {pauseAnimations: true}]
-    Please provide the best configuration based on the disabilities.
+    Respond with only an object that contains the applicable settings.
+    Do not wrap the object in any syntax, such as \`\`\`json\`.
+    For example: { textSize: 18, font: 'dyslexia' }
     `;
 
     return {
@@ -72,5 +75,4 @@ export class OpenAIService {
     };
   }
 
-
 }
diff --git a/examples-standalone/coffee-warehouse/src/app/settings.service.ts b/examples-standalone/coffee-warehouse/src/app/settings.service.ts
@@ -3,8 +3,8 @@ import {
 } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 
-const defaultFont = `'Roboto', sans-serif`;
-const defaultTheme = 'https://kendo.cdn.telerik.com/themes/8.2.1/default/default-turquoise.css';
+export const defaultFont = `'Roboto', sans-serif`;
+export const defaultTheme = 'https://kendo.cdn.telerik.com/themes/8.2.1/default/default-turquoise.css';
 
 @Injectable()
 export class SettingsService {
@@ -15,7 +15,7 @@ export class SettingsService {
         underlineLinks: false,
         pauseAnimations: false,
         lgSizeWidgets: false,
-        lineHeight: 1.2,
+        lineHeight: 1,
         letterSpacing: 0
     };
 
@@ -41,7 +41,7 @@ export class SettingsService {
             underlineLinks: false,
             pauseAnimations: false,
             lgSizeWidgets: false,
-            lineHeight: 1.2,
+            lineHeight: 1,
             letterSpacing: 0
         }