Show the new features!

README.md

@@ -25,14 +25,19 @@ Or click fork & run on Vercel
 
 🚨 **We added cool new features to the app!** (bare-bones was [466a36](https://github.com/enricoros/nextjs-chatgpt-app/tree/466a3667a48060d406d60943af01fe26366563fb))
 
+- [x] 🎉 **NEW** Typing Avatars
+  <p><a href="blob/main/docs/recording_0401.gif"><img src="docs/recording_0401.gif" width='200' alt="New Typing Avatars"></a></p>
+- [x] 🎉 **NEW** Publish & share chats 📥
+  <p><a href="blob/main/docs/screenshot_export_example1.png"><img src="docs/screenshot_export_example1.png" width='200' alt="Export chats""></a></p>
 - [x] Chat with GPT-4 and 3.5 Turbo 🧠💨
 - [x] **Private**: user-owned API keys 🔑 and localStorage 🛡️
 - [x] **System presets** - including Code, Science, Corporate, and Chat 🎭
-  <p><img src="docs/screenshot_feature_system.png" width='200' alt="System presets"></p>
+  <p><a href="blob/main/docs/screenshot_feature_system.png"><img src="docs/screenshot_feature_system.png" width='200' alt="System presets"></p>
 - [x] **Syntax highlighting** - for multiple languages 🌈
 - [x] **Context** - Drag and drop files to add them to the prompt 📁
-  <p><img src="docs/screenshot_drop_target.png" width='300' alt="Drag and drop"></p>
-- [x] 🎉 **NEW** Stop generation 🛑 (fredliubojin) - Voice input 🎙️ (koganei)
+  <p><a href="blob/main/docs/screenshot_drop_target.png"><img src="docs/screenshot_drop_target.png" width='200' alt="Drag and drop"></a></p>
+- [x] **Stop generation** 🛑 (fredliubojin)
+- [x] **Voice input** 🎙️ (koganei)
 - [x] Real-time streaming of AI responses ⚡
 - [x] Switch API hosts to track quality, including [Helicone](https://www.helicone.ai/) 📈
 - [x] Dark mode 🌙 - Wide mode ⛶

components/ApplicationBar.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { IconButton, ListDivider, ListItem, ListItemDecorator, Menu, MenuItem, Option, Select, Sheet, Stack, Switch, Typography, useColorScheme, useTheme } from '@mui/joy';
+import { Badge, IconButton, ListDivider, ListItem, ListItemDecorator, Menu, MenuItem, Option, Select, Sheet, Stack, Switch, Typography, useColorScheme, useTheme } from '@mui/joy';
 import { SxProps } from '@mui/joy/styles/types';
 import AddIcon from '@mui/icons-material/Add';
 import DarkModeIcon from '@mui/icons-material/DarkMode';
@@ -259,8 +259,12 @@ export function ApplicationBar({ onClearConversation, onExportConversation, onSh
       <ListDivider />
 
       <MenuItem onClick={handleActionExportChat}>
-        <ListItemDecorator><ExitToAppIcon /></ListItemDecorator>
-        Export to Paste.gg
+        <ListItemDecorator>
+          <Badge size='sm' badgeContent='new' color='primary'>
+            <ExitToAppIcon />
+          </Badge>
+        </ListItemDecorator>
+        Share via paste.gg
       </MenuItem>
 
       <MenuItem onClick={e => handleActionClearConversation(e, null)}>

components/Chat.tsx

@@ -11,6 +11,7 @@ import { Composer } from '@/components/Composer';
 import { ConfirmationDialog } from '@/components/util/ConfirmationDialog';
 import { DMessage, useActiveConfiguration, useChatStore } from '@/lib/store-chats';
 import { ExportResultDialog } from '@/components/util/ExportResultDialog';
+import { Link } from '@/components/util/Link';
 import { SystemPurposes } from '@/lib/data';
 import { exportConversation } from '@/lib/export-conversation';
 import { useSettingsStore } from '@/lib/store';
@@ -177,9 +178,9 @@ export function Chat(props: { onShowSettings: () => void, sx?: SxProps }) {
   const handleConfirmedExportConversation = async () => {
     if (exportConfirmationId) {
       const conversation = findConversation(exportConfirmationId);
+      setExportConfirmationId(null);
       if (conversation)
         setExportResponse(await exportConversation('paste.gg', conversation));
-      setExportConfirmationId(null);
     }
   };
 
@@ -235,10 +236,11 @@ export function Chat(props: { onShowSettings: () => void, sx?: SxProps }) {
       {/* Confirmation for Export */}
       <ConfirmationDialog
         open={!!exportConfirmationId} onClose={() => setExportConfirmationId(null)} onPositive={handleConfirmedExportConversation}
-        confirmationText={
-          'This will post the conversation publicly to \'paste.gg\'. The URL will be unlisted and expiring ' +
-          'in 30 days, but you may not be able to delete it. Are you sure you want to proceed?'
-        } positiveActionText={'Understood, Export to paste.gg'}
+        confirmationText={<>
+          Share your conversation anonymously on <Link href='https://paste.gg' target='_blank'>paste.gg</Link>?
+          It will be unlisted and available to share and read for 30 days. Keep in mind, deletion may not be possible.
+          Are you sure you want to proceed?
+        </>} positiveActionText={'Understood, Export to paste.gg'}
       />
 
       {/* Confirmation for Delete */}

components/util/ConfirmationDialog.tsx

@@ -8,7 +8,7 @@ import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
  * A confirmation dialog (Joy Modal)
  * Pass the question and the positive answer, and get called when it's time to close the dialog, or when the positive action is taken
  */
-export function ConfirmationDialog(props: { open: boolean, onClose: () => void, onPositive: () => void, confirmationText: string, positiveActionText: string }) {
+export function ConfirmationDialog(props: { open: boolean, onClose: () => void, onPositive: () => void, confirmationText: string | JSX.Element, positiveActionText: string }) {
   return (
     <Modal open={props.open} onClose={props.onClose}>
       <ModalDialog variant='outlined' color='neutral'>