homepage working version

Author: Fr4nc3

src/frontend_react/src/components/content/HomeInput.tsx

@@ -13,9 +13,11 @@ import {
     DocumentEdit20Regular,
 } from "@fluentui/react-icons";
 import React, { useRef, useEffect } from "react";
+import { useNavigate } from 'react-router-dom';
 import "./../../styles/Chat.css"; // Assuming you have a CSS file for additional styles
 import "./../../styles/HomeInput.css";
-import { HomeInputProps, quickTasks } from "../../models/homeInput";
+import { HomeInputProps, quickTasks, QuickTask } from "../../models/homeInput";
+import { TaskService } from "../../services/TaskService";
 
 
 const HomeInput: React.FC<HomeInputProps> = ({
@@ -24,16 +26,41 @@ const HomeInput: React.FC<HomeInputProps> = ({
 }) => {
     const [inputValue, setInputValue] = React.useState("");
     const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const navigate = useNavigate();
 
-    const handleSubmit = () => {
+    const handleSubmit = async () => {
         if (inputValue.trim()) {
-            onInputSubmit(inputValue.trim());
-            setInputValue("");
-            if (textareaRef.current) {
-                textareaRef.current.style.height = "auto";
+            try {
+                // Submit the input task using TaskService
+                const response = await TaskService.submitInputTask(inputValue.trim());
+
+                // Clear the input field
+                setInputValue("");
+                if (textareaRef.current) {
+                    textareaRef.current.style.height = "auto";
+                }
+
+                // Navigate to the plan page using the plan_id from the response
+                navigate(`/plan/${response.plan_id}`);
+
+            } catch (error) {
+                console.error('Failed to create task:', error);
+                // You can add error handling here if needed
             }
         }
     };
+    const handleQuickTaskClick = (task: QuickTask) => {
+        // Copy task description to textarea
+        setInputValue(task.description);
+
+        // Focus on textarea
+        if (textareaRef.current) {
+            textareaRef.current.focus();
+        }
+
+        // Call the onQuickTaskSelect with the task description
+        onQuickTaskSelect(task.description);
+    };
 
     const handleKeyPress = (e: React.KeyboardEvent) => {
         if (e.key === "Enter" && !e.shiftKey) {
@@ -66,7 +93,6 @@ const HomeInput: React.FC<HomeInputProps> = ({
                                 className="home-input-input-field"
                                 value={inputValue}
                                 onChange={(e) => setInputValue(e.target.value)}
-                                onKeyPress={handleKeyPress}
                                 placeholder="Describe what you'd like to do or use / to reference files, people, and more"
                                 rows={1}
                             />
@@ -86,22 +112,21 @@ const HomeInput: React.FC<HomeInputProps> = ({
                         <div className="home-input-quick-tasks-header">
                             <Text className="home-input-quick-tasks-title">Quick tasks</Text>
                         </div>
-                        <div className="home-input-quick-tasks">
-                            {quickTasks.map((task) => (
-                                <Card
-                                    key={task.id}
-                                    className="home-input-quick-task-card"
-                                    onClick={() => onQuickTaskSelect(task.id)}
-                                >
-                                    <div className="home-input-card-content">
-                                        <div className="home-input-card-icon">{task.icon}</div>
-                                        <div className="home-input-card-text-content">
-                                            <Text className="home-input-card-title">{task.title}</Text>
-                                            <Text className="home-input-card-description">{task.description}</Text>
-                                        </div>
+                        <div className="home-input-quick-tasks">                            {quickTasks.map((task) => (
+                            <Card
+                                key={task.id}
+                                className="home-input-quick-task-card"
+                                onClick={() => handleQuickTaskClick(task)}
+                            >
+                                <div className="home-input-card-content">
+                                    <div className="home-input-card-icon">{task.icon}</div>
+                                    <div className="home-input-card-text-content">
+                                        <Text className="home-input-card-title">{task.title}</Text>
+                                        <Text className="home-input-card-description">{task.description}</Text>
                                     </div>
-                                </Card>
-                            ))}
+                                </div>
+                            </Card>
+                        ))}
                         </div>
                     </div>
                 </div>

src/frontend_react/src/models/homeInput.tsx

@@ -36,5 +36,5 @@ export const quickTasks: QuickTask[] = [
 
 export interface HomeInputProps {
     onInputSubmit: (input: string) => void;
-    onQuickTaskSelect: (taskId: string) => void;
+    onQuickTaskSelect: (taskDescription: string) => void;
 }

…ontend_react/src/services/TaskService.ts …ntend_react/src/services/TaskService.tsxsrc/frontend_react/src/services/TaskService.ts renamed to src/frontend_react/src/services/TaskService.tsx src/frontend_react/src/services/TaskService.ts renamed to src/frontend_react/src/services/TaskService.tsx

@@ -1,6 +1,7 @@
 import { PlanWithSteps, PlanStatus } from '../models';
 import { Task } from '../models/taskList';
 import { apiService } from '../api/apiService';
+import { InputTask, InputTaskResponse } from '../models/inputTask';
 
 /**
  * TaskService - Service for handling task-related operations and transformations
@@ -77,6 +78,32 @@ export class TaskService {
     static filterTasksByStatus(tasks: Task[], status: 'inprogress' | 'completed'): Task[] {
         return tasks.filter(task => task.status === status);
     }
+
+    /**
+     * Generate a session ID using the specified algorithm
+     * @returns Generated session ID in format "sid_" + timestamp + "_" + random
+     */
+    static generateSessionId(): string {
+        const timestamp = new Date().getTime();
+        const random = Math.floor(Math.random() * 10000);
+        return `sid_${timestamp}_${random}`;
+    }
+
+    /**
+     * Submit an input task to create a new plan
+     * @param description Task description
+     * @returns Promise with the response containing session and plan IDs
+     */
+    static async submitInputTask(description: string): Promise<InputTaskResponse> {
+        const sessionId = this.generateSessionId();
+
+        const inputTask: InputTask = {
+            session_id: sessionId,
+            description: description
+        };
+
+        return await apiService.submitInputTask(inputTask);
+    }
 }
 
 export default TaskService;