feat: add color picker to developer panel

Azure-Samples · Nov 11, 2023 · 0a04c2e · 0a04c2e
1 parent d879e1f
commit 0a04c2e
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 1 deletion.
diff --git a/packages/chat-component/src/main.ts b/packages/chat-component/src/main.ts
@@ -59,6 +59,8 @@ export class ChatComponent extends LitElement {
   @property({ type: String, attribute: 'data-overrides', converter: (value) => JSON.parse(value || '{}') })
   overrides: RequestOverrides = {};
 
+  @property({ type: String, attribute: 'data-custom-styles', converter: (value) => JSON.parse(value || '{}') })
+  customStyles: any = {};
   //--
 
   @property({ type: String })

diff --git a/packages/webapp/src/api/models.ts b/packages/webapp/src/api/models.ts
@@ -10,6 +10,18 @@ export const enum RetrievalMode {
   Text = 'text',
 }
 
+export type CustomStylesState = {
+  AccentHigh: string;
+  AccentLighter: string;
+  AccentContrast: string;
+};
+
+export const enum CustomStyles {
+  AccentHigh = 'AccentHigh',
+  AccentLighter = 'AccentLighter',
+  AccentContrast = 'AccentContrast',
+}
+
 export type AskRequestOverrides = {
   retrievalMode?: RetrievalMode;
   semanticRanker?: boolean;

diff --git a/packages/webapp/src/pages/chat/Chat.tsx b/packages/webapp/src/pages/chat/Chat.tsx
@@ -6,6 +6,8 @@ import { Checkbox, DefaultButton, Dropdown, Panel, SpinButton, TextField, Toolti
 import type { IDropdownOption } from '@fluentui/react/lib-commonjs/Dropdown';
 import 'chat-component';
 import { toolTipText, toolTipTextCalloutProps } from '../../i18n/tooltips.js';
+import { SettingsStyles } from '../../components/SettingsStyles/SettingsStyles.js';
+import type { CustomStylesState } from '../../api/models.js';
 
 const Chat = () => {
   const [isConfigPanelOpen, setIsConfigPanelOpen] = useState(false);
@@ -66,6 +68,16 @@ const Chat = () => {
     setUseSuggestFollowupQuestions(!!checked);
   };
 
+  const [customStyles, setCustomStyles] = useState<CustomStylesState>({
+    AccentHigh: '#ff0000',
+    AccentLighter: '#ff0000',
+    AccentContrast: '#ff0000',
+  });
+
+  const handleCustomStylesChange = (newStyles: CustomStylesState) => {
+    setCustomStyles(newStyles);
+  };
+
   const overrides = {
     retrievalMode,
     top: retrieveCount,
@@ -93,19 +105,23 @@ const Chat = () => {
             data-use-stream={useStream}
             data-approach="rrr"
             data-overrides={JSON.stringify(overrides)}
+            data-custom-styles={JSON.stringify(customStyles)}
           ></chat-component>
         </div>
       </div>
 
       <Panel
-        headerText="Configure answer generation"
+        headerText="Configure your ChatGPT component styles and answer generation"
         isOpen={isConfigPanelOpen}
         isBlocking={false}
         onDismiss={() => setIsConfigPanelOpen(false)}
         closeButtonAriaLabel="Close"
         onRenderFooterContent={() => <DefaultButton onClick={() => setIsConfigPanelOpen(false)}>Close</DefaultButton>}
         isFooterAtBottom={true}
       >
+        <TooltipHost calloutProps={toolTipTextCalloutProps} content={toolTipText.promptTemplate}>
+          <SettingsStyles onChange={handleCustomStylesChange}></SettingsStyles>
+        </TooltipHost>
         <TooltipHost calloutProps={toolTipTextCalloutProps} content={toolTipText.promptTemplate}>
           <TextField
             className={styles.chatSettingsSeparator}