From 04f3bfafa17b4d94314fddb512a84122633ffaa6 Mon Sep 17 00:00:00 2001
From: AjithGlady <ajith.glady@expressbase.com>
Date: Wed, 17 Sep 2025 18:11:04 +0530
Subject: [PATCH] OpenAI Object Creator initial commit

---
 Controllers/OpenAIController.cs    | 319 ++++++++++++
 Views/OpenAI/Index.cshtml          | 122 +++++
 Views/OpenAI/TableConfig.cshtml    |  47 ++
 wwwroot/css/OpenAI/TableConfig.css | 308 +++++++++++
 wwwroot/css/OpenAI/style.css       | 793 +++++++++++++++++++++++++++++
 wwwroot/js/OpenAI/TableConfig.js   | 213 ++++++++
 wwwroot/js/OpenAI/script.js        | 708 +++++++++++++++++++++++++
 7 files changed, 2510 insertions(+)
 create mode 100644 Controllers/OpenAIController.cs
 create mode 100644 Views/OpenAI/Index.cshtml
 create mode 100644 Views/OpenAI/TableConfig.cshtml
 create mode 100644 wwwroot/css/OpenAI/TableConfig.css
 create mode 100644 wwwroot/css/OpenAI/style.css
 create mode 100644 wwwroot/js/OpenAI/TableConfig.js
 create mode 100644 wwwroot/js/OpenAI/script.js

