warning

Author: mtrezza

src/dashboard/Data/Agent/Agent.react.js

@@ -211,7 +211,7 @@ class Agent extends DashboardView {
 
   handleSubmit = async (event) => {
     event.preventDefault();
-    const { inputValue, selectedModel } = this.state;
+    const { inputValue, selectedModel, messages } = this.state;
     const { agentConfig } = this.props;
 
     if (inputValue.trim() === '') {
@@ -238,16 +238,31 @@ class Agent extends DashboardView {
       return;
     }
 
+    // Add warning message if this is the first message in the conversation
+    const isFirstMessage = messages.length === 0;
+    let messagesToAdd = [];
+
+    if (isFirstMessage) {
+      const warningMessage = {
+        id: Date.now() - 1,
+        type: 'warning',
+        content: 'The AI agent has full access to your database using the master key. It can read, modify, and delete any data. This feature is highly recommended for development environments only. Always back up important data before using the AI agent.',
+        timestamp: new Date(),
+      };
+      messagesToAdd.push(warningMessage);
+    }
+
     // Add user message
     const userMessage = {
       id: Date.now(),
       type: 'user',
       content: inputValue.trim(),
       timestamp: new Date(),
     };
+    messagesToAdd.push(userMessage);
 
     this.setState(prevState => ({
-      messages: [...prevState.messages, userMessage],
+      messages: [...prevState.messages, ...messagesToAdd],
       inputValue: '',
       isLoading: true,
     }));
@@ -381,17 +396,28 @@ class Agent extends DashboardView {
         {messages.map((message) => (
           <div
             key={message.id}
-            className={`${styles.message} ${styles[message.type]} ${message.isError ? styles.error : ''}`}
+            className={`${styles.message} ${styles[message.type]} ${message.isError ? styles.error : ''} ${message.type === 'warning' ? styles.warningMessage : ''}`}
           >
-            <div className={styles.messageContent}>
-              {message.type === 'agent' ? this.formatMessageContent(message.content) : message.content}
-            </div>
-            <div className={styles.messageTime}>
-              {message.timestamp instanceof Date ? 
-                message.timestamp.toLocaleTimeString() : 
-                new Date(message.timestamp).toLocaleTimeString()
-              }
-            </div>
+            {message.type === 'warning' ? (
+              <>
+                <Icon name="warn-outline" width={16} height={16} fill="#856404" className={styles.warningIcon} />
+                <div className={styles.warningContent}>
+                  {message.content}
+                </div>
+              </>
+            ) : (
+              <>
+                <div className={styles.messageContent}>
+                  {message.type === 'agent' ? this.formatMessageContent(message.content) : message.content}
+                </div>
+                <div className={styles.messageTime}>
+                  {message.timestamp instanceof Date ? 
+                    message.timestamp.toLocaleTimeString() : 
+                    new Date(message.timestamp).toLocaleTimeString()
+                  }
+                </div>
+              </>
+            )}
           </div>
         ))}
         {isLoading && (

src/dashboard/Data/Agent/Agent.scss

@@ -341,3 +341,33 @@ body:global(.expanded) {
     transform: translateY(0);
   }
 }
+
+.warningMessage {
+  background-color: #fff3cd;
+  border: 1px solid #ffeaa7;
+  color: #856404;
+  padding: 12px 16px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  font-size: 14px;
+  line-height: 1.4;
+  position: relative;
+  max-width: 100%;
+  align-self: stretch;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  
+  .warningIcon {
+    flex-shrink: 0;
+    margin-top: 2px;
+  }
+  
+  .warningContent {
+    flex: 1;
+  }
+  
+  strong {
+    font-weight: 600;
+  }
+}