added styles and api route symlink

dailyjs/shared/components/Aside/Aside.js

@@ -22,6 +22,8 @@ export const Aside = ({ onClose, children }) => (
       .call-aside {
         background: white;
         position: relative;
+        flex-shrink: 0;
+        flex-grow: 0;
         width: ${ASIDE_WIDTH}px;
         height: 100vh;
         box-sizing: border-box;
@@ -32,6 +34,9 @@ export const Aside = ({ onClose, children }) => (
       .call-aside .inner {
         overflow-x: hidden;
         overflow-y: scroll;
+        height: 100%;
+        display: flex;
+        flex-flow: column wrap;
       }
 
       .call-aside .close {

dailyjs/shared/components/Button/Button.js

@@ -242,6 +242,19 @@ export const Button = forwardRef(
             background: ${hexa(theme.blue.light, 1)};
           }
 
+          .button.transparent {
+            background: transparent;
+            color: var(--primary-default);
+            border: 0px;
+          }
+          .button.transparent:hover,
+          .button.transparent:focus,
+          .button.transparent:active {
+            border: 0px;
+            box-shadow: none;
+            color: var(--primary-dark);
+          }
+
           .button.blur {
             background: ${hexa(theme.blue.default, 0.35)};
             backdrop-filter: blur(10px);

dailyjs/shared/components/Input/Input.js

@@ -120,6 +120,12 @@ const InputContainer = ({ children, prefix, className }) => (
         color: var(--text-mid);
         opacity: 1;
       }
+
+      .transparent :global(input) {
+        background: transparent;
+        border: 0px;
+        box-shadow: none;
+      }
     `}</style>
   </div>
 );

dailyjs/text-chat/components/ChatAside/ChatAside.js

@@ -1,5 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Aside from '@dailyjs/shared/components/Aside';
+import { Button } from '@dailyjs/shared/components/Button';
+import { TextInput } from '@dailyjs/shared/components/Input';
 import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
 import { useChat } from '../../contexts/ChatProvider';
 
@@ -9,6 +11,7 @@ export const ChatAside = () => {
   const { showAside, setShowAside } = useUIState();
   const { sendMessage, chatHistory, setHasNewMessages } = useChat();
   const [newMessage, setNewMessage] = useState('');
+  const chatWindowRef = useRef();
 
   useEffect(() => {
     // Clear out any new message otifications if we're showing the chat screen
@@ -17,33 +20,101 @@ export const ChatAside = () => {
     }
   }, [showAside, chatHistory.length, setHasNewMessages]);
 
+  useEffect(() => {
+    if (chatWindowRef.current) {
+      chatWindowRef.current.scrollTop = chatWindowRef.current.scrollHeight;
+    }
+  }, [chatHistory?.length]);
+
   if (!showAside || showAside !== CHAT_ASIDE) {
     return null;
   }
 
   return (
     <Aside onClose={() => setShowAside(false)}>
-      {chatHistory.map((chatItem) => (
-        <div key={chatItem.id}>
-          {chatItem.sender} - {chatItem.message}
-        </div>
-      ))}
-      <hr />
-      <input
-        type="text"
-        value={newMessage}
-        onChange={(e) => setNewMessage(e.target.value)}
-      />
-      <button
-        type="button"
-        disabled={!newMessage}
-        onClick={() => {
-          sendMessage(newMessage);
-          setNewMessage('');
-        }}
-      >
-        Send a test message
-      </button>
+      <div className="messages-container" ref={chatWindowRef}>
+        {chatHistory.map((chatItem) => (
+          <div
+            className={chatItem.isLocal ? 'message local' : 'message'}
+            key={chatItem.id}
+          >
+            <span className="content">{chatItem.message}</span>
+            <span className="sender">{chatItem.sender}</span>
+          </div>
+        ))}
+      </div>
+      <footer className="chat-footer">
+        <TextInput
+          value={newMessage}
+          placeholder="Type message here"
+          variant="transparent"
+          onChange={(e) => setNewMessage(e.target.value)}
+        />
+        <Button
+          className="send-button"
+          variant="transparent"
+          disabled={!newMessage}
+          onClick={() => {
+            sendMessage(newMessage);
+            setNewMessage('');
+          }}
+        >
+          Send
+        </Button>
+      </footer>
+      <style jsx>{`
+        .messages-container {
+          flex: 1;
+          overflow-y: scroll;
+        }
+
+        .message {
+          margin: var(--spacing-xxs);
+          padding: var(--spacing-xxs);
+          background: var(--gray-wash);
+          border-radius: var(--radius-sm);
+          font-size: 0.875rem;
+        }
+
+        .message.local {
+          background: var(--gray-light);
+        }
+
+        .message.local .sender {
+          color: var(--primary-default);
+        }
+
+        .content {
+          color: var(--text-mid);
+          display: block;
+        }
+
+        .sender {
+          font-weight: var(--weight-medium);
+          font-size: 0.75rem;
+        }
+
+        .chat-footer {
+          flex-flow: row nowrap;
+          box-sizing: border-box;
+          padding: var(--spacing-xxs) 0;
+          display: flex;
+          position: relative;
+          border-top: 1px solid var(--gray-light);
+        }
+
+        .chat-footer :global(.input-container) {
+          flex: 1;
+        }
+
+        .chat-footer :global(.input-container input) {
+          padding-right: 0px;
+        }
+
+        .chat-footer :global(.send-button) {
+          padding: 0 var(--spacing-xs);
+        }
+      `}</style>
     </Aside>
   );
 };

dailyjs/text-chat/contexts/ChatProvider.js

@@ -53,7 +53,7 @@ export const ChatProvider = ({ children }) => {
       // Update local chat history
       return setChatHistory((oldState) => [
         ...oldState,
-        { sender, message, id: nanoid() },
+        { sender, message, id: nanoid(), isLocal: true },
       ]);
     },
     [callObject]

dailyjs/text-chat/pages/api

@@ -0,0 +1 @@
+basic-call/pages/api