Merge main branch and resolve conflicts

Co-authored-by: chrisglein <26607885+chrisglein@users.noreply.github.com>

Author: Copilot

src/AiQuery.tsx

@@ -133,7 +133,7 @@ Respond with the image prompt string in the required format. Do not respond conv
       CallOpenAi({
         api: OpenAiApi.ChatCompletion,
         apiKey: settingsContext.apiKey,
-        instructions: 'The following is a conversation with an AI assistant. The assistant is helpful, creative, clever, and very friendly. If the response involves code, use markdown format for that with ```(language) blocks.',
+        instructions: settingsContext.systemInstructions,
         identifier: 'TEXT-ANSWER:',
         prompt: prompt,
         options: {

src/AiResponse.tsx

@@ -79,13 +79,15 @@ type AiSectionProps = PropsWithChildren<{
   isLoading?: boolean;
   copyValue?: string;
   moreMenu?: FlyoutMenuButtonType[];
+  pinned?: boolean;
 }>;
 function AiSection({
   children,
   id,
   isLoading,
   copyValue,
   moreMenu,
+  pinned = false,
 }: AiSectionProps): JSX.Element {
   const feedbackContext = React.useContext(FeedbackContext);
   const styles = React.useContext(StylesContext);
@@ -102,6 +104,12 @@ function AiSection({
     menuItems.push(...moreMenu);
   }
   if (id !== undefined) {
+    // Add pin/unpin option
+    menuItems.push({
+      title: pinned ? 'Unpin message' : 'Pin message',
+      icon: 0xE718, // Pin icon
+      onPress: () => chatHistory.togglePin(id)
+    });
     menuItems.push(
       {title: 'Delete this response', icon: 0xE74D, onPress: () => chatHistory.deleteResponse(id)}
     );
@@ -128,7 +136,7 @@ function AiSection({
         <Text
           accessibilityRole="header"
           style={[styles.sectionTitle, {flexGrow: 1}]}>
-          OpenAI
+          {pinned ? '📌 ' : ''}OpenAI
         </Text>
         <FlyoutMenu items={menuItems} maxWidth={300} maxHeight={400}/>
       </View>
@@ -150,7 +158,7 @@ function AiSectionContent({id, content}: AiSectionContentProps): JSX.Element {
   const chatHistory = React.useContext(ChatHistoryContext);
   const firstResult = content.responses ? content.responses[0] : '';
   return (
-    <AiSection copyValue={firstResult} id={id}>
+    <AiSection copyValue={firstResult} id={id} pinned={content.pinned}>
       {(() => {
         switch (content.contentType) {
           case ChatContent.Error:

src/App.tsx

@@ -26,6 +26,7 @@ function App(): JSX.Element {
   const [showSettingsPopup, setShowSettingsPopup] = React.useState(false);
   const [showAboutPopup, setShowAboutPopup] = React.useState(false);
   const [readToMeVoice, setReadToMeVoice] = React.useState<string>('');
+  const [systemInstructions, setSystemInstructions] = React.useState<string>('The following is a conversation with an AI assistant. The assistant is helpful, creative, clever, and very friendly. You may use markdown syntax in the response as appropriate.');
 
   const isDarkMode = currentTheme === 'dark';
   const isHighContrast = false;
@@ -46,6 +47,8 @@ function App(): JSX.Element {
     setChatModel: setChatModel,
     readToMeVoice: readToMeVoice,
     setReadToMeVoice: setReadToMeVoice,
+    systemInstructions: systemInstructions,
+    setSystemInstructions: setSystemInstructions,
   };
 
   const popups = {

src/Chat.tsx

@@ -17,6 +17,7 @@ import { SettingsContext } from './Settings';
 import { FluentButton as Button } from './FluentControls';
 import { Speak } from './Speech';
 import Clipboard from '@react-native-clipboard/clipboard';
+import { WelcomeMessage } from './WelcomeMessage';
 
 enum ChatSource {
   Human,
@@ -35,6 +36,7 @@ type ChatElement = {
   prompt?: string;
   responses?: string[];
   content?: JSX.Element;
+  pinned?: boolean;
 };
 
 // Context for read-only access to the chat log
@@ -43,11 +45,13 @@ const ChatHistoryContext = React.createContext<{
   modifyResponse: (id: number, delta?: any) => void;
   deleteResponse: (id: number) => void;
   add: (response: ChatElement) => void;
+  togglePin: (id: number) => void;
 }>({
   entries: [],
   modifyResponse: () => {},
   deleteResponse: () => {},
   add: () => {},
+  togglePin: () => {},
 });
 
 // Context for being able to drive the chat scroller
@@ -75,8 +79,6 @@ function ChatEntry({
     // If the user hits submit but the text is empty, don't carry that forward
     if (value !== '') {
       submit(value);
-      // Reset to a blank prompt
-      setValue('');
     }
   };
 
@@ -89,6 +91,7 @@ function ChatEntry({
         onChangeText={newValue => setValue(newValue)}
         submitKeyEvents={[{code: 'Enter', shiftKey: false}]}
         onSubmitEditing={submitValue}
+        clearTextOnSubmit={true}
         value={defaultText ?? value}
       />
       <Button
@@ -158,11 +161,16 @@ function Chat({
 
   const copyEntireChatLog = () => {
     const chatLogText = entries.map((entry) => {
-      const content = entry.responses ? entry.responses[0] : '';
       if (entry.type === ChatSource.Human) {
+        // Human prompt
+        const content = entry.responses ? entry.responses[0] : '';
         return `Prompt: ${content}`;
       } else {
-        return `OpenAI: ${content}`;
+        // AI response
+        if (entry.responses?.length > 0) {
+          return `OpenAI: ${entry.responses[0]}`;
+        }
+        return 'OpenAI: [Loading...]';
       }
     }).join('\n\n');
 
@@ -179,6 +187,7 @@ function Chat({
             style={{flexShrink: 1}}>
             <View
               style={{gap: 12}}>
+              {entries.length === 0 && <WelcomeMessage />}
               {// For each item in the chat log, render the appropriate component
               entries.map((entry) => (
                 <View key={entry.id}>
@@ -187,7 +196,8 @@ function Chat({
                       // Human inputs are always plain text
                       <HumanSection
                         id={entry.id}
-                        content={entry.responses ? entry.responses[0] : ''}/> :
+                        content={entry.responses ? entry.responses[0] : ''}
+                        pinned={entry.pinned}/> :
                       entry.content ?
                         // The element may have provided its own UI
                         entry.content :
@@ -228,7 +238,7 @@ function Chat({
                   onPress: () => popups.setShowAbout(true),
                 },
                 {
-                  title: 'Copy all',
+                  title: 'Copy entire chat log',
                   icon: 0xE8C8,
                   onPress: () => copyEntireChatLog(),
                 },

src/ChatSession.tsx

@@ -128,6 +128,7 @@ function ChatSession(): JSX.Element {
       if (delta.hasOwnProperty('contentType')) {entry.contentType = delta.contentType;}
       if (delta.hasOwnProperty('prompt')) {entry.prompt = delta.prompt;}
       if (delta.hasOwnProperty('intent')) {entry.intent = delta.intent;}
+      if (delta.hasOwnProperty('pinned')) {entry.pinned = delta.pinned;}
 
         modifiedEntries[index] = entry;
         setEntries(modifiedEntries);
@@ -143,18 +144,43 @@ function ChatSession(): JSX.Element {
         console.error(`Index ${index} is out of bounds`);
       } else {
         modifiedEntries.splice(index, 1);
-        setEntries(modifiedEntries);
+        // Re-index the remaining entries to maintain ID-to-index consistency
+        const reindexedEntries = modifiedEntries.map((entry, newIndex) => ({
+          ...entry,
+          id: newIndex
+        }));
+        setEntries(reindexedEntries);
       }
     },
     [entries],
   );
 
+  const togglePin = React.useCallback(
+    (index: number) => {
+      modifyEntry(index, { pinned: !entries[index]?.pinned });
+    },
+    [entries, modifyEntry],
+  );
+
   const clearConversation = async () => {
-    setEntries([]);
-    // Clear the stored chat data as well
+    // Keep only pinned messages when clearing
+    const pinnedEntries = entries.filter(entry => entry.pinned);
+    // Re-index the pinned entries to maintain ID-to-index consistency
+    const reindexedEntries = pinnedEntries.map((entry, index) => ({
+      ...entry,
+      id: index
+    }));
+    setEntries(reindexedEntries);
+    
+    // Update stored chat data with only pinned entries
     try {
-      await AsyncStorage.removeItem(chatLogKey);
-      console.debug('Cleared stored chat data');
+      if (reindexedEntries.length > 0) {
+        await SaveChatData(reindexedEntries);
+        console.debug('Cleared non-pinned chat data');
+      } else {
+        await AsyncStorage.removeItem(chatLogKey);
+        console.debug('Cleared stored chat data');
+      }
     } catch (e) {
       console.error('Error clearing chat data:', e);
     }
@@ -166,6 +192,7 @@ function ChatSession(): JSX.Element {
         entries: entries,
         modifyResponse: modifyEntry,
         deleteResponse: deleteEntry,
+        togglePin: togglePin,
         add: element => {
           element.id = entries.length;
           appendEntry(element);

src/FluentControls.tsx

@@ -244,6 +244,8 @@ type LinkProps = {
 }
 
 const Link = (props: LinkProps) => {
+  const styles = React.useContext(StylesContext);
+
   const handlePress = () => {
     Linking.openURL(props.url).catch(err => {
       console.error('Failed to open URL:', err);
@@ -257,10 +259,10 @@ const Link = (props: LinkProps) => {
       style={({ pressed }) => ({
         opacity: pressed ? 0.8 : 1,
       })}>
-      <Text style={{
+      <Text style={[styles.text, {
         color: '#0078d4',
         textDecorationLine: 'underline',
-      }}>
+      }]}>
         {props.content}
       </Text>
     </Pressable>

src/HumanQuery.tsx

@@ -12,13 +12,15 @@ type HumanSectionProps = PropsWithChildren<{
   content?: string;
   disableCopy?: boolean;
   moreMenu?: FlyoutMenuButtonType[];
+  pinned?: boolean;
 }>;
 function HumanSection({
   children,
   id,
   content,
   disableCopy,
   moreMenu,
+  pinned = false,
 }: HumanSectionProps): JSX.Element {
   const styles = React.useContext(StylesContext);
   const chatHistory = React.useContext(ChatHistoryContext);
@@ -28,6 +30,12 @@ function HumanSection({
     menuItems.push(...moreMenu);
   }
   if (id !== undefined) {
+    // Add pin/unpin option
+    menuItems.push({
+      title: pinned ? 'Unpin message' : 'Pin message',
+      icon: 0xE718, // Pin icon
+      onPress: () => chatHistory.togglePin(id)
+    });
     menuItems.push(
       {title: 'Delete this response', icon: 0xE74D, onPress: () => chatHistory.deleteResponse(id)}
     );
@@ -47,7 +55,7 @@ function HumanSection({
         <Text
           accessibilityRole="header"
           style={[styles.sectionTitle, {flexGrow: 1}]}>
-          Prompt
+          {pinned ? '📌 ' : ''}Prompt
         </Text>
         <FlyoutMenu items={menuItems} maxWidth={300} maxHeight={400}/>
       </View>

src/OpenAI.tsx

@@ -28,7 +28,7 @@ const OpenAiHandler = ({api, options, instructions}: OpenAiHandlerType) => {
 
   let actualInstructions =
     instructions ??
-    'The following is a conversation with an AI assistant. The assistant is helpful, creative, clever, and very friendly.';
+    'The following is a conversation with an AI assistant. The assistant is helpful, creative, clever, and very friendly. You may use markdown syntax in the response as appropriate.';
 
   switch (api) {
     case OpenAiApi.Completion:
@@ -128,7 +128,7 @@ const CallOpenAi = async ({
   let effectiveApiKey = await getEffectiveApiKey(apiKey);
 
   if (!effectiveApiKey) {
-    const errorMessage = 'To use this app, you need an OpenAI API key. Get one at https://platform.openai.com/account/api-keys and enter it in Settings.';
+    const errorMessage = 'To use this app, you need an OpenAI API key. Get one at https://platform.openai.com/account/api-keys and enter it in the settings menu below (...).';
     onError(errorMessage);
     onComplete();
     return;