Changing input field

Author: Aayush-Agnihotri

src/app/chat/[chatId]/page.tsx

@@ -101,6 +101,7 @@ export default function ChatPage() {
       for (const line of lines) {
         if (line.trim()) {
           try {
+            console.log(line);
             const response: ChatStreamCompletionResponse = JSON.parse(line);
             updateMessages(response);
             if (response.done) {
@@ -190,7 +191,7 @@ export default function ChatPage() {
 
   return (
     <Protected>
-      <div className="flex h-svh w-full flex-row gap-0">
+      <div className="flex h-svh flex-row gap-0">
         <ChatMenuNavbar />
 
         <div className="flex w-full flex-col">

src/app/components/InputField.tsx

@@ -87,7 +87,7 @@ export default function InputField({ onSubmit, messageStreaming }: InputFieldPro
     <div className="flex flex-col items-center gap-2">
       <form
         onSubmit={handleSubmit}
-        className="m-auto w-4/6 rounded-lg border border-secondaryColor bg-white px-4 py-2 shadow-sm"
+        className="m-auto w-5/6 rounded-lg border border-secondaryColor bg-white px-4 py-2 shadow-sm"
       >
         {/* TODO: If '.png,.jpg,.jpeg,.heif', display image */}
         <div className="flex gap-2">
@@ -118,12 +118,22 @@ export default function InputField({ onSubmit, messageStreaming }: InputFieldPro
           ))}
         </div>
         <div className="flex items-center">
+          <textarea
+            autoFocus
+            ref={textareaRef}
+            onChange={autoResizeTextarea}
+            onKeyDown={handleKeyDown}
+            placeholder={`Message ${selectedModel}`}
+            className="max-h-[150px] flex-1 resize-none border-none text-gray-700 placeholder-gray-400 outline-none"
+            rows={1}
+          />
+
           <button
             onClick={(e) => {
               e.preventDefault();
               fileInputRef.current?.click();
             }}
-            className="mr-3 text-black hover:opacity-60"
+            className="ml-3 mr-3 text-black hover:opacity-60"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -142,18 +152,9 @@ export default function InputField({ onSubmit, messageStreaming }: InputFieldPro
           </button>
           <input type="file" ref={fileInputRef} onChange={handleFileChange} className="hidden" />
 
-          <textarea
-            autoFocus
-            ref={textareaRef}
-            onChange={autoResizeTextarea}
-            onKeyDown={handleKeyDown}
-            placeholder={`Message ${selectedModel}`}
-            className="max-h-[150px] flex-1 resize-none border-none text-gray-700 placeholder-gray-400 outline-none"
-            rows={1}
-          />
-
           {messageStreaming ? (
             // TODO: Handle aborting message streaming
+
             <button className="ml-3">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -166,7 +167,12 @@ export default function InputField({ onSubmit, messageStreaming }: InputFieldPro
                 <path
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  d="M14.25 9v6m-4.5 0V9M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+                  d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+                />
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M9 9.563C9 9.252 9.252 9 9.563 9h4.874c.311 0 .563.252.563.563v4.874c0 .311-.252.563-.563.563H9.564A.562.562 0 0 1 9 14.437V9.564Z"
                 />
               </svg>
             </button>

src/app/components/chat/ChatMessage.tsx

@@ -99,7 +99,6 @@ export default function ChatMessage({ lastMessage, streaming, message }: ChatMes
           )}
         </div>
         <ReactMarkdown
-          className={'whitespace-pre-line'}
           remarkPlugins={[remarkGfm]}
           components={{
             code({
@@ -115,11 +114,11 @@ export default function ChatMessage({ lastMessage, streaming, message }: ChatMes
               const match = /language-(\w+)/.exec(className || '');
               return !inline && match ? (
                 <SyntaxHighlighter style={materialDark} language={match[1]} PreTag="div" {...props}>
-                  {String(children).replace(/\n$/, '')}
+                  {String(children)}
                 </SyntaxHighlighter>
               ) : (
                 <code className={className} {...props}>
-                  {children}
+                  {String(children)}
                 </code>
               );
             },