Merge pull request #59 from chrisglein/niceties

chrisglein · web-flow · commit 5df38ddd9d9f · 2023-03-09T16:15:06.000-08:00
Small quality of life changes: tooltips, copy responses, click images, initial About page
diff --git a/src/About.tsx b/src/About.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import {
+  Button,
+  Text,
+  View,
+} from 'react-native';
+import {Hyperlink} from './Controls';
+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>
+        <Hyperlink url='https://github.com/chrisglein/artificial-chat/'/>
+        <View style={{marginTop: 12, alignSelf: 'flex-end'}}>
+          <Button
+            title="OK"
+            onPress={() => {
+              close();
+            }}/>
+        </View>
+      </View>
+    </Popup>
+  );
+}
+
+export { AboutPopup }
diff --git a/src/AiResponse.tsx b/src/AiResponse.tsx
@@ -3,8 +3,9 @@ import type {PropsWithChildren} from 'react';
 import {
   ActivityIndicator,
   Button,
-  Pressable,
   Image,
+  Linking,
+  Pressable,
   Text,
   View,
 } from 'react-native';
@@ -19,6 +20,7 @@ import {
 } from './Chat';
 import { StylesContext } from './Styles';
 import { FeedbackContext } from './Feedback';
+import Clipboard from '@react-native-clipboard/clipboard';
 
 type AiImageResponseProps = {
   imageUrl?: string;
@@ -29,10 +31,17 @@ function AiImageResponse({imageUrl, prompt, rejectImage}: AiImageResponseProps):
   const styles = React.useContext(StylesContext);
   return (
     <View style={[styles.horizontalContainer, {flexWrap: 'nowrap', alignItems: 'flex-start'}]}>
-      <Image
-        source={{uri: imageUrl}}
-        alt={prompt}
-        style={[{flexGrow: 0}, styles.dalleImage]}/>
+      <Pressable
+        onPress={() => {
+          if (imageUrl) {
+            Linking.openURL(imageUrl);
+          }
+        }}>
+        <Image
+          source={{uri: imageUrl}}
+          alt={prompt}
+          style={styles.dalleImage}/>
+      </Pressable>
       <View
         style={{flexShrink: 1, gap: 8}}>
         <Text>Here is an image created using the following requirements "{prompt}"</Text>
@@ -108,16 +117,17 @@ function AiTextResponse({text}: AiTextResponseProps): JSX.Element {
 
 type AiSectionProps = PropsWithChildren<{
   isLoading?: boolean;
+  copyValue?: string;
   contentShownOnHover?: JSX.Element;
 }>;
-function AiSection({children, isLoading, contentShownOnHover}: AiSectionProps): JSX.Element {
+function AiSection({children, isLoading, copyValue, contentShownOnHover}: AiSectionProps): JSX.Element {
   const feedbackContext = React.useContext(FeedbackContext);
   const styles = React.useContext(StylesContext);
   const [hovering, setHovering] = React.useState(false);
 
   const showFeedbackPopup = (positive: boolean) => {
     if (feedbackContext) {
-      feedbackContext.showFeedback(positive);
+      feedbackContext.showFeedback(positive, copyValue);
     }
   }
 
@@ -129,9 +139,9 @@ function AiSection({children, isLoading, contentShownOnHover}: AiSectionProps):
       <View style={{flexDirection: 'row'}}>
         <Text style={[styles.sectionTitle, {flexGrow: 1}]}>AI</Text>
         {hovering && contentShownOnHover}
-        {hovering && <HoverButton content="📋" onPress={() => console.log("Copy: Not yet implemented")}/>}
-        <HoverButton content="👍" onPress={() => { showFeedbackPopup(true); }}/>
-        <HoverButton content="👎" onPress={() => { showFeedbackPopup(false); }}/>
+        {hovering && copyValue && <HoverButton content="📋" tooltip="Copy to clipboard" onPress={() => Clipboard.setString(copyValue)}/>}
+        <HoverButton content="👍" tooltip="Give positive feedback" onPress={() => { showFeedbackPopup(true); }}/>
+        <HoverButton content="👎" tooltip="Give negative feedback" onPress={() => { showFeedbackPopup(false); }}/>
       </View>
       {isLoading && 
         <ActivityIndicator/>
@@ -150,7 +160,7 @@ type AiSectionContentProps = {
 function AiSectionContent({id, content}: AiSectionContentProps): JSX.Element {
   const chatHistory = React.useContext(ChatHistoryContext);
   return (
-    <AiSection>
+    <AiSection copyValue={content.text}>
       {(() => {
         switch (content.contentType) {
           case ChatContent.Error:
diff --git a/src/Chat.tsx b/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 {
@@ -81,11 +82,9 @@ function ChatEntry({submit, defaultText, clearConversation}: ChatEntryProps): JS
         onSubmitEditing={submitValue}
         value={defaultText ?? value}/>
       <Button
-        style={{flexShrink: 0}}
         title="Submit"
         onPress={submitValue}/>
       <Button
-        style={{flexShrink: 0}}
         title="💣"
         onPress={clearConversation}/>
     </View>
@@ -103,14 +102,19 @@ function Chat({entries, humanText, onPrompt, clearConversation}: ChatProps): JSX
   const styles = React.useContext(StylesContext);
   const chatHistory = React.useContext(ChatHistoryContext);
   const [showFeedbackPopup, setShowFeedbackPopup] = React.useState(false);
+  const [feedbackTargetResponse, setFeedbackTargetResponse] = React.useState<string | undefined>(undefined);
   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) => {
+    showFeedback: (positive: boolean, response?: string) => {
       setFeedbackIsPositive(positive);
       setShowFeedbackPopup(true);
+      setFeedbackTargetResponse(response);
     }
   }
 
@@ -173,7 +177,10 @@ function Chat({entries, humanText, onPrompt, clearConversation}: ChatProps): JSX
               disableEdit={true}
               disableCopy={true}
               contentShownOnHover={
-                <HoverButton content="⚙️" onPress={() => setShowSettingsPopup(true)}/>
+                <>
+                  <HoverButton content="❔" tooltip="About" onPress={() => setShowAboutPopup(true)}/>
+                  <HoverButton content="⚙️" tooltip="Settings" onPress={() => setShowSettingsPopup(true)}/>
+                </>
               }>
               <ChatEntry
                 defaultText={humanText}
@@ -184,14 +191,18 @@ 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}
+            response={feedbackTargetResponse}
             close={() => setShowFeedbackPopup(false)}/>
           <SettingsPopup
             show={showSettingsPopup}
             close={() => setShowSettingsPopup(false)}/>
+          <AboutPopup
+            show={showAboutPopup}
+            close={() => setShowAboutPopup(false)}/>
         </View>
       </ChatScrollContext.Provider>
     </FeedbackContext.Provider>
diff --git a/src/Controls.tsx b/src/Controls.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {
   Button,
   Image,
+  ImageSourcePropType,
   Linking,
   Pressable,
   Text,
@@ -13,22 +14,24 @@ import { CodeBlock } from './CodeBlock';
 
 type HoverButtonProps = {
   content: string;
+  tooltip: string,
   onPress: () => void;
 };
-function HoverButton({content, onPress}: HoverButtonProps): JSX.Element {
+function HoverButton({content, tooltip, onPress}: HoverButtonProps): JSX.Element {
   const [hovering, setHovering] = React.useState(false);
 
   const backgroundBaseStyle = {padding: 2, borderRadius: 8, borderWidth: 1, borderColor: 'transparent'};
   const backgroundPressedStyle = {borderColor: 'white', backgroundColor: 'black'};
   const backgroundHoverStyle = {borderColor: 'white', backgroundColor: 'gray'};
   return (
     <Pressable
+      tooltip={tooltip}
       onPress={onPress}
       onHoverIn={() => setHovering(true)}
       onHoverOut={() => setHovering(false)}>
       {({pressed}) => (
         <View style={[backgroundBaseStyle, pressed ? backgroundPressedStyle : hovering ? backgroundHoverStyle : null]}>
-          <Text >{content}</Text>
+          <Text>{content}</Text>
         </View>        
       )}
     </Pressable>
diff --git a/src/Feedback.tsx b/src/Feedback.tsx
@@ -10,15 +10,16 @@ import { Popup } from 'react-native-windows';
 import { StylesContext } from './Styles';
 
 const FeedbackContext = React.createContext<{
-  showFeedback : (positive: boolean) => void;
+  showFeedback : (positive: boolean, response?: string) => void;
 }>({showFeedback: () => {}});
 
 type FeedbackPopupProps = {
   show: boolean;
   close: () => void;
   isPositive: boolean;
+  response?: string;
 }
-function FeedbackPopup({show, close, isPositive}: FeedbackPopupProps): JSX.Element {
+function FeedbackPopup({show, close, isPositive, response}: FeedbackPopupProps): JSX.Element {
   const styles = React.useContext(StylesContext);
   const [feedbackText, setFeedbackText] = React.useState("");
 
@@ -61,6 +62,7 @@ function FeedbackPopup({show, close, isPositive}: FeedbackPopupProps): JSX.Eleme
             title="Submit feedback"
             onPress={() => {
               console.log(isPositive ? "like" : "dislike");
+              console.log(response);
               console.log(feedbackText);
               close();
             }}/>
diff --git a/src/HumanQuery.tsx b/src/HumanQuery.tsx
@@ -14,7 +14,7 @@ type HumanSectionProps = PropsWithChildren<{
   content?: string;
   disableEdit?: boolean;
   disableCopy?: boolean;
-  contentShownOnHover?: JSX.Element;
+  contentShownOnHover?: React.ReactNode;
 }>;
 function HumanSection({children, content, disableEdit, disableCopy, contentShownOnHover}: HumanSectionProps): JSX.Element {
   const [hovering, setHovering] = React.useState(false);
@@ -27,8 +27,8 @@ function HumanSection({children, content, disableEdit, disableCopy, contentShown
       onHoverOut={() => setHovering(false)}>
       <View style={{flexDirection: 'row', minHeight: 26}}>
         <Text style={[styles.sectionTitle, {flexGrow: 1}]}>HUMAN</Text>
-        {hovering && !disableCopy && <HoverButton content="📋" onPress={() => Clipboard.setString(content ?? "")}/>}
-        {hovering && !disableEdit && <HoverButton content="📝" onPress={() => {console.log("Edit: Not yet implemented")}}/>}
+        {hovering && !disableCopy && <HoverButton content="📋" tooltip="Copy to clipboard" onPress={() => Clipboard.setString(content ?? "")}/>}
+        {hovering && !disableEdit && <HoverButton content="📝" tooltip="Edit" onPress={() => {console.log("Edit: Not yet implemented")}}/>}
         {hovering && contentShownOnHover}
       </View>
       {content ? <Text>{content}</Text> : null}
