Enable copy button for AI responses

Also wire that same copy text through to the feedback dialog.

Author: chrisglein

src/AiResponse.tsx

@@ -20,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;
@@ -116,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);
     }
   }
 
@@ -137,7 +139,7 @@ function AiSection({children, isLoading, contentShownOnHover}: AiSectionProps):
       <View style={{flexDirection: 'row'}}>
         <Text style={[styles.sectionTitle, {flexGrow: 1}]}>AI</Text>
         {hovering && contentShownOnHover}
-        {hovering && <HoverButton content="📋" tooltip="Copy to clipboard" onPress={() => console.log("Copy: Not yet implemented")}/>}
+        {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>
@@ -158,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:

src/Chat.tsx

@@ -82,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>
@@ -104,6 +102,7 @@ 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);
@@ -112,9 +111,10 @@ function Chat({entries, humanText, onPrompt, clearConversation}: ChatProps): JSX
   let showingAnyPopups = (showFeedbackPopup || showSettingsPopup || showAboutPopup);
 
   const feedbackContext = {
-    showFeedback: (positive: boolean) => {
+    showFeedback: (positive: boolean, response?: string) => {
       setFeedbackIsPositive(positive);
       setShowFeedbackPopup(true);
+      setFeedbackTargetResponse(response);
     }
   }
 
@@ -195,6 +195,7 @@ function Chat({entries, humanText, onPrompt, clearConversation}: ChatProps): JSX
           <FeedbackPopup
             show={showFeedbackPopup}
             isPositive={feedbackIsPositive}
+            response={feedbackTargetResponse}
             close={() => setShowFeedbackPopup(false)}/>
           <SettingsPopup
             show={showSettingsPopup}

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();
             }}/>