Add confirm property to Message model and devchatAsk method

- Add a `confirm` property to the `Message` model in the `ChatStore.ts` file.
- Add a `devchatAsk` method to create a user message followed by a bot message with the `confirm` property set to `true`.

src/views/components/MessageList/index.tsx

@@ -1,5 +1,5 @@
 
-import { Stack, Container, Divider, Box } from "@mantine/core";
+import { Stack, Container, Divider, Box, Group,Text, Button, createStyles } from "@mantine/core";
 import React, { useEffect } from "react";
 import MessageBody from "@/views/components/MessageBody";
 import MessageAvatar from "@/views/components/MessageAvatar";
@@ -8,14 +8,42 @@ import { useMst } from "@/views/stores/RootStore";
 import { Message } from "@/views/stores/ChatStore";
 import MessageContext from "@/views/components/MessageContext";
 import CurrentMessage from "@/views/components/CurrentMessage";
+import { Card } from '@mantine/core';
+import { IconInfoSquareRounded } from "@tabler/icons-react";
 
+const useStyles = createStyles((theme) => ({
+    card:{
+        backgroundColor: 'var(--vscode-menu-background)',
+        fontFamily: 'var(--vscode-editor-font-familyy)',
+        fontSize: 'var(--vscode-editor-font-size)',
+        color: 'var(--vscode-menu-foreground)',
+        borderColor: 'var(--vscode-menu-border)',
+    },
+    cardDescription:{
+        marginTop: 10,
+        marginBottom: 10,
+    },
+    button:{
+        backgroundColor:"#ED6A45",
+        color:"#fff",
+        "&:hover":{
+            backgroundColor:"#ED6A45",
+            opacity: 0.8,
+        },
+        "&:focus":{
+            backgroundColor:"#ED6A45",
+            opacity: 0.8,
+        }
+    }
+  }));
 
 const MessageList = observer((props: any) => {
     const { chat } = useMst();
+    const {classes} = useStyles();
 
     return (<Stack spacing={0} sx={{margin:'0 10px 10px 10px'}}>
         {chat.messages.map((item, index: number) => {
-            const { message: messageText, type: messageType, hash: messageHash, contexts } = item;
+            const { message: messageText, type: messageType, hash: messageHash, contexts, confirm } = item;
             // setMessage(messageText);
             return <Stack
                 spacing={0}
@@ -40,6 +68,19 @@ const MessageList = observer((props: any) => {
                             whiteSpace: 'break-spaces'
                         },
                     }}>
+                    { messageType === 'bot' &&<Card shadow="sm" padding="xs" radius="md" withBorder className={classes.card}>
+                        <Card.Section withBorder inheritPadding py="xs">
+                            <Group position="left">
+                                <IconInfoSquareRounded size={20} />
+                                <Text fw={500}>Additional Cost Required</Text>
+                            </Group>
+                        </Card.Section>
+                        <Text className={classes.cardDescription}>Will you pay approximately $1.2 - $ 2.2 for this task?</Text>
+                        <Group position="right" >
+                            <Button size="xs" color="#ED6A45" className={classes.button}>Yes</Button>
+                            <Button size="xs" color="#ED6A45" className={classes.button}>No</Button>
+                        </Group>
+                    </Card>}
                     <MessageContext key={`message-context-${index}`} contexts={contexts} />
                     <MessageBody key={`message-codeblock-${index}`} messageType={messageType} >
                         {messageText}

src/views/stores/ChatStore.ts

@@ -61,6 +61,7 @@ export const Message = types.model({
     type: types.enumeration(['user', 'bot', 'system']),
     message: types.string,
     contexts: types.maybe(types.array(ChatContext)),
+    confirm: types.maybe(types.boolean)
 });
 
 export const ChatStore = types.model('Chat', {
@@ -113,8 +114,23 @@ You can configure DevChat from [Settings](#settings).`;
                 }));
         };
 
+        const devchatAsk = (userMessage) => {
+            self.messages.push(
+                Message.create({
+                    type: 'user',
+                    message: userMessage
+                }));
+            self.messages.push(
+                Message.create({
+                    type: 'bot',
+                    message: '',
+                    confirm: true
+                }));
+        };
+
         return {
             helpMessage,
+            devchatAsk,
             updateChatPanelWidth: (width: number) => {
                 self.chatPanelWidth = width;
             },