Use fluent-ui-react-native controls

babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+  presets: [['module:metro-react-native-babel-preset', {useTransformReactJSXExperimental:true}]],
+  plugins: [['@babel/plugin-transform-react-jsx', { runtime: 'classic' }]]
 };

package.json

@@ -12,6 +12,7 @@
     "postinstall": "patch-package"
   },
   "dependencies": {
+    "@fluentui/react-native": "^0.36.20",
     "@react-native-async-storage/async-storage": "^1.17.11",
     "@react-native-clipboard/clipboard": "^1.11.2",
     "@react-native-picker/picker": "^2.2.1",
@@ -20,6 +21,7 @@
     "react": "18.2.0",
     "react-native": "0.71.0",
     "react-native-markdown-display": "^7.0.0-alpha.2",
+    "react-native-svg": "^13.9.0",
     "react-native-syntax-highlighter": "^2.1.0",
     "react-native-windows": "0.71.1"
   },

src/Chat.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import {
-  Button,
   ScrollView,
   TextInput,
   View,
@@ -15,6 +14,7 @@ import {
 } from './Feedback';
 import { PopupsContext } from './Popups';
 import { HoverButton } from './Controls';
+import { ButtonV1 as Button } from '@fluentui/react-native';
 
 enum ChatSource {
   Human,
@@ -86,13 +86,15 @@ function ChatEntry({submit, defaultText, clearConversation}: ChatEntryProps): JS
         onSubmitEditing={submitValue}
         value={defaultText ?? value}/>
       <Button
+        appearance='primary'
         accessibilityLabel='Submit prompt'
-        title="Submit"
-        onPress={submitValue}/>
+        onClick={submitValue}>Submit</Button>
       <Button
         accessibilityLabel='Clear conversation'
-        title="💣"
-        onPress={clearConversation}/>
+        icon={{ fontSource: { fontFamily: 'Segoe MDL2 Assets', codepoint: 0xE74D, fontSize: 20 } }}
+        iconOnly={true}
+        tooltip='Clear conversation'
+        onClick={clearConversation}></Button>
     </View>
   );
 }
@@ -170,11 +172,10 @@ function Chat({entries, humanText, onPrompt, clearConversation}: ChatProps): JSX
                 <View style={{alignSelf: 'center'}}>
                   <Button
                     accessibilityLabel="Regenerate response"
-                    title="🔁 Regenerate response"
-                    onPress={() => {
+                    onClick={() => {
                       // Clear the response for the last entry
                       chatHistory.modifyResponse(entries.length - 1, {responses: undefined});
-                    }}/>
+                    }}>🔁 Regenerate response</Button>
                 </View>
               }
             </View>

src/Popups.tsx

@@ -1,11 +1,11 @@
 import React, { PropsWithChildren } from 'react';
 import {
-  Button,
   Text,
   View,
 } from 'react-native';
 import {Popup} from 'react-native-windows';
 import {StylesContext} from './Styles';
