mad styling

apps/documentation/src/pages/ProactiveMessage.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+
+const inputStyle = {
+  border: 'solid 1px black',
+  borderRadius: '4px',
+  padding: '2px',
+};
+
+const sendButtonStyle = {
+  background: '#e8e8e8',
+  borderRadius: '4px',
+  padding: '4px 8px',
+  marginLeft: '4px',
+};
+
+export default function ProactiveMessage() {
+  const [message, setMessage] = useState('');
+
+  const send = () => {
+    (window as any).voiceflow.chat.proactive.push({ type: 'text', payload: { message } });
+    setMessage('');
+  };
+
+  return (
+    <div>
+      Add proactive message:
+      <input type="text" style={inputStyle} value={message} onChange={(e) => setMessage(e.target.value)} />
+      <button type="button" style={sendButtonStyle} onClick={send}>
+        Send
+      </button>
+    </div>
+  );
+}

apps/documentation/src/pages/chat.tsx

@@ -2,6 +2,8 @@ import 'regenerator-runtime/runtime';
 
 import { ChatScript } from '@/components/ChatScript';
 
+import ProactiveMessage from './ProactiveMessage';
+
 export const getServerSideProps = async (context: any) => ({
   // will be passed to the page component as props
   props: {
@@ -13,12 +15,13 @@ export const getServerSideProps = async (context: any) => ({
 export default function ChatPage(props: any) {
   return (
     <>
-      <div style={{ position: 'relative' }}>
-        You can switch projects by changing the URL `projectID=...`
-        {props.projectID && <ChatScript {...props} />}
-      </div>
-
       <div style={{ height: '100vh', padding: '30px' }}>
+        <div style={{ position: 'relative' }}>
+          You can switch projects by changing the URL `projectID=...`
+          {props.projectID && <ChatScript {...props} />}
+        </div>
+        <ProactiveMessage />
+
         <div style={{ width: '600px', height: '100%', margin: '0 auto' }} id="chat_embed"></div>
       </div>
     </>