Merge pull request Paul-Borisov#9 from Paul-Borisov/beta-1.3

Beta 1.3

Author: Paul-Borisov

package/azure-openai-chat.sppkg

@@ -267,9 +267,15 @@ $selection: $ms-color-gray150;
     border: 1px #ccc solid;
     border-radius: 8px;
     height: 34px;
-    padding: 15px 15px 0 15px;
+    padding: 15px 15px 0 60px;
     @include scrollbars(1.4ex, $ms-color-gray120, rgba(0, 0, 0, 0.2));
     z-index: 10;
+    &.noLeftMargin {
+      padding-left: 15px;
+    }
+    &.shortLeftMargin {
+      padding-left: 35px;
+    }
   }
   .linkButton {
     flex: 0 0 35px;
@@ -292,6 +298,9 @@ $selection: $ms-color-gray150;
       background-color: $hover-color;
     }
   }
+  i {
+    color: #000;
+  }
 }
 .requestCharsCount {
   font-size: 12px;

spfx-latest/src/components/Chat.module.scss

@@ -297,7 +297,6 @@ const ContentPanel: FunctionComponent<IContentPanelProps> = ({ props }) => {
       signalReload,
       isCustomPanelOpen,
       isStreamProgress,
-      fileUpload,
       setIsStreamProgress,
       setSignalReload,
       setModel
@@ -316,7 +315,8 @@ const ContentPanel: FunctionComponent<IContentPanelProps> = ({ props }) => {
       resizePrompt,
       setPrompt,
       submitPayload,
-      panelLanguageModels
+      panelLanguageModels,
+      fileUpload
     );
 
     const contentArea = elements.getContentArea(responseContentError, panelContentPane, promptContainer);

spfx-latest/src/components/ContentPanel.tsx

@@ -87,7 +87,7 @@ export default class ContentPanelElements {
     const isPdfSupported = true;
     // Upload button should be visible only if Enable integrations is turned on in web part settings.
     return props.functions && (isVisionSupported || isPdfSupported) ? (
-      <TooltipHost content={strings.TextUploadFiles}>
+      <>
         {getSimpleDialog(strings.TextUpload, strings.TextUploadFiles, showUploadDialog, setShowUploadDialog, [
           <UploadFiles
             setImageUrls={isVisionSupported ? setImageUrls : undefined}
@@ -96,12 +96,12 @@ export default class ContentPanelElements {
           />,
         ])}
         <span className={[styles.fileUploadIcon, imageUrls?.length > 0 ? styles.selected : undefined].join(' ').trim()}>
-          <FontIcon iconName="SkypeCircleArrow" onClick={() => setShowUploadDialog(true)} />
+          <FontIcon iconName="Attach" onClick={() => setShowUploadDialog(true)} title={strings.TextUploadFiles} />
           <span className={[styles.fileCounter, props.promptAtBottom ? styles.promptAtBottom : undefined].join(' ').trim()}>
             {imageUrls?.length ? `(${imageUrls?.length})` : pdfFileContent ? `(${Object.keys(pdfFileContent).length})` : ''}
           </span>
         </span>
-      </TooltipHost>
+      </>
     ) : null;
   }
 
@@ -145,7 +145,6 @@ export default class ContentPanelElements {
     signalReload: boolean,
     isCustomPanelOpen: boolean,
     isStreamProgress: boolean,
-    fileUpload: JSX.Element,
     setIsStreamProgress: (state: boolean) => void,
     setSignalReload: (state: boolean) => void,
     setModel: (newModel: string) => void
@@ -186,7 +185,6 @@ export default class ContentPanelElements {
               );
             }
           )}
-        {fileUpload}
       </div>
     );
   }
@@ -232,7 +230,8 @@ export default class ContentPanelElements {
     resizePrompt: (e: any) => void,
     setPrompt: (text: string) => void,
     submitPayload: () => void,
-    panelLanguageModels: JSX.Element
+    panelLanguageModels: JSX.Element,
+    fileUpload: JSX.Element
   ): JSX.Element {
     const props = this.props;
 
@@ -260,6 +259,8 @@ export default class ContentPanelElements {
               }}
             />
           ) : null}
+          {fileUpload}
+          {props.voiceInput ? <VoiceInput setText={setPrompt} shortLeftMargin={!props.functions} /> : null}
           <textarea
             ref={refPromptArea}
             placeholder={strings.TextSendMessage}
