Configurable components

studio/src/components/Chat/DevBotFooter.tsx

@@ -1,6 +1,8 @@
 import '@/styles/components/DevBotFooter.scss';
 import { DefaultButton, IconButton, Stack, TextField, makeStyles } from "@fluentui/react";
+import { useTranslation } from 'react-i18next';
 import React from "react";
+import useConfig from '../../hooks/useConfig';
 
 
 interface props {
@@ -20,7 +22,9 @@ const devbotfooterStyles = makeStyles(theme => ({
 export const DevBotFooter = (props: props) => {
     const fileInput = React.createRef<HTMLInputElement>();
     const classStyles = devbotfooterStyles();
+    const { t, i18n} = useTranslation();
     const [message, setMessage] = React.useState('');
+    const config = useConfig();
 
     React.useEffect(() => { 
         if (props.inputText) {
@@ -35,17 +39,65 @@ export const DevBotFooter = (props: props) => {
         }
     }, [props.inputText]);
 
+    if (!config) {
+        return (
+            <Stack className='devbot-footer'>
+                <Stack.Item>
+                    <Stack horizontal className='button-stack' tokens={{childrenGap: 20}}>
+                        <Stack.Item>
+                            <input ref={fileInput} accept=".pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .txt, .rtf, .odt" onChange={props.onFileChange} type='file' multiple hidden />
+                            <DefaultButton  onClick={() => { window.event?.stopImmediatePropagation(); fileInput?.current?.click(); }} className='primary-button'>{t('devFooter.uploadFiles')}</DefaultButton>
+                        </Stack.Item>
+                        <Stack.Item>
+                            <DefaultButton onClick={() => props.pluginStoreToggle()} className='primary-button'>{t('devFooter.addPlugin')}</DefaultButton>
+                        </Stack.Item>
+                    </Stack>
+                </Stack.Item>
+                <Stack.Item>
+                    <Stack className='input-field-stack'>
+                        <Stack.Item>
+                            <TextField 
+                                maxLength={200000}
+                                value={message}
+                                onKeyUp={(e) => { 
+                                        if (props.disableSend) { return; }
+                                        if (e.key === 'Enter') {
+                                            props.sendMessageToWss(message);
+                                            setMessage('');
+                                        } 
+                                    }
+                                }
+                                onChange={(e, value) => { setMessage(value || '') }}
+                                type="text"
+                                placeholder="Type your message here..."
+                                multiline={true}
+                                resizable={false}
+                                onRenderSuffix={() => {
+                                   return (<IconButton 
+                                        disabled={props.disableSend}
+                                        onClick={() => { if (props.disableSend) { return; } props.sendMessageToWss(message); setMessage('')  }}
+                                        iconProps={{'iconName': 'Send'}} title="Emoji" ariaLabel="Emoji" />) 
+                                }}
+                                />
+                        </Stack.Item>
+                    </Stack>
+
+                </Stack.Item>
+            </Stack>
+        )
+    }
 
     return (
         <Stack className='devbot-footer'>
             <Stack.Item>
                 <Stack horizontal className='button-stack' tokens={{childrenGap: 20}}>
+                        {config.features["devFooter.uploadFiles"] && <Stack.Item>
+                            <input ref={fileInput} accept=".pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .txt, .rtf, .odt" onChange={props.onFileChange} type='file' multiple hidden />
+                            <DefaultButton  onClick={() => { window.event?.stopImmediatePropagation(); fileInput?.current?.click(); }} className='primary-button'>{t('devFooter.uploadFiles')}</DefaultButton>
+                        </Stack.Item>
+                        }
                     <Stack.Item>
-                        <input ref={fileInput} accept=".pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .txt, .rtf, .odt" onChange={props.onFileChange} type='file' multiple hidden />
-                        <DefaultButton  onClick={() => { window.event?.stopImmediatePropagation(); fileInput?.current?.click(); }} className='primary-button'>Upload Files</DefaultButton>
-                    </Stack.Item>
-                    <Stack.Item>
-                        <DefaultButton onClick={() => props.pluginStoreToggle()} className='primary-button'>Add Plugin</DefaultButton>
+                        <DefaultButton onClick={() => props.pluginStoreToggle()} className='primary-button'>{t('devFooter.addPlugin')}</DefaultButton>
                     </Stack.Item>
                 </Stack>
             </Stack.Item>

studio/src/components/Representations/RepView.tsx

@@ -6,13 +6,14 @@ import ReactMarkdown from 'react-markdown';
 import gfm from 'remark-gfm';
 import MermaidChart from "../Mermaid";
 import '../../styles/markdownStyles.css';
+import useConfig from "../../hooks/useConfig";
 
 interface props {
     representation: any;
     token: string;
 }
 export const RepView = (props: props) => {
-
+    const config = useConfig();
     const stackStyle: IStackStyles = {
         root: {
             paddingLeft: '10px',
@@ -39,6 +40,9 @@ export const RepView = (props: props) => {
     };
 
     const renderRepresentation = (representation: any) => {
+        if (!config){
+            return null;
+        }
         if (representation?.name === 'code') {
             return (<Editor options={{ readOnly: true }} defaultValue={representation?.text} height='calc(100vh - 44px)' defaultLanguage="markdown">
             </Editor>)

studio/src/hooks/useConfig.js

@@ -0,0 +1,14 @@
+import { useState, useEffect } from 'react';
+import config from '../locales/config.json';
+
+const useConfig = () => {
+  const [configData, setConfigData] = useState(null);
+
+  useEffect(() => {
+    setConfigData(config);
+  }, []);
+
+  return configData;
+};
+
+export default useConfig;

studio/src/locales/config.json

@@ -0,0 +1,17 @@
+{
+    "features":{
+        "dslFileUpload": true,
+        "publishModal.publishButton": true,
+        "devFooter.uploadFiles": true,
+        "editorPage.devModeHeader": true,
+        "representation.nlr":true,
+        "representation.chart": true,
+        "representation.dsl": true,
+        "representation.code": false,
+        "error.errors": true,
+        "error.warnings": true,
+        "error.optimizations": true,
+        "error.botExperience": true
+
+    }
+}

studio/src/locales/en.json

@@ -29,5 +29,11 @@
     "publishModal.installationURL": "Get your project online",
     "publishModal.installationSecret": "Secret Key",
     "representations.editModeAlert": "Please submit or discard your changes before switching representations.",
-    "representations.title": "Representations"
+    "representations.title": "Representations",
+    "devFooter.addPlugin": "Add Plugins",
+    "devFooter.uploadFiles": "Upload Files",
+    "errors.errors": "Error",
+    "errors.warnings": "Warnings",
+    "errors.optimizations": "Optimize",
+    "errors.botExperience": "Bot Experience"
 }