Hr

src/app/main/components/Sidebar.tsx → src/app/_common/components/Sidebar.tsx

@@ -1,20 +1,20 @@
 'use client';
 import React, { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { RiChatSmileAiLine } from "react-icons/ri";
-import { FiClock, FiMessageCircle } from "react-icons/fi";
+import { useRouter, usePathname } from 'next/navigation';
 import { SidebarProps } from '@/app/main/components/types';
 import styles from '@/app/main/assets/MainPage.module.scss';
 
 const Sidebar: React.FC<SidebarProps> = ({
     items,
+    chatItems = [],
     activeItem,
     onItemClick,
     className = '',
     initialChatExpanded = false,
     initialSettingExpanded = false,
 }) => {
     const router = useRouter();
+    const pathname = usePathname();
     const [isSettingExpanded, setIsSettingExpanded] = useState(initialSettingExpanded);
     const [isChatExpanded, setIsChatExpanded] = useState(initialChatExpanded);
 
@@ -36,19 +36,13 @@ const Sidebar: React.FC<SidebarProps> = ({
         router.push('/');
     };
 
-    const handleNewChatClick = () => {
-        onItemClick('new-chat');
-        router.push('/chat');
-    };
-
-    const handleChatHistoryClick = () => {
-        onItemClick('chat-history');
-        router.push('/chat');
-    };
-
-    const handleCurrentChatClick = () => {
-        onItemClick('current-chat');
-        router.push('/chat');
+    const handleChatItemClick = (itemId: string) => {
+        onItemClick(itemId);
+        // /chat 페이지가 아닌 경우에만 localStorage에 저장하고 라우팅
+        if (pathname !== '/chat') {
+            localStorage.setItem('activeChatSection', itemId);
+            router.push('/chat');
+        }
     };
 
     return (
@@ -74,44 +68,21 @@ const Sidebar: React.FC<SidebarProps> = ({
 
             {isChatExpanded && (
                 <nav className={styles.sidebarNav}>
-                    <button
-                        onClick={handleNewChatClick}
-                        className={`${styles.navItem} ${activeItem === 'new-chat' ? styles.active : ''}`}
-                    >
-                        <RiChatSmileAiLine />
-                        <div className={styles.navText}>
-                            <div className={styles.navTitle}>새 채팅</div>
-                            <div className={styles.navDescription}>
-                                새로운 AI 채팅을 시작합니다
-                            </div>
-                        </div>
-                    </button>
-
-                    <button
-                        onClick={handleCurrentChatClick}
-                        className={`${styles.navItem} ${activeItem === 'current-chat' ? styles.active : ''}`}
-                    >
-                        <FiMessageCircle />
-                        <div className={styles.navText}>
-                            <div className={styles.navTitle}>현재 채팅</div>
-                            <div className={styles.navDescription}>
-                                진행 중인 대화를 계속합니다
-                            </div>
-                        </div>
-                    </button>
-
-                    <button
-                        onClick={handleChatHistoryClick}
-                        className={`${styles.navItem} ${activeItem === 'chat-history' ? styles.active : ''}`}
-                    >
-                        <FiClock />
-                        <div className={styles.navText}>
-                            <div className={styles.navTitle}>기존 채팅 불러오기</div>
-                            <div className={styles.navDescription}>
-                                이전 대화를 불러와서 계속합니다
+                    {chatItems.map((item) => (
+                        <button
+                            key={item.id}
+                            onClick={() => handleChatItemClick(item.id)}
+                            className={`${styles.navItem} ${activeItem === item.id ? styles.active : ''}`}
+                        >
+                            {item.icon}
+                            <div className={styles.navText}>
+                                <div className={styles.navTitle}>{item.title}</div>
+                                <div className={styles.navDescription}>
+                                    {item.description}
+                                </div>
                             </div>
-                        </div>
-                    </button>
+                        </button>
+                    ))}
                 </nav>
             )}
 

src/app/_common/components/sidebarConfig.ts

@@ -5,12 +5,35 @@ import {
     FiCpu,
     FiSettings,
     FiEye,
+    FiClock,
+    FiMessageCircle,
     FiFile,
 } from 'react-icons/fi';
+import { RiChatSmileAiLine } from "react-icons/ri";
 import { SidebarItem } from '@/app/main/components/types';
 
-// 워크플로우 관리 센터의 공통 사이드바 아이템들을 반환하는 함수
-export const getSidebarItems = (): SidebarItem[] => [
+export const getChatSidebarItems = (): SidebarItem[] => [
+    {
+        id: 'new-chat',
+        title: '새 채팅',
+        description: '새로운 AI 채팅을 시작합니다',
+        icon: React.createElement(RiChatSmileAiLine),
+    },
+    {
+        id: 'current-chat',
+        title: '현재 채팅',
+        description: '진행 중인 대화를 계속합니다',
+        icon: React.createElement(FiMessageCircle),
+    },
+    {
+        id: 'chat-history',
+        title: '기존 채팅 불러오기',
+        description: '이전 대화를 불러와서 계속합니다',
+        icon: React.createElement(FiClock),
+    },
+];
+
+export const getSettingSidebarItems = (): SidebarItem[] => [
     {
         id: 'canvas',
         title: '워크플로우 캔버스',
@@ -57,3 +80,12 @@ export const createItemClickHandler = (router: any) => {
         router.push('/main');
     };
 };
+
+// 채팅 아이템 클릭 핸들러 (localStorage 사용)
+export const createChatItemClickHandler = (router: any) => {
+    return (itemId: string) => {
+        // 클릭한 채팅 섹션을 localStorage에 저장하고 /chat으로 이동
+        localStorage.setItem('activeChatSection', itemId);
+        router.push('/chat');
+    };
+};

src/app/api/chatAPI.js

@@ -1,9 +1,142 @@
+// Configuration API 호출 함수들을 관리하는 파일
+import { devLog } from '@/app/utils/logger';
+import { API_BASE_URL } from '@/app/config.js';
+
 /**
- * Simulates sending a message to a chat API and receiving a response.
- * @param {string} message - The message to send.
- * @returns {Promise<{text: string}>} A promise that resolves with a response object.
+ * Creates a new chat session
+ * @param {Object} params - The chat creation parameters
+ * @param {string} params.interaction_id - Unique interaction identifier
+ * @param {string} [params.input_data] - Optional initial message
+ * @returns {Promise<Object>} A promise that resolves with the chat creation response
  */
-export const sendMessage = (message) => {
+export const createNewChat = async ({ interaction_id, input_data = null }) => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/api/chat/new`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                workflow_name: "default_mode",
+                workflow_id: "default_mode",
+                interaction_id,
+                input_data
+            }),
+        });
+
+        if (!response.ok) {
+            const errorData = await response.json();
+            throw new Error(`HTTP ${response.status}: ${errorData.detail || 'Unknown error'}`);
+        }
+
+        return await response.json();
+    } catch (error) {
+        console.error('Error creating new chat:', error);
+        throw error;
+    }
+};
+
+/**
+ * Continues an existing chat session
+ * @param {Object} params - The chat execution parameters
+ * @param {string} params.user_input - The user's message
+ * @param {string} params.interaction_id - The interaction identifier
+ * @param {string} [params.workflow_id] - Optional workflow ID (defaults to "default_mode")
+ * @param {string} [params.workflow_name] - Optional workflow name (defaults to "default_mode")
+ * @returns {Promise<Object>} A promise that resolves with the chat response
+ */
+export const executeChatMessage = async ({ 
+    user_input, 
+    interaction_id, 
+    workflow_id = "default_mode", 
+    workflow_name = "default_mode" 
+}) => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/api/chat/execution`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                user_input,
+                interaction_id,
+                workflow_id,
+                workflow_name
+            }),
+        });
+
+        if (!response.ok) {
+            const errorData = await response.json();
+            throw new Error(`HTTP ${response.status}: ${errorData.detail || 'Unknown error'}`);
+        }
+
+        return await response.json();
+    } catch (error) {
+        console.error('Error executing chat message:', error);
+        throw error;
+    }
+};
+
+/**
+ * High-level function to handle a complete chat flow
+ * @param {Object} params - The chat parameters
+ * @param {string} params.message - The user's message
+ * @param {string} [params.interaction_id] - Existing interaction ID or will generate new one
+ * @param {boolean} [params.isNewChat] - Whether this is a new chat session
+ * @returns {Promise<Object>} A promise that resolves with the chat response
+ */
+export const sendMessage = async ({ 
+    message, 
+    interaction_id = null, 
+    isNewChat = false 
+}) => {
+    try {
+        // Generate interaction ID if not provided
+        const chatInteractionId = interaction_id || `chat_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+
+        if (isNewChat) {
+            // Create new chat session with initial message
+            const result = await createNewChat({
+                interaction_id: chatInteractionId,
+                input_data: message
+            });
+
+            return {
+                text: result.chat_response || 'Chat session created successfully',
+                interaction_id: result.interaction_id,
+                session_info: result.execution_meta,
+                timestamp: result.timestamp,
+                status: result.status
+            };
+        } else {
+            // Continue existing chat session
+            const result = await executeChatMessage({
+                user_input: message,
+                interaction_id: chatInteractionId
+            });
+
+            return {
+                text: result.ai_response,
+                interaction_id: result.interaction_id,
+                session_id: result.session_id,
+                session_info: result.execution_meta,
+                timestamp: result.timestamp,
+                status: result.status
+            };
+        }
+    } catch (error) {
+        console.error('Error in sendMessage:', error);
+        throw error;
+    }
+};
+
+/**
+ * Legacy function for backward compatibility - simulates sending a message
+ * @deprecated Use sendMessage with proper parameters instead
+ * @param {string} message - The message to send
+ * @returns {Promise<{text: string}>} A promise that resolves with a response object
+ */
+export const sendMessageLegacy = (message) => {
     return new Promise((resolve) => {
         setTimeout(() => {
             resolve({

src/app/api/interactionAPI.js

@@ -21,7 +21,7 @@ export const listInteractions = async (filters = {}) => {
         params.append('limit', limit.toString());
 
         const response = await fetch(
-            `${API_BASE_URL}/interaction/list?${params}`,
+            `${API_BASE_URL}/api/interaction/list?${params}`,
             {
                 method: 'GET',
                 headers: {
@@ -74,7 +74,7 @@ export const executeWorkflowNew = async (requestData) => {
 
         devLog.log('Executing new workflow with data:', requestBody);
 
-        const response = await fetch(`${API_BASE_URL}/interaction/new`, {
+        const response = await fetch(`${API_BASE_URL}/api/interaction/new`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',

src/app/api/nodeAPI.js

@@ -7,7 +7,7 @@ import { API_BASE_URL } from '@/app/config.js';
  */
 export const getNodes = async () => {
     try {
-        const response = await fetch(`${API_BASE_URL}/node/get`);
+        const response = await fetch(`${API_BASE_URL}/api/node/get`);
 
         if (!response.ok) {
             const errorData = await response.json();
@@ -30,7 +30,7 @@ export const getNodes = async () => {
  */
 export const exportNodes = async () => {
     try {
-        const response = await fetch(`${API_BASE_URL}/node/export`);
+        const response = await fetch(`${API_BASE_URL}/api/node/export`);
 
         if (!response.ok) {
             const errorData = await response.json();