argument generation

src/app/components/chat/ChatInput.tsx

@@ -4,7 +4,7 @@ import { useMCPTools } from '../../hooks/useMCPTools.ts';
 import type { MCPTool } from '../../types/index.ts';
 
 type ChatInputProps = {
-  onSubmit?: (message: string) => void;
+  onSubmit?: (message: string, selectedTool?: string | null) => void;
   placeholder?: string;
 };
 
@@ -31,7 +31,7 @@ const ChatInput = ({ onSubmit, placeholder = 'Ask a follow-up...' }: ChatInputPr
     e.preventDefault();
     if (input.trim()) {
       if (onSubmit) {
-        onSubmit(input);
+        onSubmit(input, selectedTool);
       }
       console.log('Submitted:', input);
       setInput('');
@@ -253,6 +253,17 @@ const ChatInput = ({ onSubmit, placeholder = 'Ask a follow-up...' }: ChatInputPr
               <textarea
                 value={input}
                 onChange={(e) => setInput(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    if (input.trim()) {
+                      if (onSubmit) {
+                        onSubmit(input, selectedTool);
+                      }
+                      setInput('');
+                    }
+                  }
+                }}
                 placeholder={placeholder}
                 className="w-full bg-transparent text-zinc-800 dark:text-gray-300 placeholder-zinc-400 dark:placeholder-gray-500 resize-none border-none outline-none text-base leading-relaxed min-h-[24px] max-h-32 transition-all duration-200"
                 rows={1}
@@ -442,9 +453,18 @@ const ChatInput = ({ onSubmit, placeholder = 'Ask a follow-up...' }: ChatInputPr
 
                   <button
                     type="button"
-                    className="h-8 px-3 rounded-lg text-sm font-medium hover:opacity-90 transition-all duration-200 hover:scale-105 flex items-center justify-center bg-teal-900 dark:bg-[#032827] text-teal-300 dark:text-[#2DD4BF]"
+                    onClick={() => {
+                      if (input.trim()) {
+                        if (onSubmit) {
+                          onSubmit(input, selectedTool);
+                        }
+                        setInput('');
+                      }
+                    }}
+                    disabled={!input.trim()}
+                    className="h-8 px-3 rounded-lg text-sm font-medium hover:opacity-90 transition-all duration-200 hover:scale-105 flex items-center justify-center bg-teal-900 dark:bg-[#032827] text-teal-300 dark:text-[#2DD4BF] disabled:opacity-50 disabled:cursor-not-allowed"
                   >
-                    LLM
+                    Send
                   </button>
                 </div>
 

src/app/components/chat/MessageList.tsx

@@ -0,0 +1,115 @@
+import React, { useEffect, useRef } from 'react';
+import type { ChatMessage } from '../../types/chat.types.ts';
+import { Loader2, AlertCircle, RotateCcw } from 'lucide-react';
+
+type MessageListProps = {
+  messages: ChatMessage[];
+  isLoading?: boolean;
+  error?: string | null;
+  onRetry?: () => void;
+};
+
+const MessageList = ({ messages, isLoading = false, error = null, onRetry }: MessageListProps) => {
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, isLoading]);
+
+  const formatTime = (date: Date) => {
+    return date.toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  return (
+    <div className="flex-1 overflow-y-auto px-4 py-6 space-y-4">
+      {messages.length === 0 && !isLoading && (
+        <div className="flex flex-col items-center justify-center h-full text-center">
+          <div className="mb-4">
+            <div className="w-16 h-16 bg-gradient-to-br from-teal-400 to-blue-500 rounded-full flex items-center justify-center">
+              <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+              </svg>
+            </div>
+          </div>
+          <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
+            Start a conversation
+          </h3>
+          <p className="text-sm text-gray-500 dark:text-gray-400 max-w-md">
+            Ask me anything! I'm powered by Meta's Llama 4 Scout model and can help with a wide range of topics.
+          </p>
+        </div>
+      )}
+
+      {messages.map((message) => (
+        <div
+          key={message.id}
+          className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
+        >
+          <div
+            className={`max-w-3xl px-4 py-3 rounded-2xl ${
+              message.role === 'user'
+                ? 'bg-teal-500 text-white ml-12'
+                : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 mr-12'
+            }`}
+          >
+            <div className="whitespace-pre-wrap break-words">{message.content}</div>
+            <div
+              className={`text-xs mt-1 ${
+                message.role === 'user'
+                  ? 'text-teal-100'
+                  : 'text-gray-500 dark:text-gray-400'
+              }`}
+            >
+              {formatTime(message.timestamp)}
+            </div>
+          </div>
+        </div>
+      ))}
+
+      {isLoading && (
+        <div className="flex justify-start">
+          <div className="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 mr-12 max-w-3xl px-4 py-3 rounded-2xl">
+            <div className="flex items-center space-x-2">
+              <Loader2 className="w-4 h-4 animate-spin" />
+              <span className="text-sm">Thinking...</span>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {error && (
+        <div className="flex justify-start">
+          <div className="bg-red-50 dark:bg-red-900/20 text-red-900 dark:text-red-100 mr-12 max-w-3xl px-4 py-3 rounded-2xl border border-red-200 dark:border-red-800">
+            <div className="flex items-start space-x-2">
+              <AlertCircle className="w-5 h-5 text-red-500 dark:text-red-400 flex-shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <p className="text-sm font-medium">Error</p>
+                <p className="text-sm opacity-90">{error}</p>
+                {onRetry && (
+                  <button
+                    onClick={onRetry}
+                    className="mt-2 flex items-center space-x-1 text-sm text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 transition-colors"
+                  >
+                    <RotateCcw className="w-3 h-3" />
+                    <span>Retry</span>
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div ref={messagesEndRef} />
+    </div>
+  );
+};
+
+export default MessageList;

src/app/hooks/index.ts

@@ -6,4 +6,5 @@ export { default as useApi } from './useApi.ts';
 export { useApi as useApiHook } from './useApi.ts';
 export { useTheme } from './useTheme.ts';
 export { useAuth } from './useAuth.ts';
+export { useChat } from './useChat.ts';
 

src/app/hooks/useChat.ts

@@ -0,0 +1,160 @@
+import { useState, useCallback } from 'react';
+import { sendChatMessageStream } from '../services/groq.service.ts';
+import { generateEnhancedArgument } from '../services/argument.service.ts';
+import type { ChatMessage, ChatState } from '../types/chat.types.ts';
+
+const generateId = () => Math.random().toString(36).substring(2, 15);
+
+const initialState: ChatState = {
+  messages: [],
+  isLoading: false,
+  error: null,
+};
+
+export const useChat = () => {
+  const [state, setState] = useState<ChatState>(initialState);
+
+  const addMessage = useCallback((message: Omit<ChatMessage, 'id' | 'timestamp'>) => {
+    setState(prev => ({
+      ...prev,
+      messages: [...prev.messages, {
+        ...message,
+        id: generateId(),
+        timestamp: new Date(),
+      }],
+    }));
+  }, []);
+
+
+  const extractTopicAndPosition = useCallback(async (userInput: string): Promise<{ topic: string; position: string }> => {
+    const extractionPrompt = `Extract the debate topic and position from the following text. Return ONLY a JSON object with "topic" and "position" keys. The position should be either "positive" (in favor) or "negative" (against).
+
+Text: "${userInput}"
+
+Example output:
+{"topic": "Assisted suicide should be a criminal offence", "position": "positive"}`;
+
+    try {
+      const response = await sendChatMessageStream([
+        { id: generateId(), role: 'user', content: extractionPrompt, timestamp: new Date() }
+      ], () => {});
+      
+      // Parse the JSON response
+      const jsonMatch = response.match(/\{[^}]+\}/);
+      if (jsonMatch) {
+        return JSON.parse(jsonMatch[0]);
+      }
+      throw new Error('Failed to extract topic and position');
+    } catch (error) {
+      throw new Error('Failed to extract topic and position from input');
+    }
+  }, []);
+
+  const sendMessage = useCallback(async (content: string, selectedTool?: string | null) => {
+    // Add user message
+    const userMessage: Omit<ChatMessage, 'id' | 'timestamp'> = {
+      role: 'user',
+      content,
+    };
+    addMessage(userMessage);
+
+    // Set loading state
+    setState(prev => ({ ...prev, isLoading: true, error: null }));
+
+    try {
+      // Get all messages including the new user message
+      const updatedMessages = [...state.messages, { ...userMessage, id: generateId(), timestamp: new Date() }];
+
+      // Check if generate argument tool is selected (check for multiple possible names)
+      const isGenerateArgumentTool = selectedTool && (
+        selectedTool.toLowerCase().includes('generate') && 
+        selectedTool.toLowerCase().includes('argument')
+      );
+
+      if (isGenerateArgumentTool) {
+        console.log('Generate argument tool detected:', selectedTool);
+        // Extract topic and position using LLM
+        const { topic, position } = await extractTopicAndPosition(content);
+        
+        // Call the external API
+        const argumentResponse = await generateEnhancedArgument({ topic, position });
+        
+        // Add assistant response with the enhanced argument
+        const assistantMessage: Omit<ChatMessage, 'id' | 'timestamp'> = {
+          role: 'assistant',
+          content: argumentResponse.enhanced_argument,
+        };
+        addMessage(assistantMessage);
+      } else {
+        // Regular chat with streaming
+        // Create an empty assistant message that will be updated with streaming content
+        const assistantId = generateId();
+        const assistantMessage: ChatMessage = {
+          id: assistantId,
+          role: 'assistant',
+          content: '',
+          timestamp: new Date(),
+        };
+        
+        setState(prev => ({
+          ...prev,
+          messages: [...prev.messages, assistantMessage],
+        }));
+
+        // Send to Groq API with streaming
+        await sendChatMessageStream(updatedMessages, (chunk) => {
+          setState(prev => ({
+            ...prev,
+            messages: prev.messages.map(msg => 
+              msg.id === assistantId ? { ...msg, content: msg.content + chunk } : msg
+            ),
+          }));
+        });
+      }
+
+      setState(prev => ({ ...prev, isLoading: false }));
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to send message';
+      setState(prev => ({ ...prev, isLoading: false, error: errorMessage }));
+    }
+  }, [state.messages, addMessage, extractTopicAndPosition]);
+
+  const clearMessages = useCallback(() => {
+    setState(initialState);
+  }, []);
+
+  const retryLastMessage = useCallback(() => {
+    if (state.messages.length >= 2) {
+      const lastUserMessage = [...state.messages]
+        .reverse()
+        .find(msg => msg.role === 'user');
+      
+      if (lastUserMessage) {
+        // Remove the last failed assistant message if exists
+        setState(prev => {
+          const lastMessage = prev.messages[prev.messages.length - 1];
+          if (lastMessage?.role === 'assistant') {
+            return {
+              ...prev,
+              messages: prev.messages.slice(0, -1),
+              error: null,
+            };
+          }
+          return { ...prev, error: null };
+        });
+        
+        // Resend the user message
+        sendMessage(lastUserMessage.content);
+      }
+    }
+  }, [state.messages, sendMessage]);
+
+  return {
+    messages: state.messages,
+    isLoading: state.isLoading,
+    error: state.error,
+    sendMessage,
+    clearMessages,
+    retryLastMessage,
+  };
+};

src/app/pages/ChatPage.tsx

@@ -1,17 +1,46 @@
 import React from 'react';
 import ChatInput from '../components/chat/ChatInput.tsx';
+import MessageList from '../components/chat/MessageList.tsx';
+import { useChat } from '../hooks/useChat.ts';
 
 const ChatPage = () => {
-  const handleMessageSubmit = (message: string) => {
-    console.log('Message submitted:', message);
-    // TODO: Implement chat message handling
+  const { messages, isLoading, error, sendMessage, retryLastMessage } = useChat();
+
+  const handleMessageSubmit = (message: string, selectedTool?: string | null) => {
+    sendMessage(message, selectedTool);
   };
 
+  const hasConversation = messages.length > 0;
+
   return (
-    <div className="flex min-h-screen items-center justify-center bg-white dark:bg-black px-4 pt-20 pb-10 transition-colors duration-200">
-      <div className="w-full max-w-4xl">
-        <ChatInput onSubmit={handleMessageSubmit} />
-      </div>
+    <div className={`flex min-h-screen bg-white dark:bg-black transition-colors duration-200 ${hasConversation ? 'flex-col' : ''}`}>
+      {hasConversation ? (
+        <>
+          {/* Messages */}
+          <div className="flex-1 max-w-4xl w-full mx-auto pt-20">
+            <MessageList
+              messages={messages}
+              isLoading={isLoading}
+              error={error}
+              onRetry={retryLastMessage}
+            />
+          </div>
+
+          {/* Input */}
+          <div className="px-4 py-4">
+            <div className="max-w-4xl mx-auto">
+              <ChatInput onSubmit={handleMessageSubmit} placeholder="Type your message..." />
+            </div>
+          </div>
+        </>
+      ) : (
+        /* Centered input when no conversation */
+        <div className="flex items-center justify-center px-4 pt-20 pb-10 w-full">
+          <div className="w-full max-w-4xl">
+            <ChatInput onSubmit={handleMessageSubmit} placeholder="Ask me anything..." />
+          </div>
+        </div>
+      )}
     </div>
   );
 };

src/app/services/argument.service.ts

@@ -0,0 +1,45 @@
+export type ArgumentRequest = {
+  topic: string;
+  position: string;
+};
+
+export type ArgumentResponse = {
+  topic: string;
+  position: string;
+  original_argument: string;
+  enhanced_argument: string;
+  process: string;
+};
+
+/**
+ * Calls the external N8N webhook to generate enhanced arguments
+ */
+export async function generateEnhancedArgument(request: ArgumentRequest): Promise<ArgumentResponse> {
+  const webhookUrl = process.env.REACT_APP_N8N_WEBHOOK_URL;
+  
+  if (!webhookUrl) {
+    throw new Error('REACT_APP_N8N_WEBHOOK_URL environment variable is not set');
+  }
+
+  try {
+    const response = await fetch(`${webhookUrl}/generate-argument-enhanced`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(request),
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const data: ArgumentResponse = await response.json();
+    return data;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw error;
+    }
+    throw new Error('Failed to generate enhanced argument');
+  }
+}

src/app/services/groq.service.ts

@@ -0,0 +1,216 @@
+import type { ChatMessage } from '../types/chat.types.ts';
+
+const GROQ_API_URL = 'https://api.groq.com/openai/v1';
+const MODEL = 'meta-llama/llama-4-scout-17b-16e-instruct';
+
+export type GroqMessage = {
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+};
+
+export type GroqChatResponse = {
+  id: string;
+  object: string;
+  created: number;
+  model: string;
+  choices: Array<{
+    index: number;
+    message: {
+      role: 'assistant';
+      content: string;
+    };
+    finish_reason: string;
+  }>;
+  usage: {
+    prompt_tokens: number;
+    completion_tokens: number;
+    total_tokens: number;
+  };
+};
+
+export type GroqStreamChunk = {
+  id: string;
+  object: string;
+  created: number;
+  model: string;
+  choices: Array<{
+    index: number;
+    delta: {
+      role?: 'assistant';
+      content?: string;
+    };
+    finish_reason: string | null;
+  }>;
+};
+
+export type GroqError = {
+  error: {
+    message: string;
+    type: string;
+    code?: string;
+  };
+};
+
+/**
+ * Sends messages to Groq API and returns the assistant's response
+ */
+export async function sendChatMessage(messages: ChatMessage[]): Promise<string> {
+  const apiKey = process.env.REACT_APP_GROQ_API_KEY;
+  
+  if (!apiKey) {
+    throw new Error('REACT_APP_GROQ_API_KEY environment variable is not set');
+  }
+
+  // Convert our ChatMessage format to Groq's expected format
+  const groqMessages: GroqMessage[] = messages.map(msg => ({
+    role: msg.role,
+    content: msg.content
+  }));
+
+  try {
+    const response = await fetch(`${GROQ_API_URL}/chat/completions`, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${apiKey}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        model: MODEL,
+        messages: groqMessages,
+        temperature: 0.7,
+        max_tokens: 4096,
+        top_p: 1,
+        stream: true,
+      }),
+    });
+
+    if (!response.ok) {
+      const errorData: GroqError = await response.json();
+      throw new Error(errorData.error?.message || `HTTP error! status: ${response.status}`);
+    }
+
+    const reader = response.body?.getReader();
+    if (!reader) {
+      throw new Error('Failed to get response reader');
+    }
+
+    const decoder = new TextDecoder();
+    let fullContent = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      const chunk = decoder.decode(value, { stream: true });
+      const lines = chunk.split('\n');
+
+      for (const line of lines) {
+        if (line.startsWith('data: ')) {
+          const data = line.slice(6);
+          if (data === '[DONE]') continue;
+
+          try {
+            const parsed: GroqStreamChunk = JSON.parse(data);
+            const content = parsed.choices[0]?.delta?.content;
+            if (content) {
+              fullContent += content;
+            }
+          } catch (e) {
+            // Skip invalid JSON
+          }
+        }
+      }
+    }
+
+    return fullContent;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw error;
+    }
+    throw new Error('Failed to send message to Groq API');
+  }
+}
+
+/**
+ * Sends messages to Groq API with streaming support
+ */
+export async function sendChatMessageStream(
+  messages: ChatMessage[],
+  onChunk: (chunk: string) => void
+): Promise<string> {
+  const apiKey = process.env.REACT_APP_GROQ_API_KEY;
+  
+  if (!apiKey) {
+    throw new Error('REACT_APP_GROQ_API_KEY environment variable is not set');
+  }
+
+  // Convert our ChatMessage format to Groq's expected format
+  const groqMessages: GroqMessage[] = messages.map(msg => ({
+    role: msg.role,
+    content: msg.content
+  }));
+
+  try {
+    const response = await fetch(`${GROQ_API_URL}/chat/completions`, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${apiKey}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        model: MODEL,
+        messages: groqMessages,
+        temperature: 0.7,
+        max_tokens: 4096,
+        top_p: 1,
+        stream: true,
+      }),
+    });
+
+    if (!response.ok) {
+      const errorData: GroqError = await response.json();
+      throw new Error(errorData.error?.message || `HTTP error! status: ${response.status}`);
+    }
+
+    const reader = response.body?.getReader();
+    if (!reader) {
+      throw new Error('Failed to get response reader');
+    }
+
+    const decoder = new TextDecoder();
+    let fullContent = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      const chunk = decoder.decode(value, { stream: true });
+      const lines = chunk.split('\n');
+
+      for (const line of lines) {
+        if (line.startsWith('data: ')) {
+          const data = line.slice(6);
+          if (data === '[DONE]') continue;
+
+          try {
+            const parsed: GroqStreamChunk = JSON.parse(data);
+            const content = parsed.choices[0]?.delta?.content;
+            if (content) {
+              fullContent += content;
+              onChunk(content);
+            }
+          } catch (e) {
+            // Skip invalid JSON
+          }
+        }
+      }
+    }
+
+    return fullContent;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw error;
+    }
+    throw new Error('Failed to send message to Groq API');
+  }
+}

src/app/types/chat.types.ts

@@ -0,0 +1,20 @@
+export type MessageRole = 'user' | 'assistant' | 'system';
+
+export type ChatMessage = {
+  id: string;
+  role: MessageRole;
+  content: string;
+  timestamp: Date;
+};
+
+export type ChatState = {
+  messages: ChatMessage[];
+  isLoading: boolean;
+  error: string | null;
+};
+
+export type ChatHistory = {
+  messages: ChatMessage[];
+  createdAt: Date;
+  updatedAt: Date;
+};

src/app/types/index.ts

@@ -7,4 +7,5 @@ export * from './api.types.ts';
 export * from './analysis.types.ts';
 export * from './user.types.ts';
 export * from './mcp.types.ts';
+export * from './chat.types.ts';