@@ -277,9 +278,15 @@ export default class ContentPanelElements {
             disabled={
               isProgress || isStreamProgress || (chatHistoryParams.maxContentLengthExceeded && !props.unlimitedHistoryLength)
             }
+            className={
+              !props.functions && !props.voiceInput
+                ? styles.noLeftMargin
+                : !(props.functions && props.voiceInput)
+                ? styles.shortLeftMargin
+                : undefined
+            }
           />
           {(!chatHistoryParams.maxContentLengthExceeded || props.unlimitedHistoryLength) && submitButton}
-          {props.voiceInput ? <VoiceInput setText={setPrompt} /> : null}
         </div>
         <div className={styles.requestCharsCount}>
           {!chatHistoryParams.maxContentLengthExceeded || props.unlimitedHistoryLength

spfx-latest/src/components/ContentPanelElements.tsx

@@ -19,7 +19,7 @@
   cursor: pointer;
   font-size: 150%;
   i {
-    rotate: 100grad;
+    rotate: 150grad;
   }
   .fileCounter {
     margin-left: 5px;
@@ -32,4 +32,8 @@
   &.selected {
     margin-right: 0px;
   }
+  position: absolute;
+  z-index: 65535;
+  margin-top: 12px;
+  margin-left: 10px;
 }

spfx-latest/src/components/UploadFiles.module.scss

@@ -5,9 +5,24 @@
   &.unavailable {
     color: #ccc;
   }
+  position: absolute;
+  z-index: 65535;
+  margin-top: 15px;
+  margin-left: 35px;
+  &.shortLeftMargin {
+    margin-left: 10px;
+  }
+}
+.bgwhite {
+  background-color: #fff;
+}
+.speech {
+  position: relative;
+  margin-left: 10px;
+  margin-top: 0;
 }
 .stop {
-  color: red;
+  color: red !important;
   border-radius: 50%;
   box-shadow: 0px 0px 1px 1px #0000001a;
   animation: pulseAnimation 2s infinite;

spfx-latest/src/shared/components/Speech/Speech.module.scss

@@ -10,6 +10,7 @@ import styles from './Speech.module.scss';
 
 interface IVoiceInput extends IVoice {
   setText?: (text: string) => void;
+  shortLeftMargin?: boolean;
 }
 
 const VoiceInput: React.FunctionComponent<IVoiceInput> = (props) => {
@@ -41,25 +42,30 @@ const VoiceInput: React.FunctionComponent<IVoiceInput> = (props) => {
   return isAvailable ? (
     <>
       {!started ? (
-        <TooltipHost content={props.tooltip ?? strings.TextVoiceInput}>
-          <FontIcon iconName={'Microphone'} className={styles.microphone} onClick={() => setShowLocales(true)} />
-        </TooltipHost>
+        <FontIcon
+          iconName={'Microphone'}
+          className={[styles.microphone, props.shortLeftMargin ? styles.shortLeftMargin : undefined].join(' ')}
+          onClick={() => setShowLocales(true)}
+          title={props.tooltip ?? strings.TextVoiceInput}
+        />
       ) : (
-        <TooltipHost content={strings.TextStop}>
-          <FontIcon
-            iconName={'CircleStopSolid'}
-            className={[styles.microphone, styles.stop].join(' ')}
-            onClick={() => handleSpeechRecognition()}
-          />
-        </TooltipHost>
+        <FontIcon
+          iconName={'CircleStopSolid'}
+          className={[styles.microphone, styles.stop, props.shortLeftMargin ? styles.shortLeftMargin : undefined].join(' ')}
+          onClick={() => handleSpeechRecognition()}
+          title={strings.TextStop}
+        />
       )}
       {showLocales ? (
         <Languages handleSelection={handleSpeechRecognition} isOpen={showLocales} setIsOpen={setShowLocales} />
       ) : null}
     </>
   ) : (
     <TooltipHost content={strings.TextDeviceUnavailable}>
-      <FontIcon iconName={'Microphone'} className={[styles.microphone, styles.unavailable].join(' ')} />
+      <FontIcon
+        iconName={'Microphone'}
+        className={[styles.microphone, styles.unavailable, props.shortLeftMargin ? styles.shortLeftMargin : undefined].join(' ')}
+      />
     </TooltipHost>
   );
 };

spfx-latest/src/shared/components/Speech/VoiceInput.tsx

@@ -65,7 +65,7 @@ const VoiceOutput: React.FunctionComponent<IVoiceOutput> = (props) => {
         <TooltipHost content={props.tooltip ?? strings.TextVoiceOutput}>
           <FontIcon
             iconName={'InternetSharing'}
-            className={styles.microphone}
+            className={[styles.microphone, styles.speech].join(' ')}
             onClick={() => {
               if (!props.getAudio) {
                 if (speechSynthesis.speaking) return;
@@ -97,7 +97,7 @@ const VoiceOutput: React.FunctionComponent<IVoiceOutput> = (props) => {
         <TooltipHost content={strings.TextStop}>
           <FontIcon
             iconName={!!props.getAudio && !player ? 'ProgressLoopInner' : 'CircleStopSolid'}
-            className={[styles.microphone, styles.stop].join(' ')}
+            className={[styles.microphone, styles.stop, styles.speech, styles.bgwhite].join(' ')}
             onClick={() => {
               if (!props.getAudio) {
                 handleSpeechOutput();