diff --git a/Controllers/OpenAIController.cs b/Controllers/OpenAIController.cs
new file mode 100644
index 000000000..327262ef9
--- /dev/null
+++ b/Controllers/OpenAIController.cs
@@ -0,0 +1,319 @@
+
+
+
+using ExpressBase.Web.BaseControllers;
+using Microsoft.AspNetCore.Mvc;
+using ServiceStack.Redis;
+using ServiceStack;
+using System;
+using System.Net.Http;
+using System.Threading.Tasks;
+using Newtonsoft.Json;
+using Newtonsoft.Json.Linq;
+using Microsoft.AspNetCore.Http;
+using System.Text;
+using System.Collections.Generic;
+using ExpressBase.Objects.ServiceStack_Artifacts;
+using System.Linq;
+
+namespace ExpressBase.Web.Controllers
+{
+    public class OpenAIController : EbBaseIntCommonController
+    {
+        private string JsonString = @"
+        {
+          ""tenant_id"": ""expressbase"",
+          ""session_id"": """",
+          ""db_schema"": {
+            ""tables"": [
+              {
+                ""name"": ""sales"",
+                ""columns"": {
+                  ""sale_id"": ""int"",
+                  ""customer_id"": ""int"",
+                  ""product_id"": ""int"",
+                  ""amount"": ""decimal"",
+                  ""sale_date"": ""date""
+                },
+                ""primary_key"": [ ""sale_id"" ],
+                ""foreign_keys"": [
+                  {
+                    ""column"": ""customer_id"",
+                    ""references"": ""customers.customer_id""
+                  }
+                ]
+              }
+            ]
+          },
+         ""user_input"" : """"
+        }";
+
+        private string TableConfigData = @"
+        {
+            ""users"":"""" ,
+            ""products"": ""Product catalog and inventory details"",
+            ""orders"": """",
+            ""categories"": ""Product categorization system"",
+            ""inventory"": ""Stock levels and warehouse management"",
+            ""customers"":"""" ,
+            ""suppliers"": ""Vendor and supplier contact information"",
+            ""transactions"": ""Financial transaction records"",
+            ""reviews"": ""Customer feedback and ratings"",
+            ""shipping_addresses"":"""" 
+        }";
+        //private string SessionID = "";
+
+        //private string solutionId;
+
+        //private bool isFirstChat = true;
+
+        public OpenAIController(IServiceClient _client, IRedisClient _redis) : base(_client, _redis) { }
+
+        private readonly HttpClient _httpClient = new HttpClient();
+
+        CookieOptions options = new CookieOptions
+        {
+            Expires = DateTimeOffset.Now.AddDays(7),
+            HttpOnly = true,
+            Secure = true,
+            Path = "/openai",
+            SameSite = SameSiteMode.Strict
+        };
+
+        [Microsoft.AspNetCore.Mvc.Route("/openai")]
+        public async Task<IActionResult> Index()
+        {
+            try
+            {
+
+                string url = $"http://127.0.0.1:8000/sql/generation";
+
+                var content = new StringContent(JsonString, Encoding.UTF8, "application/json");
+                var response = await _httpClient.PostAsync(url, content);
+                string result = await response.Content.ReadAsStringAsync();
+
+                //Console.WriteLine(result);
+
+                JObject jsonObject = JObject.Parse(result);
+                string sessionId = jsonObject["session_id"]?.ToString();
+
+                //OpenAIQueryResponse ress = new OpenAIQueryResponse();
+                //ress = InsertQuery(sessionId);
+
+
+                Response.Cookies.Append("Session_id", sessionId, options);
+            }
+            catch (Exception e)
+            {
+                Console.WriteLine(e.Message + e.StackTrace);
+            }
+
+            return View();
+        }
+
+        [HttpGet]
+        public async Task<string> NewChat()
+        {
+            try
+            {
+                string url = $"http://127.0.0.1:8000/sql/generation";
+
+                var content = new StringContent(JsonString, Encoding.UTF8, "application/json");
+                var response = await _httpClient.PostAsync(url, content);
+                string result = await response.Content.ReadAsStringAsync();
+
+                //Console.WriteLine(result);
+
+                JObject jsonObject = JObject.Parse(result);
+                string sessionId = jsonObject["session_id"]?.ToString();
+
+                //OpenAIQueryResponse ress = new OpenAIQueryResponse();
+                //ress = InsertQuery(sessionId);
+
+                Response.Cookies.Append("Session_id", sessionId, options);
+                //isFirstChat = true;
+                return "success";
+            }
+            catch(Exception e)
+            {
+                Console.WriteLine(e);
+                return "error";
+            }
+        }
+
+        [HttpGet]
+        public async Task<string> TEST(string msg)
+        {
+            try
+            {
+                string url = $"http://127.0.0.1:8000/session{msg}/history";
+
+                HttpResponseMessage response = await _httpClient.GetAsync(url);
+                response.EnsureSuccessStatusCode();
+
+                string apiResponse = await response.Content.ReadAsStringAsync();
+
+                Console.WriteLine(apiResponse);
+
+                return apiResponse;
+            }
+            catch (Exception e)
+            {
+                Console.WriteLine(e.Message + e.StackTrace);
+                return "error occured";
+            }
+
+            //return "Hai " + msg;
+        }
+
+        [HttpPost]
+        public async Task<List<string>> PostRequest(string requestBody, bool isFirstChat)
+        {
+            try
+            {
+                string json = @"
+                {
+                    ""tenant_id"": ""expressbase"",
+                    ""session_id"": """",
+                    ""user_input"" : """"
+                }";
+
+                string url = $"http://127.0.0.1:8000/sql/generation";
+
+                JObject jsonObject = JObject.Parse(json);
+
+                if (Request.Cookies.TryGetValue("Session_id", out string sessionIdFromCookie))
+                {   
+                    jsonObject["session_id"] = sessionIdFromCookie;
+                }
+
+                jsonObject["user_input"] = requestBody;
+
+                if (isFirstChat)
+                {
+                    OpenAISessionStoreResponse ress = new OpenAISessionStoreResponse();
+                    ress = this.ServiceClient.Post<OpenAISessionStoreResponse>(new OpenAISessionStoreRequest { SessionId = sessionIdFromCookie, ChatHeading = requestBody});
+                    isFirstChat = false;
+                }
+
+                var content = new StringContent(jsonObject.ToString(), Encoding.UTF8, "application/json");
+                var response = await _httpClient.PostAsync(url, content);
+                string result = await response.Content.ReadAsStringAsync();
+
+                JObject jsonObj = JObject.Parse(result);
+
+                string resultString = "";
+                List<string> resultList = new List<string>();
+
+                string responseType = jsonObj["type"]?.ToString();
+                if(responseType == "clarification")
+                {
+                    JArray contentArray = (JArray)jsonObj["content"]["clarifications"];
+                    resultList.Add(contentArray[0].ToString());
+                }
+                else if(responseType == "SQL")
+                {
+                    string query = jsonObj["content"]["query"].ToString();
+                    List<string> suggestions = jsonObj["content"]["suggestions"].ToObject<List<string>>();
+
+                    resultList.Add(query);
+                    resultList.AddRange(suggestions);
+                }
+                else
+                {
+                    resultList.Add("Error occured..!");
+                    resultList.Add("This may happen because you send messages like 'Hi' or 'Hello.' You can directly give instructions to create a SQL query.");
+                }
+
+                //Console.WriteLine(resultString);
+
+                return resultList;
+            }
+            catch (Exception e)
+            {
+                Console.WriteLine(e.Message + e.StackTrace);
+                return new List<string>();
+            }
+
+            //return "From post request" + requestBody;
+        }
+
+        [HttpGet]
+        public async Task<string> LoadChatHistory()
+        {
+            try
+            {
+                ChatHistoryResponse ress = new ChatHistoryResponse();
+                ress = this.ServiceClient.Get<ChatHistoryResponse>(new OpenAISessionStoreRequest { });
+                JObject jsonObj = JObject.FromObject(ress);
+
+                string resultList = string.Join(", ", jsonObj.Properties().Select(p => p.Value.ToString()));
+
+                return resultList;
+            }
+            catch (Exception e)
+            {
+                return "";
+            }
+            //return new List<string>();
+        }
+
+        [HttpPost]
+        public async Task<string> LoadSessionHistory(string session_id)
+        {
+            try
+            {
+                string url = $"http://127.0.0.1:8000/session{session_id}/history";
+
+                var response = await _httpClient.GetAsync(url);
+                string result = await response.Content.ReadAsStringAsync();
+
+                return result;
+            }
+            catch (Exception e)
+            {
+
+            }
+            return "";
+        }
+
+
+        [Microsoft.AspNetCore.Mvc.Route("/openai/TableConfig")]
+        public async Task<IActionResult> TableConfig()
+        {
+            try
+            {
+
+            }
+            catch (Exception e)
+            {
+                Console.WriteLine(e.Message + e.StackTrace);
+            }
+
+            return View();
+        }
+
+        [HttpGet]
+        public async Task<string> GetExistingData()
+        {
+            try
+            {
+                return TableConfigData;
+            }
+            catch(Exception e)
+            {
+                Console.WriteLine(e.Message + e.StackTrace);
+            }
+            return "";
+        }
+
+        //private OpenAIQueryResponse InsertQuery(string sessionId)
+        //{
+        //    OpenAIQueryResponse ress = new OpenAIQueryResponse();
+        //    ress = this.ServiceClient.Post<OpenAIQueryResponse>(new OpenAISessionStoreRequest { SessionId = sessionId, SolutionId = solutionId});
+        //    return ress;
+        //}
+
+
+    }
+}
diff --git a/Views/OpenAI/Index.cshtml b/Views/OpenAI/Index.cshtml
new file mode 100644
index 000000000..bdb7bf4dc
--- /dev/null
+++ b/Views/OpenAI/Index.cshtml
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Assistant</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    @* <link rel="stylesheet" href="styles.css"> *@
+
+    <link href="~/css/OpenAi/style.css" rel="stylesheet" type="text/css" />
+
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+</head>
+<body>
+    <!-- Header -->
+    <header class="header" id="header">
+        <div class="header-content">
+            <div class="header-left">
+                <button class="hamburger-btn" id="hamburgerBtn" aria-label="Toggle sidebar">
+                    <span class="hamburger-line"></span>
+                    <span class="hamburger-line"></span>
+                    <span class="hamburger-line"></span>
+                </button>
+                <div class="brand">
+                    <h1>AI Assistant</h1>
+                </div>
+            </div>
+            <div class="header-right">
+                <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
+                    <span class="theme-icon">🌙</span>
+                </button>
+            </div>
+        </div>
+    </header>
+
+    <!-- Sidebar -->
+    <aside class="sidebar" id="sidebar">
+        <nav class="sidebar-nav">
+            <div class="sidebar-section">
+                <button class="new-chat-btn" id="newChatBtn">
+                    <span class="btn-icon">+</span>
+                    New Chat
+                </button>
+            </div>
+
+            <div class="sidebar-section">
+                <h3 class="sidebar-title">Recent Chats</h3>
+                <ul class="chat-history" id="chatHistory">
+                    <!-- Chat history items will be populated here -->
+                </ul>
+            </div>
+
+            <div class="sidebar-section">
+                @* <button class="sidebar-btn" id="settingsBtn"> *@
+                @*     <span class="btn-icon">⚙️</span> *@
+                @*     Settings *@
+                @* </button> *@
+                @* <button class="sidebar-btn" id="helpBtn"> *@
+                @*     <span class="btn-icon">❓</span> *@
+                @*     Help *@
+                @* </button> *@
+            </div>
+        </nav>
+    </aside>
+
+    <!-- Sidebar Overlay -->
+    <div class="sidebar-overlay" id="sidebarOverlay"></div>
+
+    <!-- Main Content -->
+    <main class="main-content" id="mainContent">
+        <div class="chat-container">
+            <div class="messages-container" id="messagesContainer">
+                <div class="welcome-message" id="welcomeMessage">
+                    <div class="welcome-icon">🤖</div>
+                    <h2>Welcome to AI Assistant</h2>
+                    <p>How can I help you today?</p>
+                </div>
+            </div>
+
+            <!-- Input Area -->
+            <div class="input-container" id="inputContainer">
+                <div class="input-wrapper">
+                    <input type="hidden" id="isFirstChat" name="isFirstChat" value="true" />
+                    <textarea id="messageInput"
+                              class="message-input"
+                              placeholder="Type your message..."
+                              rows="1"
+                              aria-label="Message input"></textarea>
+                    <button class="send-btn" id="sendBtn" aria-label="Send message" disabled>
+                        <span class="send-icon">→</span>
+                    </button>
+                </div>
+                <div class="input-actions">
+                    <small class="input-help">Press Enter to send, Shift+Enter for new line</small>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- Error Toast -->
+    <div class="toast error-toast" id="errorToast">
+        <div class="toast-content">
+            <span class="toast-icon">⚠️</span>
+            <span class="toast-message">Connection error. Please try again.</span>
+        </div>
+        <button class="toast-close" aria-label="Close">×</button>
+    </div>
+
+    <!-- Loading Overlay -->
+    <div class="loading-overlay" id="loadingOverlay">
+        <div class="loading-dots">
+            <div class="dot"></div>
+            <div class="dot"></div>
+            <div class="dot"></div>
+        </div>
+    </div>
+
+    <script src="~/js/OpenAI/script.js" type="text/javascript"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Views/OpenAI/TableConfig.cshtml b/Views/OpenAI/TableConfig.cshtml
new file mode 100644
index 000000000..9e60539e4
--- /dev/null
+++ b/Views/OpenAI/TableConfig.cshtml
@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Data Table Manager</title>
+    <link href="~/css/OpenAi/TableConfig.css" rel="stylesheet" type="text/css" />
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+</head>
+<body>
+    <div id="app">
+        <div class="container">
+            <header class="header">
+                <h1>Data Table Manager</h1>
+                <p>Manage your table descriptions</p>
+            </header>
+
+            <div class="table-container">
+                <div class="table-wrapper">
+                    <table id="dataTable" class="data-table">
+                        <thead>
+                            <tr>
+                                <th>Table Name</th>
+                                <th>Description</th>
+                            </tr>
+                        </thead>
+                        <tbody id="tableBody">
+                            <!-- Dynamic content will be inserted here -->
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="actions">
+                    <button id="saveBtn" class="save-btn" type="button">
+                        <span class="btn-text">Save Changes</span>
+                        <span class="btn-loader" style="display: none;">Saving...</span>
+                    </button>
+                </div>
+            </div>
+
+            <div id="notification" class="notification" style="display: none;"></div>
+        </div>
+    </div>
+    @* <script type="module" src="/main.js"></script> *@
+    <script src="~/js/OpenAI/TableConfig.js" type="text/javascript"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/wwwroot/css/OpenAI/TableConfig.css b/wwwroot/css/OpenAI/TableConfig.css
new file mode 100644
index 000000000..101e063d0
--- /dev/null
+++ b/wwwroot/css/OpenAI/TableConfig.css
@@ -0,0 +1,308 @@
+:root {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    line-height: 1.6;
+    font-weight: 400;
+    --bg-primary: #1a1a1a;
+    --bg-secondary: #2d2d2d;
+    --bg-tertiary: #3a3a3a;
+    --text-primary: #ffffff;
+    --text-secondary: #b0b0b0;
+    --text-muted: #888888;
+    --accent-primary: #3b82f6;
+    --accent-hover: #2563eb;
+    --border-color: #404040;
+    --success-color: #10b981;
+    --error-color: #ef4444;
+    --warning-color: #f59e0b;
+    color-scheme: dark;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+    background: var(--bg-primary);
+}
+
+#app {
+    min-height: 100vh;
+    padding: 2rem 1rem;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.header {
+    text-align: center;
+    margin-bottom: 3rem;
+}
+
+    .header h1 {
+        font-size: 2.5rem;
+        font-weight: 700;
+        color: var(--text-primary);
+        margin-bottom: 0.5rem;
+    }
+
+    .header p {
+        font-size: 1.1rem;
+        color: var(--text-secondary);
+        font-weight: 300;
+    }
+
+.table-container {
+    background: var(--bg-secondary);
+    border-radius: 12px;
+    padding: 2rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--border-color);
+}
+
+.table-wrapper {
+    overflow-x: auto;
+    margin-bottom: 2rem;
+}
+
+.data-table {
+    width: 100%;
+    border-collapse: collapse;
+    background: var(--bg-tertiary);
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+    .data-table thead {
+        background: var(--accent-primary);
+    }
+
+    .data-table th {
+        padding: 1rem;
+        text-align: left;
+        font-weight: 600;
+        font-size: 0.95rem;
+        color: white;
+        border-bottom: 2px solid var(--accent-hover);
+    }
+
+        .data-table th:first-child {
+            width: 30%;
+        }
+
+        .data-table th:last-child {
+            width: 70%;
+        }
+
+    .data-table tbody tr {
+        border-bottom: 1px solid var(--border-color);
+        transition: background-color 0.2s ease;
+    }
+
+        .data-table tbody tr:hover {
+            background-color: rgba(59, 130, 246, 0.05);
+        }
+
+        .data-table tbody tr:last-child {
+            border-bottom: none;
+        }
+
+    .data-table td {
+        padding: 1rem;
+        vertical-align: top;
+    }
+
+.table-name {
+    font-weight: 500;
+    color: var(--text-primary);
+    font-size: 0.95rem;
+}
+
+.description-input {
+    width: 100%;
+    min-height: 80px;
+    padding: 0.75rem;
+    background: var(--bg-primary);
+    border: 2px solid var(--border-color);
+    border-radius: 6px;
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: 0.9rem;
+    line-height: 1.5;
+    resize: vertical;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+    .description-input:focus {
+        outline: none;
+        border-color: var(--accent-primary);
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+
+    .description-input::placeholder {
+        color: var(--text-muted);
+    }
+
+.actions {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+}
+
+.save-btn {
+    background: var(--accent-primary);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 0.875rem 2rem;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
+    min-width: 140px;
+}
+
+    .save-btn:hover {
+        background: var(--accent-hover);
+        transform: translateY(-1px);
+        box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
+    }
+
+    .save-btn:active {
+        transform: translateY(0);
+    }
+
+    .save-btn:disabled {
+        background: var(--text-muted);
+        cursor: not-allowed;
+        transform: none;
+        box-shadow: none;
+    }
+
+.notification {
+    position: fixed;
+    top: 2rem;
+    right: 2rem;
+    padding: 1rem 1.5rem;
+    border-radius: 8px;
+    color: white;
+    font-weight: 500;
+    z-index: 1000;
+    animation: slideIn 0.3s ease;
+    min-width: 200px;
+    text-align: center;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+}
+
+    .notification.success {
+        background: var(--success-color);
+    }
+
+    .notification.error {
+        background: var(--error-color);
+    }
+
+    .notification.warning {
+        background: var(--warning-color);
+    }
+
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideOut {
+    from {
+        transform: translateX(0);
+        opacity: 1;
+    }
+
+    to {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    #app {
+        padding: 1rem 0.5rem;
+    }
+
+    .header h1 {
+        font-size: 2rem;
+    }
+
+    .table-container {
+        padding: 1rem;
+    }
+
+    .data-table th,
+    .data-table td {
+        padding: 0.75rem 0.5rem;
+    }
+
+        .data-table th:first-child {
+            width: 35%;
+        }
+
+        .data-table th:last-child {
+            width: 65%;
+        }
+
+    .description-input {
+        min-height: 60px;
+        font-size: 0.85rem;
+    }
+
+    .save-btn {
+        padding: 0.75rem 1.5rem;
+        font-size: 0.9rem;
+    }
+
+    .notification {
+        right: 1rem;
+        left: 1rem;
+        right: 1rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .header h1 {
+        font-size: 1.75rem;
+    }
+
+    .data-table {
+        font-size: 0.85rem;
+    }
+
+        .data-table th,
+        .data-table td {
+            padding: 0.5rem;
+        }
+
+    .table-container {
+        padding: 0.75rem;
+        margin: 0 0.25rem;
+    }
+}
diff --git a/wwwroot/css/OpenAI/style.css b/wwwroot/css/OpenAI/style.css
new file mode 100644
index 000000000..fa255e584
--- /dev/null
+++ b/wwwroot/css/OpenAI/style.css
@@ -0,0 +1,793 @@
+/* CSS Variables for theming */
+:root {
+    /* Light theme */
+    --bg-primary: #ffffff;
+    --bg-secondary: #f8f9fa;
+    --bg-tertiary: #f1f3f4;
+    --text-primary: #1a1a1a;
+    --text-secondary: #6b7280;
+    --text-muted: #9ca3af;
+    --border-color: #e5e7eb;
+    --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
+    --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1);
+    --shadow-large: 0 10px 15px rgba(0, 0, 0, 0.1);
+    /* Accent colors */
+    --accent-primary: #2563eb;
+    --accent-secondary: #10b981;
+    --accent-hover: #1d4ed8;
+    --accent-light: #dbeafe;
+    /* Message bubbles */
+    --user-bg: var(--accent-primary);
+    --user-text: #ffffff;
+    --assistant-bg: var(--bg-tertiary);
+    --assistant-text: var(--text-primary);
+    /* Sidebar */
+    --sidebar-bg: var(--bg-secondary);
+    --sidebar-width: 280px;
+    /* Input */
+    --input-bg: var(--bg-primary);
+    --input-border: var(--border-color);
+    /* Transitions */
+    --transition-fast: 0.15s ease;
+    --transition-smooth: 0.3s ease;
+    --transition-slow: 0.5s ease;
+}
+
+[data-theme="dark"] {
+    /* Dark theme */
+    --bg-primary: #1a1a1a;
+    --bg-secondary: #262626;
+    --bg-tertiary: #333333;
+    --text-primary: #ffffff;
+    --text-secondary: #d1d5db;
+    --text-muted: #9ca3af;
+    --border-color: #404040;
+    /* Accent colors - slightly adjusted for dark mode */
+    --accent-primary: #3b82f6;
+    --accent-secondary: #10b981;
+    --accent-hover: #2563eb;
+    --accent-light: #1e3a8a;
+    /* Message bubbles */
+    --user-bg: var(--accent-primary);
+    --user-text: #ffffff;
+    --assistant-bg: var(--bg-tertiary);
+    --assistant-text: var(--text-primary);
+    /* Sidebar */
+    --sidebar-bg: var(--bg-secondary);
+    /* Input */
+    --input-bg: var(--bg-secondary);
+    --input-border: var(--border-color);
+}
+
+/* Reset and base styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    line-height: 1.5;
+    transition: background-color var(--transition-smooth), color var(--transition-smooth);
+    overflow-x: hidden;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 600;
+    line-height: 1.2;
+    margin-bottom: 0.5rem;
+}
+
+h1 {
+    font-size: 1.5rem;
+}
+
+h2 {
+    font-size: 1.25rem;
+}
+
+h3 {
+    font-size: 1.125rem;
+}
+
+p {
+    margin-bottom: 1rem;
+    line-height: 1.6;
+}
+
+/* Buttons */
+button {
+    border: none;
+    background: none;
+    cursor: pointer;
+    font-family: inherit;
+    transition: all var(--transition-fast);
+    border-radius: 8px;
+}
+
+    button:focus {
+        outline: 2px solid var(--accent-primary);
+        outline-offset: 2px;
+    }
+
+    button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+/* Header */
+.header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 60px;
+    background-color: var(--bg-primary);
+    border-bottom: 1px solid var(--border-color);
+    z-index: 1000;
+    transition: all var(--transition-smooth);
+}
+
+.header-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+    padding: 0 1rem;
+    max-width: 100%;
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.hamburger-btn {
+    display: none;
+    flex-direction: column;
+    gap: 3px;
+    padding: 8px;
+    border-radius: 6px;
+}
+
+    .hamburger-btn:hover {
+        background-color: var(--bg-tertiary);
+    }
+
+.hamburger-line {
+    width: 20px;
+    height: 2px;
+    background-color: var(--text-primary);
+    transition: all var(--transition-fast);
+}
+
+.brand h1 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 0;
+}
+
+.theme-toggle {
+    padding: 8px 12px;
+    border-radius: 20px;
+    background-color: var(--bg-tertiary);
+    color: var(--text-primary);
+    font-size: 1rem;
+}
+
+    .theme-toggle:hover {
+        background-color: var(--accent-light);
+        transform: scale(1.05);
+    }
+
+/* Sidebar */
+.sidebar {
+    position: fixed;
+    top: 60px;
+    left: 0;
+    width: var(--sidebar-width);
+    height: calc(100vh - 60px);
+    background-color: var(--sidebar-bg);
+    border-right: 1px solid var(--border-color);
+    overflow-y: auto;
+    transition: transform var(--transition-smooth);
+    z-index: 900;
+}
+
+.sidebar-nav {
+    padding: 1.5rem 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.sidebar-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.sidebar-title {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.new-chat-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 12px 16px;
+    background-color: var(--accent-primary);
+    color: white;
+    border-radius: 8px;
+    font-weight: 500;
+    transition: all var(--transition-fast);
+}
+
+    .new-chat-btn:hover {
+        background-color: var(--accent-hover);
+        transform: translateY(-1px);
+        box-shadow: var(--shadow-medium);
+    }
+
+.sidebar-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 10px 16px;
+    text-align: left;
+    color: var(--text-secondary);
+    border-radius: 6px;
+    transition: all var(--transition-fast);
+}
+
+    .sidebar-btn:hover {
+        background-color: var(--bg-tertiary);
+        color: var(--text-primary);
+    }
+
+.btn-icon {
+    font-size: 1rem;
+    width: 20px;
+    text-align: center;
+}
+
+.chat-history {
+    list-style: none;
+}
+
+.chat-history-item {
+    padding: 8px 16px;
+    margin-bottom: 2px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+    .chat-history-item:hover {
+        background-color: var(--bg-tertiary);
+        color: var(--text-primary);
+    }
+
+    .chat-history-item.active {
+        background-color: var(--accent-light);
+        color: var(--accent-primary);
+    }
+
+/* Sidebar overlay for mobile */
+.sidebar-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 850;
+    opacity: 0;
+    transition: opacity var(--transition-smooth);
+}
+
+    .sidebar-overlay.active {
+        opacity: 1;
+    }
+
+/* Main content */
+.main-content {
+    margin-left: var(--sidebar-width);
+    margin-top: 60px;
+    height: calc(100vh - 60px);
+    transition: margin-left var(--transition-smooth);
+}
+
+.chat-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    position: relative;
+}
+
+.messages-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 2rem 1rem 1rem;
+    scroll-behavior: smooth;
+}
+
+/* Welcome message */
+.welcome-message {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 4rem 2rem;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.welcome-icon {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+}
+
+.welcome-message h2 {
+    color: var(--text-primary);
+    margin-bottom: 0.5rem;
+}
+
+.welcome-message p {
+    color: var(--text-secondary);
+    margin: 0;
+}
+
+/* Message styles */
+.message {
+    display: flex;
+    margin-bottom: 1.5rem;
+    max-width: 100%;
+    animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.message.user {
+    justify-content: flex-end;
+}
+
+.message.assistant {
+    justify-content: flex-start;
+}
+
+.message-bubble {
+    max-width: 70%;
+    padding: 12px 16px;
+    border-radius: 18px;
+    word-wrap: break-word;
+    box-shadow: var(--shadow-light);
+    position: relative;
+}
+
+.message.user .message-bubble {
+    background-color: var(--user-bg);
+    color: var(--user-text);
+    border-bottom-right-radius: 6px;
+}
+
+.message.assistant .message-bubble {
+    background-color: var(--assistant-bg);
+    color: var(--assistant-text);
+    border-bottom-left-radius: 6px;
+}
+
+.message-content {
+    font-size: 0.95rem;
+    line-height: 1.5;
+}
+
+.message-time {
+    font-size: 0.75rem;
+    opacity: 0.7;
+    margin-top: 4px;
+}
+
+.message.error .message-bubble {
+    background-color: #fee2e2;
+    color: #dc2626;
+    border: 1px solid #fecaca;
+}
+
+.retry-btn {
+    margin-top: 8px;
+    padding: 4px 12px;
+    background-color: #dc2626;
+    color: white;
+    border-radius: 4px;
+    font-size: 0.875rem;
+}
+
+    .retry-btn:hover {
+        background-color: #b91c1c;
+    }
+
+/* Typing indicator */
+.typing-indicator {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    background-color: var(--assistant-bg);
+    border-radius: 18px;
+    border-bottom-left-radius: 6px;
+    max-width: 80px;
+    margin-bottom: 1.5rem;
+}
+
+.typing-dots {
+    display: flex;
+    gap: 4px;
+}
+
+.typing-dot {
+    width: 6px;
+    height: 6px;
+    background-color: var(--text-secondary);
+    border-radius: 50%;
+    animation: typingDot 1.4s infinite;
+}
+
+    .typing-dot:nth-child(2) {
+        animation-delay: 0.2s;
+    }
+
+    .typing-dot:nth-child(3) {
+        animation-delay: 0.4s;
+    }
+
+@keyframes typingDot {
+    0%, 60%, 100% {
+        opacity: 0.3;
+        transform: scale(1);
+    }
+
+    30% {
+        opacity: 1;
+        transform: scale(1.2);
+    }
+}
+
+/* Input container */
+.input-container {
+    padding: 1rem;
+    background-color: var(--bg-primary);
+    border-top: 1px solid var(--border-color);
+    position: relative;
+    z-index: 1001;
+}
+
+.input-wrapper {
+    display: flex;
+    gap: 0.75rem;
+    align-items: flex-end;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.message-input {
+    flex: 1;
+    min-height: 44px;
+    max-height: 200px;
+    padding: 12px 16px;
+    border: 1px solid var(--input-border);
+    border-radius: 22px;
+    background-color: var(--input-bg);
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: 0.95rem;
+    line-height: 1.5;
+    resize: none;
+    outline: none;
+    transition: all var(--transition-fast);
+    z-index: 1002;
+    position: relative;
+    pointer-events: auto;
+}
+
+    .message-input:focus {
+        border-color: var(--accent-primary);
+        box-shadow: 0 0 0 3px var(--accent-light);
+    }
+
+    .message-input::placeholder {
+        color: var(--text-muted);
+    }
+
+.send-btn {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background-color: var(--accent-primary);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    transition: all var(--transition-fast);
+    flex-shrink: 0;
+    z-index: 1002;
+    position: relative;
+    pointer-events: auto;
+}
+
+    .send-btn:hover:not(:disabled) {
+        background-color: var(--accent-hover);
+        transform: scale(1.05);
+    }
+
+    .send-btn:disabled {
+        background-color: var(--text-muted);
+    }
+
+.input-actions {
+    display: flex;
+    justify-content: center;
+    margin-top: 0.5rem;
+}
+
+.input-help {
+    color: var(--text-muted);
+    font-size: 0.75rem;
+}
+
+/* Toast notifications */
+.toast {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    background-color: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 1rem;
+    box-shadow: var(--shadow-large);
+    z-index: 1100;
+    transform: translateY(100px);
+    opacity: 0;
+    transition: all var(--transition-smooth);
+    max-width: 400px;
+}
+
+    .toast.show {
+        transform: translateY(0);
+        opacity: 1;
+    }
+
+    .toast.error-toast {
+        border-color: #fecaca;
+        background-color: #fef2f2;
+        color: #dc2626;
+    }
+
+.toast-content {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.toast-close {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    color: inherit;
+}
+
+    .toast-close:hover {
+        background-color: rgba(0, 0, 0, 0.1);
+    }
+
+/* Loading overlay */
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1200;
+    opacity: 0;
+    visibility: hidden;
+    transition: all var(--transition-smooth);
+}
+
+    .loading-overlay.show {
+        opacity: 1;
+        visibility: visible;
+    }
+
+.loading-dots {
+    display: flex;
+    gap: 8px;
+}
+
+    .loading-dots .dot {
+        width: 12px;
+        height: 12px;
+        background-color: var(--accent-primary);
+        border-radius: 50%;
+        animation: loadingDot 1.4s infinite;
+    }
+
+        .loading-dots .dot:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+
+        .loading-dots .dot:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+
+@keyframes loadingDot {
+    0%, 60%, 100% {
+        transform: scale(1);
+        opacity: 0.5;
+    }
+
+    30% {
+        transform: scale(1.3);
+        opacity: 1;
+    }
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .hamburger-btn {
+        display: flex;
+    }
+
+    .sidebar {
+        transform: translateX(-100%);
+    }
+
+        .sidebar.open {
+            transform: translateX(0);
+        }
+
+    .sidebar-overlay {
+        display: block;
+    }
+
+    .main-content {
+        margin-left: 0;
+    }
+
+    .message-bubble {
+        max-width: 85%;
+    }
+
+    .input-container {
+        padding: 0.75rem;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 1001;
+        pointer-events: auto;
+        touch-action: manipulation;
+    }
+
+    .messages-container {
+        padding: 1rem 0.75rem;
+        padding-bottom: 120px;
+    }
+
+    .welcome-message {
+        padding: 2rem 1rem;
+    }
+
+    .toast {
+        bottom: 1rem;
+        right: 1rem;
+        left: 1rem;
+        max-width: none;
+    }
+}
+
+@media (max-width: 480px) {
+    .header-content {
+        padding: 0 0.75rem;
+    }
+
+    .brand h1 {
+        font-size: 1.125rem;
+    }
+
+    .message-bubble {
+        max-width: 90%;
+        padding: 10px 14px;
+    }
+
+    .input-wrapper {
+        gap: 0.5rem;
+    }
+
+    .message-input {
+        border-radius: 18px;
+        padding: 10px 14px;
+        -webkit-appearance: none;
+        -webkit-tap-highlight-color: transparent;
+        pointer-events: auto;
+        touch-action: manipulation;
+        -webkit-user-select: text;
+        user-select: text;
+    }
+
+    .send-btn {
+        width: 40px;
+        height: 40px;
+    }
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+
+    .message {
+        animation: none;
+    }
+}
+
+/* Focus styles for better accessibility */
+.message-input:focus,
+.sidebar-btn:focus,
+.new-chat-btn:focus,
+.send-btn:focus,
+.theme-toggle:focus,
+.hamburger-btn:focus {
+    outline: 2px solid var(--accent-primary);
+    outline-offset: 2px;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+    :root {
+        --border-color: #000000;
+        --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.3);
+        --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.3);
+    }
+}
diff --git a/wwwroot/js/OpenAI/TableConfig.js b/wwwroot/js/OpenAI/TableConfig.js
new file mode 100644
index 000000000..fc8f0a255
--- /dev/null
+++ b/wwwroot/js/OpenAI/TableConfig.js
@@ -0,0 +1,213 @@
+// Mock backend data - In real application, this would come from your backend API
+//const mockBackendData = {
+//    'users': '',
+//    'products': 'Product catalog and inventory details',
+//    'orders': '',
+//    'categories': 'Product categorization system',
+//    'inventory': 'Stock levels and warehouse management',
+//    'customers': '',
+//    'suppliers': 'Vendor and supplier contact information',
+//    'transactions': 'Financial transaction records',
+//    'reviews': 'Customer feedback and ratings',
+//    'shipping_addresses': ''
+//};
+
+// Application state
+let tableData = [];
+
+// Initialize the application
+$(document).ready(function () {
+    console.log('Data Table Manager initialized');
+    loadTableData();
+    setupEventHandlers();
+});
+
+// Simulate loading data from backend
+function loadTableData() {
+    // Simulate API call delay
+    $.ajax({
+        url: `/openai/GetExistingData`,
+        method: 'GET',
+        success: function (response) {
+            const parsed = JSON.parse(response);
+            tableData = Object.keys(parsed).map(tableName => ({
+                tableName: tableName,
+                description: parsed[tableName] || ''
+            }));
+            renderTable(); 
+        },
+        error: function () {
+            showToast('Error for creating new conversation', 'error');
+        }
+    });
+    
+}
+
+// Render the table with data
+function renderTable() {
+    const tableBody = $('#tableBody');
+    tableBody.empty();
+
+    if (tableData.length === 0) {
+        tableBody.append(`
+            <tr>
+                <td colspan="2" style="text-align: center; padding: 2rem; color: var(--text-muted);">
+                    No tables found. Loading...
+                </td>
+            </tr>
+        `);
+        return;
+    }
+
+    tableData.forEach((item, index) => {
+        const row = `
+            <tr>
+                <td>
+                    <div class="table-name">${escapeHtml(item.tableName)}</div>
+                </td>
+                <td>
+                    <textarea 
+                        class="description-input" 
+                        data-index="${index}"
+                        placeholder="Enter description for ${escapeHtml(item.tableName)} table..."
+                        rows="3"
+                    >${escapeHtml(item.description)}</textarea>
+                </td>
+            </tr>
+        `;
+        tableBody.append(row);
+    });
+
+    // Update event handlers for new elements
+    setupDescriptionHandlers();
+}
+
+// Setup event handlers
+function setupEventHandlers() {
+    // Save button click handler
+    $('#saveBtn').on('click', function () {
+        saveChanges();
+    });
+
+    // Keyboard shortcuts
+    $(document).on('keydown', function (e) {
+        // Ctrl/Cmd + S to save
+        if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+            e.preventDefault();
+            saveChanges();
+        }
+    });
+}
+
+// Setup description input handlers
+function setupDescriptionHandlers() {
+    $('.description-input').on('input', function () {
+        const index = parseInt($(this).data('index'));
+        const value = $(this).val();
+
+        if (tableData[index]) {
+            tableData[index].description = value;
+        }
+    });
+
+    // Auto-resize textareas
+    $('.description-input').on('input', function () {
+        autoResizeTextarea(this);
+    });
+
+    // Initial resize
+    $('.description-input').each(function () {
+        autoResizeTextarea(this);
+    });
+}
+
+// Auto-resize textarea based on content
+function autoResizeTextarea(textarea) {
+    textarea.style.height = 'auto';
+    textarea.style.height = Math.max(80, textarea.scrollHeight) + 'px';
+}
+
+// Save changes function
+function saveChanges() {
+    const saveBtn = $('#saveBtn');
+    const btnText = saveBtn.find('.btn-text');
+    const btnLoader = saveBtn.find('.btn-loader');
+
+    // Show loading state
+    saveBtn.prop('disabled', true);
+    btnText.hide();
+    btnLoader.show();
+
+    // Prepare data for API call - table name as key, description as value
+    const apiData = {};
+    tableData.forEach(item => {
+        apiData[item.tableName] = item.description.trim();
+    });
+
+    // Simulate API call to save data
+    setTimeout(() => {
+        try {
+            // Here you would make your actual API call
+            // Example: 
+            // $.ajax({
+            //     url: '/api/table-descriptions',
+            //     method: 'POST',
+            //     data: JSON.stringify(apiData),
+            //     contentType: 'application/json',
+            //     success: function(response) {
+            //         showNotification('Changes saved successfully!', 'success');
+            //     },
+            //     error: function(xhr, status, error) {
+            //         showNotification('Failed to save changes. Please try again.', 'error');
+            //     }
+            // });
+
+            // For demo purposes, we'll just log the data and show success
+            console.log('Saving table data as JSON:', apiData);
+            console.log('JSON string to send to API:', JSON.stringify(apiData));
+            showNotification('Changes saved successfully!', 'success');
+
+        } catch (error) {
+            console.error('Save error:', error);
+            showNotification('Failed to save changes. Please try again.', 'error');
+        } finally {
+            // Reset button state
+            saveBtn.prop('disabled', false);
+            btnText.show();
+            btnLoader.hide();
+        }
+    }, 1500);
+}
+
+// Show notification
+function showNotification(message, type = 'success') {
+    const notification = $('#notification');
+
+    notification
+        .removeClass('success error warning')
+        .addClass(type)
+        .text(message)
+        .show();
+
+    // Auto-hide after 4 seconds
+    setTimeout(() => {
+        notification.css('animation', 'slideOut 0.3s ease');
+        setTimeout(() => {
+            notification.hide().css('animation', '');
+        }, 300);
+    }, 300);
+}
+
+// Utility function to escape HTML
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+// Export functions for potential external use
+window.tableManager = {
+    loadTableData,
+    saveChanges,
+    showNotification
+};
diff --git a/wwwroot/js/OpenAI/script.js b/wwwroot/js/OpenAI/script.js
new file mode 100644
index 000000000..0c3f54996
--- /dev/null
+++ b/wwwroot/js/OpenAI/script.js
@@ -0,0 +1,708 @@
+$(document).ready(function () {
+    // State management
+    let currentSessionId = null;
+    let isTyping = false;
+    let chatHistory = [];
+
+    // DOM elements
+    const $hamburgerBtn = $('#hamburgerBtn');
+    const $sidebar = $('#sidebar');
+    const $sidebarOverlay = $('#sidebarOverlay');
+    const $mainContent = $('#mainContent');
+    const $themeToggle = $('#themeToggle');
+    const $messageInput = $('#messageInput');
+    const $sendBtn = $('#sendBtn');
+    const $messagesContainer = $('#messagesContainer');
+    const $welcomeMessage = $('#welcomeMessage');
+    const $newChatBtn = $('#newChatBtn');
+    const $chatHistory = $('#chatHistory');
+    const $errorToast = $('#errorToast');
+    const $loadingOverlay = $('#loadingOverlay');
+
+    // Initialize app
+    init();
+
+    function init() {
+        setupEventListeners();
+        loadTheme();
+        //generateSessionId();
+        loadChatHistory();
+        adjustTextareaHeight();
+    }
+
+    function setupEventListeners() {
+        // Sidebar toggle
+        $hamburgerBtn.on('click', toggleSidebar);
+        $sidebarOverlay.on('click', closeSidebar);
+
+        // Theme toggle
+        $themeToggle.on('click', toggleTheme);
+
+        // Message input
+        $messageInput.on('input', handleInputChange);
+        $messageInput.on('keydown', handleKeyDown);
+
+        // Send button
+        $sendBtn.on('click', sendMessage);
+
+        // New chat button
+        $newChatBtn.on('click', startNewChat);
+
+        // Toast close
+        $('.toast-close').on('click', hideToast);
+
+        // Settings and help buttons
+        //$('#settingsBtn').on('click', () => showToast('Settings feature coming soon!', 'info'));
+        //$('#helpBtn').on('click', () => showToast('Help feature coming soon!', 'info'));
+
+        // Window resize
+        $(window).on('resize', handleResize);
+
+        // Escape key to close sidebar
+        $(document).on('keydown', function (e) {
+            if (e.key === 'Escape') {
+                closeSidebar();
+                hideToast();
+            }
+        });
+    }
+
+    // Sidebar management
+    function toggleSidebar() {
+        const isOpen = $sidebar.hasClass('open');
+        if (isOpen) {
+            closeSidebar();
+        } else {
+            openSidebar();
+        }
+    }
+
+    function openSidebar() {
+        $sidebar.addClass('open');
+        $sidebarOverlay.addClass('active');
+        $('body').css('overflow', 'hidden');
+
+        // Focus management
+        $sidebar.find('button:first').focus();
+    }
+
+    function closeSidebar() {
+        $sidebar.removeClass('open');
+        $sidebarOverlay.removeClass('active');
+        $('body').css('overflow', '');
+    }
+
+    function handleResize() {
+        if ($(window).width() > 768) {
+            closeSidebar();
+            $('body').css('overflow', '');
+        }
+    }
+
+    // Theme management
+    function toggleTheme() {
+        const currentTheme = localStorage.getItem('theme') || 'light';
+        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+
+        setTheme(newTheme);
+        saveTheme(newTheme);
+    }
+
+    function setTheme(theme) {
+        $('body').attr('data-theme', theme);
+        $themeToggle.find('.theme-icon').text(theme === 'light' ? '🌙' : '☀️');
+    }
+
+    function loadTheme() {
+        const savedTheme = localStorage.getItem('theme') || 'light';
+        setTheme(savedTheme);
+    }
+
+    function saveTheme(theme) {
+        localStorage.setItem('theme', theme);
+    }
+
+    // Input handling
+    function handleInputChange() {
+        const value = $messageInput.val().trim();
+        $sendBtn.prop('disabled', !value);
+        adjustTextareaHeight();
+    }
+
+    function handleKeyDown(e) {
+        if (e.key === 'Enter') {
+            if (e.shiftKey) {
+                // Allow new line with Shift+Enter
+                return;
+            } else {
+                e.preventDefault();
+                sendMessage();
+            }
+        } else if (e.key === 'Tab') {
+            // Handle tab navigation
+            return;
+        }
+    }
+
+    function adjustTextareaHeight() {
+        const textarea = $messageInput[0];
+        textarea.style.height = 'auto';
+        const newHeight = Math.min(textarea.scrollHeight, 200);
+        textarea.style.height = newHeight + 'px';
+    }
+
+    // Message handling
+    function sendMessage() {
+        const message = $messageInput.val().trim();
+        if (!message || isTyping) return;
+
+        // Hide welcome message
+        $welcomeMessage.hide();
+
+        // Add user message
+        addMessage(message, 'user');
+
+        // Clear input
+        $messageInput.val('');
+        $sendBtn.prop('disabled', true);
+        adjustTextareaHeight();
+
+        // Show typing indicator
+        showTypingIndicator();
+
+        // Simulate API call based on message content
+        //if (message.toLowerCase().includes('sql') || message.toLowerCase().includes('query')) {
+        //    // SQL generation endpoint
+        //    callSQLGenerationAPI(message);
+        //} else if (message.toLowerCase().includes('correct') || message.toLowerCase().includes('fix')) {
+        //    // SQL correction endpoint
+        //    callSQLCorrectionAPI(message);
+        //} else {
+        //    // Generic response for other messages
+        //    simulateAssistantResponse(message);
+        //}
+
+        callSQLGenerationAPI(message);
+
+        // Scroll to bottom
+        scrollToBottom();
+    }
+
+    function addMessage(content, type, timestamp = new Date()) {
+
+
+        //$.ajax({
+        //    url: '/openai/TEST',
+        //    method: 'GET',
+        //    contentType: 'application/json',
+        //    data: {
+        //        msg: content
+        //    },
+        //    timeout: 30000,
+        //    success: function (response) {
+        //        alert(response);
+        //    },
+        //    error: function (xhr, status, error) {
+        //        hideTypingIndicator();
+        //        let errorMessage = 'Connection error occurred';
+
+        //        if (xhr.status === 404) {
+        //            errorMessage = 'SQL generation service not available';
+        //        } else if (xhr.status === 500) {
+        //            errorMessage = 'Internal server error';
+        //        } else if (status === 'timeout') {
+        //            errorMessage = 'Request timed out';
+        //        }
+
+        //        addErrorMessage(message, errorMessage);
+        //        showToast('Failed to generate SQL. Please try again.', 'error');
+        //    }
+        //});
+
+
+
+        //return;/////////////
+
+        const messageId = 'msg-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
+        const timeStr = formatTime(timestamp);
+
+        const messageHtml = `
+            <div class="message ${type}" data-message-id="${messageId}">
+                <div class="message-bubble">
+                    <div class="message-content">${escapeHtml(content)}</div>
+                    <div class="message-time">${timeStr}</div>
+                </div>
+            </div>
+        `;
+
+        $messagesContainer.append(messageHtml);
+        scrollToBottom();
+
+        // Store message in session
+        //if (currentSessionId) {
+        //    storeMessage(content, type, timestamp);
+        //}
+
+        return messageId;
+    }
+
+    function addErrorMessage(originalMessage, error) {
+        const messageHtml = `
+            <div class="message assistant error">
+                <div class="message-bubble">
+                    <div class="message-content">
+                        Sorry, I encountered an error while processing your request.
+                        <br><small>Error: ${escapeHtml(error)}</small>
+                    </div>
+                    <button class="retry-btn" data-original-message="${escapeHtml(originalMessage)}">
+                        Retry
+                    </button>
+                </div>
+            </div>
+        `;
+
+        $messagesContainer.append(messageHtml);
+
+        // Add retry functionality
+        $('.retry-btn').last().on('click', function () {
+            const originalMsg = $(this).data('original-message');
+            $(this).closest('.message').remove();
+
+            // Resend the message
+            $messageInput.val(originalMsg);
+            sendMessage();
+        });
+
+        scrollToBottom();
+    }
+
+    function showTypingIndicator() {
+        isTyping = true;
+        const typingHtml = `
+            <div class="typing-indicator" id="typingIndicator">
+                <div class="typing-dots">
+                    <div class="typing-dot"></div>
+                    <div class="typing-dot"></div>
+                    <div class="typing-dot"></div>
+                </div>
+            </div>
+        `;
+
+        $messagesContainer.append(typingHtml);
+        scrollToBottom();
+    }
+
+    function hideTypingIndicator() {
+        $('#typingIndicator').remove();
+        isTyping = false;
+    }
+
+    function scrollToBottom() {
+        $messagesContainer.animate({
+            scrollTop: $messagesContainer[0].scrollHeight
+        }, 300);
+    }
+
+    // API calls
+    function callSQLGenerationAPI(message) {
+        var isFirstChat = $("#isFirstChat").val();
+        $.ajax({
+            url: '/openai/PostRequest',
+            method: 'POST',
+            //contentType: 'application/json',
+            data: {
+                requestBody: message,
+                isFirstChat: isFirstChat
+                //session_id: currentSessionId
+            },
+            timeout: 30000,
+            success: function (response) {
+                hideTypingIndicator();
+                response.forEach(item => addMessage(item, 'assistant'));
+                $("#isFirstChat").val("false");
+                //const sqlQuery = response
+                //addMessage(sqlQuery, 'assistant');
+            },
+            error: function (xhr, status, error) {
+                hideTypingIndicator();
+                let errorMessage = 'Connection error occurred';
+
+                if (xhr.status === 404) {
+                    errorMessage = 'SQL generation service not available';
+                } else if (xhr.status === 500) {
+                    errorMessage = 'Internal server error';
+                } else if (status === 'timeout') {
+                    errorMessage = 'Request timed out';
+                }
+
+                addErrorMessage(message, errorMessage);
+                showToast('Failed to generate SQL. Please try again.', 'error');
+            }
+        });
+    }
+
+    //function callSQLCorrectionAPI(message) {
+    //    $.ajax({
+    //        url: '/sql/correction',
+    //        method: 'POST',
+    //        contentType: 'application/json',
+    //        data: JSON.stringify({
+    //            sql_query: message,
+    //            session_id: currentSessionId
+    //        }),
+    //        timeout: 30000,
+    //        success: function (response) {
+    //            hideTypingIndicator();
+    //            const correctedSQL = response.corrected_sql || response.sql || 'Corrected SQL would appear here.';
+    //            addMessage(correctedSQL, 'assistant');
+    //        },
+    //        error: function (xhr, status, error) {
+    //            hideTypingIndicator();
+    //            let errorMessage = 'Connection error occurred';
+
+    //            if (xhr.status === 404) {
+    //                errorMessage = 'SQL correction service not available';
+    //            } else if (xhr.status === 500) {
+    //                errorMessage = 'Internal server error';
+    //            } else if (status === 'timeout') {
+    //                errorMessage = 'Request timed out';
+    //            }
+
+    //            addErrorMessage(message, errorMessage);
+    //            showToast('Failed to correct SQL. Please try again.', 'error');
+    //        }
+    //    });
+    //}
+
+    //function simulateAssistantResponse(message) {
+    //    // Simulate network delay
+    //    setTimeout(() => {
+    //        hideTypingIndicator();
+
+    //        // Generate contextual response
+    //        let response = "I understand you're asking about: " + message + "\n\n";
+
+    //        if (message.toLowerCase().includes('help')) {
+    //            response += "I'm here to help you with SQL queries and corrections. You can:\n\n" +
+    //                "• Ask me to generate SQL queries by describing what you need\n" +
+    //                "• Request corrections for existing SQL code\n" +
+    //                "• Get explanations for database concepts\n\n" +
+    //                "How can I assist you today?";
+    //        } else {
+    //            response += "I'm an AI assistant specialized in SQL and database queries. " +
+    //                "To better help you, please let me know if you need:\n\n" +
+    //                "• SQL query generation\n" +
+    //                "• SQL query correction\n" +
+    //                "• Database design advice\n\n" +
+    //                "Feel free to be specific about your requirements!";
+    //        }
+
+    //        addMessage(response, 'assistant');
+    //    }, 1500 + Math.random() * 1000);
+    //}
+
+    // Session management
+    //function generateSessionId() {
+    //    currentSessionId = 'session-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
+    //}
+
+    function startNewChat() {
+
+        $.ajax({
+            url: `/openai/NewChat`,
+            method: 'GET',
+            success: function (response) {
+                $messagesContainer.empty();
+                $welcomeMessage.show();
+
+                if (response && response.length > 0) {
+                    console.log(response)
+                }
+
+                if ($(window).width() <= 768) {
+                    closeSidebar();
+                }
+
+                $("#isFirstChat").val("true")
+
+
+                showToast('Started new conversation', 'success');
+            },
+            error: function () {
+                showToast('Error for creating new conversation', 'error');
+            }
+        });
+
+        // Clear current messages
+        //$messagesContainer.empty();
+        //$welcomeMessage.show();
+
+        //// Generate new session
+        ////generateSessionId();
+
+        //// Update chat history
+        ////loadChatHistory();
+
+        //// Close sidebar on mobile
+        //if ($(window).width() <= 768) {
+        //    closeSidebar();
+        //}
+        
+
+        //showToast('Started new conversation', 'success');
+    }
+
+    //function storeMessage(content, type, timestamp) {
+    //    // Store in localStorage for demo purposes
+    //    const sessionMessages = JSON.parse(localStorage.getItem(currentSessionId) || '[]');
+    //    sessionMessages.push({
+    //        content,
+    //        type,
+    //        timestamp: timestamp.toISOString()
+    //    });
+    //    localStorage.setItem(currentSessionId, JSON.stringify(sessionMessages));
+
+    //    // Update chat history
+    //    //updateChatHistoryItem();
+    //}
+
+    function loadSessionHistory(sessionId) {
+        $.ajax({
+            url: `/openai/LoadSessionHistory`,
+            method: 'POST',
+            data: {
+                session_id: sessionId
+            },
+            success: function (response) {
+                // Load messages from server
+                $messagesContainer.empty();
+                $welcomeMessage.hide();
+
+                if (response.messages && response.messages.length > 0) {
+                    response.messages.forEach(msg => {
+                        addMessage(msg.content, msg.type, new Date(msg.timestamp));
+                    });
+                } else {
+                    $welcomeMessage.show();
+                }
+            },
+            error: function () {
+                // Fallback to localStorage
+                const sessionMessages = JSON.parse(localStorage.getItem(sessionId) || '[]');
+                $messagesContainer.empty();
+
+                if (sessionMessages.length > 0) {
+                    $welcomeMessage.hide();
+                    sessionMessages.forEach(msg => {
+                        addMessage(msg.content, msg.type, new Date(msg.timestamp));
+                    });
+                } else {
+                    $welcomeMessage.show();
+                }
+            }
+        });
+    }
+
+    //function deleteSession(sessionId) {
+    //    $.ajax({
+    //        url: `/session/${sessionId}`,
+    //        method: 'DELETE',
+    //        success: function () {
+    //            // Remove from localStorage as well
+    //            localStorage.removeItem(sessionId);
+    //            loadChatHistory();
+
+    //            if (sessionId === currentSessionId) {
+    //                startNewChat();
+    //            }
+
+    //            showToast('Chat deleted successfully', 'success');
+    //        },
+    //        error: function () {
+    //            // Fallback to localStorage removal
+    //            localStorage.removeItem(sessionId);
+    //            loadChatHistory();
+    //            showToast('Chat deleted locally', 'info');
+    //        }
+    //    });
+    //}
+
+    // Chat history management
+    function loadChatHistory() {
+        let sessions = [];
+
+        $.ajax({
+            url: `/openai/LoadChatHistory`,
+            method: 'GET',
+            success: function (response) {
+                if (typeof response === "string") {
+                    response = JSON.parse(response);
+                }
+
+                sessions = Object.values(response);
+
+                updateChatHistoryUI(sessions);
+            },
+            error: function () {
+                showToast('Error for loading chat history', 'error');
+            }
+        });
+
+        //// Load from localStorage for demo
+        //for (let i = 0; i < localStorage.length; i++) {
+        //    const key = localStorage.key(i);
+        //    if (key && key.startsWith('session-')) {
+        //        const messages = JSON.parse(localStorage.getItem(key) || '[]');
+        //        if (messages.length > 0) {
+        //            sessions.push({
+        //                id: key,
+        //                title: getSessionTitle(messages[0].content),
+        //                lastMessage: messages[messages.length - 1].timestamp,
+        //                messageCount: messages.length
+        //            });
+        //        }
+        //    }
+        //}
+
+        // Sort by last message time
+        //sessions.sort((a, b) => new Date(b.lastMessage) - new Date(a.lastMessage));
+
+        // Update UI
+        //updateChatHistoryUI(sessions);
+    }
+
+    function updateChatHistoryUI(sessions) {
+        $chatHistory.empty();
+
+        if (sessions.length === 0) {
+            $chatHistory.append('<li class="chat-history-item">No previous chats</li>');
+            return;
+        }
+
+        sessions.forEach(session => {
+            const isActive = 'active'
+            const timeStr = formatRelativeTime(new Date(session.lastMessage));
+
+            const historyItem = $(`
+                <li class="chat-history-item ${isActive}" data-session-id="${session.SessionId}">
+                    <div class="chat-title">${escapeHtml(session.ChatHeading)}</div>
+                    
+                </li>
+            `);
+
+            historyItem.on('click', function () {
+                const sessionId = $(this).data('session-id');
+                loadSession(sessionId);
+                closeSidebar();
+            });
+
+            $chatHistory.append(historyItem);
+        });
+    }
+
+    function getSessionTitle(firstMessage) {
+        const truncated = firstMessage.length > 30 ?
+            firstMessage.substring(0, 30) + '...' :
+            firstMessage;
+        return truncated;
+    }
+
+    function updateChatHistoryItem() {
+        loadChatHistory();
+    }
+
+    function loadSession(sessionId) {
+        currentSessionId = sessionId;
+        loadSessionHistory(sessionId);
+    }
+
+    // Toast notifications
+    function showToast(message, type = 'info') {
+        const $toast = $(`
+            <div class="toast ${type}-toast">
+                <div class="toast-content">
+                    <span class="toast-icon">${getToastIcon(type)}</span>
+                    <span class="toast-message">${escapeHtml(message)}</span>
+                </div>
+                <button class="toast-close" aria-label="Close">×</button>
+            </div>
+        `);
+
+        $('body').append($toast);
+
+        // Show toast
+        setTimeout(() => $toast.addClass('show'), 100);
+
+        // Auto hide after 5 seconds
+        setTimeout(() => {
+            $toast.removeClass('show');
+            setTimeout(() => $toast.remove(), 300);
+        }, 5000);
+
+        // Close button
+        $toast.find('.toast-close').on('click', function () {
+            $toast.removeClass('show');
+            setTimeout(() => $toast.remove(), 300);
+        });
+    }
+
+    function getToastIcon(type) {
+        const icons = {
+            success: '✅',
+            error: '⚠️',
+            info: 'ℹ️',
+            warning: '⚠️'
+        };
+        return icons[type] || icons.info;
+    }
+
+    function hideToast() {
+        $('.toast').removeClass('show');
+        setTimeout(() => $('.toast').remove(), 300);
+    }
+
+    // Utility functions
+    function escapeHtml(text) {
+        const map = {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#039;'
+        };
+        return text.replace(/[&<>"']/g, m => map[m]);
+    }
+
+    function formatTime(date) {
+        return date.toLocaleTimeString([], {
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    }
+
+    function formatRelativeTime(date) {
+        const now = new Date();
+        const diff = now - date;
+        const minutes = Math.floor(diff / 60000);
+        const hours = Math.floor(minutes / 60);
+        const days = Math.floor(hours / 24);
+
+        if (minutes < 1) return 'Just now';
+        if (minutes < 60) return `${minutes}m ago`;
+        if (hours < 24) return `${hours}h ago`;
+        if (days < 7) return `${days}d ago`;
+        return date.toLocaleDateString();
+    }
+
+    // Keyboard navigation
+    function setupKeyboardNavigation() {
+        $(document).on('keydown', function (e) {
+            if (e.ctrlKey && e.key === '/') {
+                e.preventDefault();
+                $messageInput.focus();
+            }
+        });
+    }
+
+    setupKeyboardNavigation();
+});
\ No newline at end of file