WIP: Chat

a16z-infra · Aug 9, 2023 · 8c3535f · 8c3535f
1 parent c25bb4a
commit 8c3535f
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 23 deletions.
diff --git a/assets/ui/bubble-left.svg b/assets/ui/bubble-left.svg
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -55,3 +55,10 @@ body {
 .shadow-solid {
   text-shadow: 0 0.1em 0 rgba(0, 0, 0, 0.5);
 }
+
+.bubble {
+  border-width: 36px;
+  border-image-source: url(../../assets/ui/bubble-left.svg);
+  border-image-repeat: stretch;
+  border-image-slice: 40%;
+}
diff --git a/src/components/Chats.tsx b/src/components/Chats.tsx
@@ -21,30 +21,23 @@ function Messages({ conversationId }: { conversationId: Id<'conversations'> }) {
         .map((message, messageIdx) => (
           <li key={message.ts}>
             <div className="relative pb-8">
-              {messageIdx !== messages.length - 1 ? (
-                <span
-                  className="absolute left-1 top-2 -ml-px h-full w-0.5 bg-gray-200"
-                  aria-hidden="true"
-                />
-              ) : null}
               <div className="relative flex space-x-3">
-                <div>
-                  <span className="h-2 w-2 rounded-full flex items-center justify-center ring-3 ring-white bg-gray-400"></span>
-                </div>
                 <div className="flex flex-col min-w-0 flex-1 justify-between space-x-4 pt-1.5">
-                  <div className="whitespace-nowrap text-top text-sm text-gray-500">
+                  <div className="whitespace-nowrap text-top text-sm">
                     <time dateTime={message.ts.toString()}>
                       {new Date(message.ts).toLocaleString()}
                     </time>
                   </div>
                   <div>
                     {message.type === 'responded' ? (
-                      <p className="text-sm text-gray-500">
+                      <div className="text-sm">
                         <b>{message.fromName}: </b>
-                        {message.content}{' '}
-                      </p>
+                        <p className="bubble">
+                          <div className="bg-white">{message.content}</div>
+                        </p>
+                      </div>
                     ) : (
-                      <p className="text-sm text-gray-400">
+                      <p className="text-sm">
                         <b>{message.fromName} </b>
                         {message.type === 'left' ? 'left' : 'started'}
                         {' the conversation'}
@@ -62,14 +55,14 @@ function Messages({ conversationId }: { conversationId: Id<'conversations'> }) {
 
 export default function Chats({ playerState }: { playerState: PlayerState | undefined }) {
   return (
-    <div className="flow-root  max-h-full">
+    <div className="bg-brown-200 text-black p-6">
       {!playerState ? (
         <div className="relative pb-8">Click on an agent on the map to see chat history</div>
       ) : (
         <ul role="list" className="-mb-8 overflow-auto">
           <li className="mb-5">
-            <h3 className="text-base font-semibold leading-6 text-gray-900">{playerState.name}</h3>
-            <p className="text-sm text-gray-500">
+            <h3 className="text-base font-semibold leading-6">{playerState.name}</h3>
+            <p className="text-sm">
               <span>{playerState.identity}</span>
             </p>
           </li>

diff --git a/src/components/Examples.tsx b/src/components/Examples.tsx
@@ -15,17 +15,14 @@ export default function Examples() {
   return (
     <div className="mx-auto flex-1 w-full max-w mt-7 grid grid-rows-[240px_1fr] lg:grid-rows-[1fr] lg:grid-cols-[1fr_auto] lg:max-h-[900px] max-w-[1400px] min-h-[480px] game-frame">
       {/* Game area */}
-      <div className="relative overflow-hidden bg-slate-400" ref={gameWrapperRef}>
+      <div className="relative overflow-hidden bg-brown-900" ref={gameWrapperRef}>
         <div className="absolute inset-0">
           <Game width={width} height={height} setSelectedPlayer={setSelectedPlayer} />
         </div>
       </div>
 
       {/* Right column area */}
-      <div className="flex flex-col overflow-y-auto shrink-0 border-t border-gray-200 px-4 py-6 sm:px-6 lg:w-96 lg:border-l lg:border-t-0 lg:pr-8 xl:pr-6 bg-slate-300 space-y-11">
-        <h1 className="text-3xl font-bold leading-tight tracking-tight text-neutral-700">
-          Conversations
-        </h1>
+      <div className="flex flex-col overflow-y-auto shrink-0 px-4 py-6 sm:px-6 lg:w-96 xl:pr-6 bg-brown-800 space-y-11 text-brown-100">
         <Chats playerState={selectedPlayer} />
       </div>
     </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -10,7 +10,19 @@ module.exports = {
       display: ['var(--font-display)', 'sans-serif'],
       body: ['var(--font-body)', 'monospace'],
     },
-    extend: {},
+    extend: {
+      colors: {
+        brown: {
+          100: '#FFFFFF',
+          200: '#EAD4AA',
+          300: '#E4A672',
+          500: '#B86F50',
+          700: '#743F39',
+          800: '#3F2832',
+          900: '#181425',
+        },
+      },
+    },
   },
   plugins: [require('@tailwindcss/forms')],
 };