+import { ButtonV1 as Button } from '@fluentui/react-native';
 
 type PopupsContextType = {
     showAbout: boolean,
@@ -32,12 +32,12 @@ type DialogFrameType = PropsWithChildren<{
 function DialogFrame({children, show, close, isLightDismissEnabled, titleIcon, titleIconStyle, title, buttons}: DialogFrameType) {
   const styles = React.useContext(StylesContext);
 
-  const populatedButtons = buttons ?? [<Button
-    accessibilityLabel='OK'
-    title="OK"
-    onPress={() => {
-      close();
-    }}/>];
+  const populatedButtons = buttons ?? [
+    <Button
+      appearance='primary'
+      onClick={() => {
+        close();
+      }}>OK</Button>];
   const buttonList = populatedButtons.map((button, index) => <View key={index}>{button}</View>);
 
   return (

src/Settings.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import {
-  Button,
-  Switch,
   Text,
   TextInput,
   View,
@@ -18,6 +16,7 @@ import {StylesContext} from './Styles';
 import {Picker} from '@react-native-picker/picker';
 import {ChatScriptNames} from './ChatScript';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import { ButtonV1 as Button } from '@fluentui/react-native';
 
 const settingsKey = 'settings';
 
@@ -162,17 +161,14 @@ function SettingsPopup({show, close}: SettingsPopupProps): JSX.Element {
 
   const buttons = [
     <Button
-      accessibilityLabel="OK"
-      title="OK"
-      onPress={() => {
+      onClick={() => {
         save();
-      }}/>,
+      }}>OK</Button>,
     <Button
-      accessibilityLabel="Cancel"
-      title="Cancel"
-      onPress={() => {
+      appearance='primary'
+      onClick={() => {
         cancel();
-      }}/>
+      }}>Cancel</Button>
     ];
 
   return (

windows/artificialChat.sln

@@ -39,6 +39,8 @@ Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "Clipboard", "..\node_module
 EndProject
 Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "ReactNativeAsyncStorage", "..\node_modules\@react-native-async-storage\async-storage\windows\ReactNativeAsyncStorage\ReactNativeAsyncStorage.vcxproj", "{4855D892-E16C-404D-8286-0089E0F7F9C4}"
 EndProject
+Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "RNSVG", "..\node_modules\react-native-svg\windows\RNSVG\RNSVG.vcxproj", "{7ACF84EC-EFBA-4043-8E14-40B159508902}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|ARM64 = Debug|ARM64
@@ -165,6 +167,18 @@ Global
 		{4855D892-E16C-404D-8286-0089E0F7F9C4}.Release|x64.Build.0 = Release|x64
 		{4855D892-E16C-404D-8286-0089E0F7F9C4}.Release|x86.ActiveCfg = Release|Win32
 		{4855D892-E16C-404D-8286-0089E0F7F9C4}.Release|x86.Build.0 = Release|Win32
+		{7ACF84EC-EFBA-4043-8E14-40B159508902}.Debug|ARM64.ActiveCfg = Debug|ARM64
+		{7ACF84EC-EFBA-4043-8E14-40B159508902}.Debug|ARM64.Build.0 = Debug|ARM64
+		{7ACF84EC-EFBA-4043-8E14-40B159508902}.Debug|x64.ActiveCfg = Debug|x64
+		{7ACF84EC-EFBA-4043-8E14-40B159508902}.Debug|x64.Build.0 = Debug|x64
+		{7ACF84EC-EFBA-4043-8E14-40B159508902}.Debug|x86.ActiveCfg = Debug|Win32
+		{7ACF84EC-EFBA-4043-8E14-40B159508902}.Debug|x86.Build.0 = Debug|Win32
+		{7ACF84EC-EFBA-4043-8E14-40B159508902}.Release|ARM64.ActiveCfg = Release|ARM64
+		{7ACF84EC-EFBA-4043-8E14-40B159508902}.Release|ARM64.Build.0 = Release|ARM64
+		{7ACF84EC-EFBA-4043-8E14-40B159508902}.Release|x64.ActiveCfg = Release|x64
+		{7ACF84EC-EFBA-4043-8E14-40B159508902}.Release|x64.Build.0 = Release|x64
+		{7ACF84EC-EFBA-4043-8E14-40B159508902}.Release|x86.ActiveCfg = Release|Win32
+		{7ACF84EC-EFBA-4043-8E14-40B159508902}.Release|x86.Build.0 = Release|Win32
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE

windows/artificialChat/AutolinkedNativeModules.g.cpp

@@ -12,6 +12,9 @@
 // Includes from @react-native-picker/picker
 #include <winrt/ReactNativePicker.h>
 
+// Includes from react-native-svg
+#include <winrt/RNSVG.h>
+
 namespace winrt::Microsoft::ReactNative
 {
 
@@ -23,6 +26,8 @@ void RegisterAutolinkedNativeModulePackages(winrt::Windows::Foundation::Collecti
     packageProviders.Append(winrt::NativeClipboard::ReactPackageProvider());
     // IReactPackageProviders from @react-native-picker/picker
     packageProviders.Append(winrt::ReactNativePicker::ReactPackageProvider());
+    // IReactPackageProviders from react-native-svg
+    packageProviders.Append(winrt::RNSVG::ReactPackageProvider());
 }
 
 }