edit and regenerate messages

src/components/message.tsx

@@ -1,10 +1,12 @@
 import styled from '@emotion/styled';
-import { Button, CopyButton, Loader } from '@mantine/core';
+import { Button, CopyButton, Loader, Textarea } from '@mantine/core';
+import { useState } from 'react';
 
 import { Message } from "../types";
 import { share } from '../utils';
 import { ElevenLabsReaderButton } from '../elevenlabs';
 import { Markdown } from './markdown';
+import { useAppContext } from '../context';
 
 // hide for everyone but screen readers
 const SROnly = styled.span`
@@ -169,6 +171,17 @@ const EndOfChatMarker = styled.div`
     background: rgba(255, 255, 255, 0.1);
 `;
 
+const Editor = styled.div`
+    max-width: 50rem;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 0.5rem;
+
+    .mantine-Button-root {
+        margin-top: 1rem;
+    }
+`;
+
 function getRoleName(role: string, share = false) {
     switch (role) {
         case 'user':
@@ -193,6 +206,10 @@ function InlineLoader() {
 }
 
 export default function MessageComponent(props: { message: Message, last: boolean, share?: boolean }) {
+    const context = useAppContext();
+    const [editing, setEditing] = useState(false);
+    const [content, setContent] = useState('');
+
     if (props.message.role === 'system') {
         return null;
     }
@@ -222,8 +239,30 @@ export default function MessageComponent(props: { message: Message, last: boolea
                         <span>Share</span>
                     </Button>
                 )}
+                {!context.isShare && props.message.role === 'user' && (
+                    <Button variant="subtle" size="sm" compact onClick={() => {
+                        setContent(props.message.content);
+                        setEditing(true);
+                    }}>
+                        <i className="fa fa-edit" />
+                        <span>Edit</span>
+                    </Button>
+                )}
+                {!context.isShare && props.message.role === 'assistant' && (
+                    <Button variant="subtle" size="sm" compact onClick={() => context.regenerateMessage(props.message)}>
+                        <i className="fa fa-refresh" />
+                        <span>Regenerate</span>
+                    </Button>
+                )}
             </div>
-            <Markdown content={props.message.content} className={"content content-" + props.message.id} />
+            {!editing && <Markdown content={props.message.content} className={"content content-" + props.message.id} />}
+            {editing && (<Editor>
+                <Textarea value={content}
+                    onChange={e => setContent(e.currentTarget.value)}
+                    autosize={true} />
+                <Button variant="light" onClick={() => context.editMessage(props.message, content)}>Save changes</Button>
+                <Button variant="subtle" onClick={() => setEditing(false)}>Cancel</Button>
+            </Editor>)}
         </div>
         {props.last && <EndOfChatMarker />}
     </Container>