fix design

Author: norio

components/Chat.tsx

@@ -38,22 +38,22 @@ const InputMessage = ({
       }}
     />
     <Button
-      className='flex-none ml-2'
+      className='flex-none ml-1'
       onClick={() => {
         toggleSpeechRecognition();
       }}
     >
-      {isListening ? "音声認識停止" : "音声認識開始"}
+      {isListening ? "Voice Off" : "Voice On"}
     </Button>
     <Button
       type='submit'
-      className='flex-none ml-4'
+      className='flex-none ml-1'
       onClick={() => {
         sendMessage(input);
         setInput("");
       }}
     >
-      Say
+      Send
     </Button>
   </div>
 );
@@ -178,9 +178,9 @@ export function Chat() {
       {loading && <LoadingChatLine />}
 
       {messages.length < 2 && (
-        <span className='flex flex-grow clear-both mx-auto text-gray-600'>
+        <div className='m-4 text-gray-600'>
           Type a message to start the conversation
-        </span>
+        </div>
       )}
       <InputMessage
         input={input}

components/ChatLine.tsx

@@ -70,10 +70,8 @@ export function ChatLine({ role = "assistant", content }: ChatGPTMessage) {
         <div className='px-4 py-5 mb-1 bg-white rounded-lg shadow-lg ring-1 ring-zinc-100 sm:px-6'>
           <div className='space-x-3'>
             <div className='gap-4'>
-              <p className='text-gray-900 font-large text-xxl'>
-                <a href='#' className='hover:underline'>
-                  {role == "assistant" ? "AI" : "You"}
-                </a>
+              <p className='font-semibold text-gray-900 font-large text-xxl'>
+                {role == "assistant" ? "AI" : "You"}
               </p>
               <div
                 className={clsx(

pages/index.tsx

@@ -1,11 +1,13 @@
-import { Layout, Page, Text } from "@vercel/examples-ui";
+import { Layout, Page } from "@vercel/examples-ui";
 import { Chat } from "../components/Chat";
 
 function Home() {
   return (
     <Page className='flex flex-col gap-12'>
       <section className='flex flex-col gap-3'>
-        <Text variant='h2'>AI Chat:</Text>
+        <h1 className='block pl-1 text-sm font-semibold tracking-tight'>
+          AI Chat:
+        </h1>
         <div className=''>
           <Chat />
         </div>