UI Fixes (#27): added adjustments to chat input and layout

.gitignore

@@ -46,7 +46,8 @@ next-env.d.ts
 
 
 
-# extra 
+# extra
+extra 
 /src/archive
 /src/experimental
 parsing-cache.json

src/app/api/research/chat/route.ts

@@ -135,6 +135,57 @@ const getErrorMessage = (error: any): string => {
   return "Failed to process your question";
 };
 
+// CODE FOR TESTING PURPOSES - SIMULATED STREAMING RESPONSE
+
+// export async function POST(req: NextRequest) {
+//   try {
+//     const requestData: RequestData = await req.json();
+//     const sessionId = requestData.sessionId || Date.now().toString();
+
+//     const RANDOM_BOGUS = [
+//       "Flibber flabber wozzle!",
+//       "Gloopity glop, the blockchain bounces!",
+//       "Snarfle wumpus, quantum bananas dance!",
+//       "Ziggity zaggity, distributed spaghetti everywhere!",
+//       "Hocus pocus, your query just became a penguin!"
+//     ];
+
+//     const stream = new ReadableStream({
+
+//       async start(controller) {
+//         const startTime = Date.now();
+//         const fiveMinutes = 1 * 10 * 1000;
+
+//         while (Date.now() - startTime < fiveMinutes) {
+//           const randomIndex = Math.floor(Math.random() * RANDOM_BOGUS.length);
+//           const text = RANDOM_BOGUS[randomIndex] + " ";
+
+//           controller.enqueue(text);
+//           console.log("printing........")
+//           // Small delay so it feels like typing
+//           await new Promise((resolve) => setTimeout(resolve, 100));
+//         }
+
+//         controller.close();
+//       },
+//     });
+
+//     return new Response(stream, {
+//       headers: {
+//         "Content-Type": "text/plain; charset=utf-8",
+//         "X-Session-Id": sessionId,
+//       },
+//     });
+//   } catch (error) {
+//     console.error("Error in chat API:", error);
+//     return NextResponse.json(
+//       { error: "Internal server error" },
+//       { status: 500 }
+//     );
+//   }
+// }
+
+
 export async function POST(req: NextRequest) {
   try {
     const requestData: RequestData = await req.json();

src/app/research/components/chat-input.tsx

@@ -35,6 +35,8 @@ interface ChatInputProps {
   isPreparingIndex: boolean;
   selectedDocuments: Document[];
   onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  stopStreaming: () => void;
+  isStreaming: boolean;
 }
 
 export const ChatInput: React.FC<ChatInputProps> = ({
@@ -45,6 +47,8 @@ export const ChatInput: React.FC<ChatInputProps> = ({
   isPreparingIndex,
   selectedDocuments,
   onKeyDown,
+  stopStreaming,
+  isStreaming,
 }) => {
   const { activeTool, setTool } = useTool();
   const [language, setLanguage] = useState<Language>("ts");
@@ -71,6 +75,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     };
 
     onSendMessage(payload);
+    setInputValue("");
   };
 
   const handleToolChange = (tool: string) => {
@@ -165,7 +170,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
               </div>
             </div>
           </div>
-          <Button
+          {/* <Button
             onClick={handleSendMessage}
             disabled={
               !inputValue.trim() ||
@@ -182,7 +187,39 @@ export const ChatInput: React.FC<ChatInputProps> = ({
             ) : (
               <Send className="h-4 w-4" aria-hidden="true" />
             )}
-          </Button>
+          </Button> */}
+          <div className="flex items-center space-x-2">
+            {!isStreaming ? (
+              <Button
+                onClick={handleSendMessage}
+                disabled={
+                  !inputValue.trim() ||
+                  isLoading ||
+                  isPreparingIndex ||
+                  selectedDocuments.length === 0
+                }
+                className="px-4"
+                size="lg"
+                aria-label="Send message"
+              >
+                {isLoading || isPreparingIndex ? (
+                  <Loader size="sm" aria-label="Sending..." />
+                ) : (
+                  <Send className="h-4 w-4" aria-hidden="true" />
+                )}
+              </Button>
+            ) : (
+              <Button
+                onClick={stopStreaming}
+                variant="destructive"
+                size="lg"
+                className="px-4"
+              >
+                Stop
+              </Button>
+            )}
+          </div>
+
         </div>
       </CardContent>
     </div>