Add placeholder About popup

Author: chrisglein

src/About.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {
+  Button,
+  Text,
+  View,
+} from 'react-native';
+import {Popup} from 'react-native-windows';
+import {StylesContext} from './Styles';
+
+type AboutPopupProps = {
+  show: boolean;
+  close: () => void;
+}
+function AboutPopup({show, close}: AboutPopupProps): JSX.Element {
+  const styles = React.useContext(StylesContext);
+
+  return (
+    <Popup
+      isOpen={show}
+      isLightDismissEnabled={true}
+      onDismiss={() => close()}>
+      <View style={[styles.feedbackDialog, {gap: 12}]}>
+        <View style={{flexDirection: 'row', marginBottom: 4}}>
+          <View style={{backgroundColor: 'gray', borderRadius: 4, marginRight: 4}}>
+            <Text>❔</Text>
+          </View>
+          <Text style={{fontWeight: 'bold'}}>About</Text>
+        </View>
+        <View style={{marginTop: 12, alignSelf: 'flex-end'}}>
+          <Button
+            title="OK"
+            onPress={() => {
+              close();
+            }}/>
+        </View>
+      </View>
+    </Popup>
+  );
+}
+
+export { AboutPopup }

src/Chat.tsx

@@ -14,6 +14,7 @@ import {
   FeedbackPopup,
 } from './Feedback';
 import { SettingsPopup } from './Settings';
+import { AboutPopup } from './About';
 import { HoverButton } from './Controls';
 
 enum ChatSource {
@@ -104,9 +105,12 @@ function Chat({entries, humanText, onPrompt, clearConversation}: ChatProps): JSX
   const chatHistory = React.useContext(ChatHistoryContext);
   const [showFeedbackPopup, setShowFeedbackPopup] = React.useState(false);
   const [showSettingsPopup, setShowSettingsPopup] = React.useState(false);
+  const [showAboutPopup, setShowAboutPopup] = React.useState(false);
   const [feedbackIsPositive, setFeedbackIsPositive] = React.useState(false);
   const scrollViewRef : React.RefObject<ScrollView> = React.useRef(null);
 
+  let showingAnyPopups = (showFeedbackPopup || showSettingsPopup || showAboutPopup);
+
   const feedbackContext = {
     showFeedback: (positive: boolean) => {
       setFeedbackIsPositive(positive);
@@ -174,7 +178,7 @@ function Chat({entries, humanText, onPrompt, clearConversation}: ChatProps): JSX
               disableCopy={true}
               contentShownOnHover={
                 <>
-                  <HoverButton content="❔" tooltip="About" onPress={() => console.log("About dialog: Not yet implemented")}/>
+                  <HoverButton content="❔" tooltip="About" onPress={() => setShowAboutPopup(true)}/>
                   <HoverButton content="⚙️" tooltip="Settings" onPress={() => setShowSettingsPopup(true)}/>
                 </>
               }>
@@ -187,14 +191,17 @@ function Chat({entries, humanText, onPrompt, clearConversation}: ChatProps): JSX
                 clearConversation={clearConversation}/>
             </HumanSection>
           </View>
-          { (showFeedbackPopup || showSettingsPopup) && <View style={styles.popupBackground}/> }
+          { showingAnyPopups && <View style={styles.popupBackground}/> }
           <FeedbackPopup
             show={showFeedbackPopup}
             isPositive={feedbackIsPositive}
             close={() => setShowFeedbackPopup(false)}/>
           <SettingsPopup
             show={showSettingsPopup}
             close={() => setShowSettingsPopup(false)}/>
+          <AboutPopup
+            show={showAboutPopup}
+            close={() => setShowAboutPopup(false)}/>
         </View>
       </ChatScrollContext.Provider>
     </FeedbackContext.Provider>