index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NexusAI ChatGPT</title>
    <link rel="icon" href="./images/nexusai.png" type="image/png">
    
    <meta property="og:image" content="./images/nexusai.png">
    <meta property="og:description" content="NexusAI ChatGPT is a simple web app that allows you to chat with various AI models.">
    <meta property="og:title" content="NexusAI ChatGPT">
    <meta property="og:url" content="https://www.nexusmind.tech">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="NexusAI ChatGPT">
    <meta property="og:locale" content="en_US">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="NexusAI ChatGPT">
    <meta name="twitter:description" content="NexusAI ChatGPT is a simple web app that allows you to chat with various AI models.">
    <meta name="twitter:image" content="./images/nexusai.png">
    <meta name="twitter:image:alt" content="NexusAI ChatGPT">
    <meta name="twitter:domain" content="www.nexusmind.tech">
    <meta name="twitter:url" content="https://www.nexusmind.tech">
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
    <!-- Add KaTeX CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/katex.min.css" integrity="sha384-3UiQGuEI4TTMaFmGIZumfRPtfKQ3trwQE2JgosJxCnGmQpL/lJdjpcHkaaFwHlcI" crossorigin="anonymous">
    <!-- Add KaTeX JS -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/katex.min.js" integrity="sha384-G0zcxDFp5LWZtDuRMnBkk3EphCK1lhEf4UEyEM693ka574TZGwo4IWwS6QLzM/2t" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>

    <!-- File Parser -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.8/mammoth.browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
    <style>
        :root {
            --background: 0 0% 100%;
            --foreground: 222.2 84% 4.9%;
            --card: 0 0% 100%;
            --card-foreground: 222.2 84% 4.9%;
            --popover: 0 0% 100%;
            --popover-foreground: 222.2 84% 4.9%;
            --primary: 222.2 47.4% 11.2%;
            --primary-foreground: 210 40% 98%;
            --secondary: 210 40% 96.1%;
            --secondary-foreground: 222.2 47.4% 11.2%;
            --muted: 210 40% 96.1%;
            --muted-foreground: 215.4 16.3% 46.9%;
            --accent: 210 40% 96.1%;
            --accent-foreground: 222.2 47.4% 11.2%;
            --destructive: 0 84.2% 60.2%;
            --destructive-foreground: 210 40% 98%;
            --border: 214.3 31.8% 91.4%;
            --input: 214.3 31.8% 91.4%;
            --ring: 222.2 84% 4.9%;
            --radius: 0.5rem;
    
            --background-dark: 222.2 84% 4.9%;
            --foreground-dark: 210 40% 98%;
            --card-dark: 222.2 84% 4.9%;
            --card-foreground-dark: 210 40% 98%;
            --popover-dark: 222.2 84% 4.9%;
            --popover-foreground-dark: 210 40% 98%;
            --primary-dark: 210 40% 98%;
            --primary-foreground-dark: 222.2 47.4% 11.2%;
            --secondary-dark: 217.2 32.6% 17.5%;
            --secondary-foreground-dark: 210 40% 98%;
            --muted-dark: 217.2 32.6% 17.5%;
            --muted-foreground-dark: 215 20.2% 65.1%;
            --accent-dark: 217.2 32.6% 17.5%;
            --accent-foreground-dark: 210 40% 98%;
            --destructive-dark: 0 62.8% 30.6%;
            --destructive-foreground-dark: 210 40% 98%;
            --border-dark: 217.2 32.6% 17.5%;
            --input-dark: 217.2 32.6% 17.5%;
            --ring-dark: 212.7 26.8% 83.9%;
        }
    
        body.dark-mode {
            --background: var(--background-dark);
            --foreground: var(--foreground-dark);
            --card: var(--card-dark);
            --card-foreground: var(--card-foreground-dark);
            --popover: var(--popover-dark);
            --popover-foreground: var(--popover-foreground-dark);
            --primary: var(--primary-dark);
            --primary-foreground: var(--primary-foreground-dark);
            --secondary: var(--secondary-dark);
            --secondary-foreground: var(--secondary-foreground-dark);
            --muted: var(--muted-dark);
            --muted-foreground: var(--muted-foreground-dark);
            --accent: var(--accent-dark);
            --accent-foreground: var(--accent-foreground-dark);
            --destructive: var(--destructive-dark);
            --destructive-foreground: var(--destructive-foreground-dark);
            --border: var(--border-dark);
            --input: var(--input-dark);
            --ring: var(--ring-dark);
        }

        body.dark-mode .icon-button {
            background-color: hsl(var(--secondary-dark));
            border-color: hsl(var(--border-dark));
        }
        
        body.dark-mode .icon-button svg {
            fill: hsl(var(--foreground-dark));
        }

        body.dark-mode .sidebar-collapse-btn svg {
            fill: none;
            color: hsl(var(--foreground-dark));
        }

        body.dark-mode #uploadFileBtn svg {
            fill: none;
            color: hsl(var(--foreground-dark));
        }
        
        body.dark-mode .model-selector-btn {
            background-color: hsl(var(--secondary-dark));
            border-color: hsl(var(--border-dark));
            color: hsl(var(--foreground-dark));
        }
        
        body.dark-mode .model-selector-btn svg {
            stroke: hsl(var(--foreground-dark));
        }
    
        body, html {
            margin: 0;
            padding: 0;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            height: 100%;
            background-color: hsl(var(--background));
            color: hsl(var(--foreground));
        }
    
        .container {
            display: flex;
            height: 100%;
        }

        .navigation-sidebar {
            width: 60px;
            min-width: 60px;
            background-color: hsl(var(--card));
            border-right: 1px solid hsl(var(--border));
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 1rem 0;
            justify-content: space-between;
        }
        
        .navigation-item {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            color: hsl(var(--muted-foreground));
            margin-bottom: 0.75rem;
            position: relative;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .navigation-item:hover {
            background-color: hsl(var(--secondary));
            color: hsl(var(--yellow-500));
            transform: scale(1.1) rotate(3deg);
        }
        
        .navigation-item.active {
            background: linear-gradient(to bottom right, hsl(var(--yellow-500) / 0.2), hsl(var(--orange-500) / 0.2));
            border: 1px solid hsl(var(--yellow-500) / 0.3);
            color: hsl(var(--yellow-500));
        }
    
        .navigation-item svg {
            width: 24px;
            height: 24px;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
    
        .navigation-item:hover svg {
            transform: rotate(12deg);
        }
    
        /* Add tooltip styles */
        .navigation-item::after {
            content: attr(title);
            position: absolute;
            left: calc(100% + 1rem);
            padding: 0.25rem 0.75rem;
            background-color: hsl(var(--background));
            border-radius: 0.375rem;
            font-size: 0.875rem;
            color: hsl(var(--yellow-500));
            opacity: 0;
            pointer-events: none;
            white-space: nowrap;
            transition: opacity 0.3s;
        }
    
        .navigation-item:hover::after {
            opacity: 1;
        }
    

        .navigation-top, .navigation-bottom {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .navigation-bottom {
            gap: 1rem;
        }
        .streaming-metrics {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem;
            font-size: 0.8rem;
            border-top: 1px solid hsl(var(--border));
            background-color: hsl(var(--background));
            transition: opacity 0.3s ease-in-out;
        }

        .streaming-metrics.hidden {
            display: none;
        }
        .version-text {
            font-size: 0.7rem;
            color: hsl(var(--muted-foreground));
            margin-top: 0.5rem;
        }

        #deleteAllBtn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }
        
        .sidebar-collapse-btn {
            position: absolute;
            left: 393px;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            background-color: hsl(var(--background));
            border: 1px solid hsl(var(--border));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: transform 0.3s;
        }

        .sidebar-collapse-btn.collapsed {
            transform: translateY(-50%) rotate(180deg);
            left: 43px;
        }
        
        .sidebar.collapsed {
            width: 0;
            min-width: 0;
            overflow: hidden;
        }
    
        .sidebar {
            width: 350px;
            min-width: 350px;
            background-color: hsl(var(--card));
            border-right: 1px solid hsl(var(--border));
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease-in-out;
        }
    
        .main-content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
    
        .header {
            height: 2.5rem; /* Reduced from default height */
            padding: 0.5rem 1rem;
            background-color: hsl(var(--card));
            border-bottom: 1px solid hsl(var(--border));
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            right: 0;
            left: 0;
            z-index: 1000;
        }
    
        .chat-area {
            flex-grow: 1;
            padding: 1.5rem;
            overflow-y: auto;
            background-color: hsl(var(--card));
            scrollbar-width: inherit;
            scrollbar-color: hsl(var(--border)) transparent;
        }
    
        .input-area {
            border-top: 1px solid hsl(var(--border));
            padding: 0.8rem 1.2rem 1.2rem;
            background-color: hsl(var(--card));
            display: flex;
            flex-direction: column;
            position: sticky;
            bottom: 0;
            right: 0;
            left: 0;
            z-index: 1000;
        }
    
        .streaming-metrics {
            position: sticky;
            bottom: 160px;
            right: 0;
            left: 0;
            z-index: 999;
            background-color: hsl(var(--muted));
            padding: 1rem;
            padding-left: 1.75rem;
            display: flex;
            gap: 3rem;
            font-size: 0.8rem;
            color: hsl(var(--muted-foreground));
            border-bottom: 1px solid hsl(var(--border));
            text-align: center;
        }
    
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius);
            font-weight: 500;
            padding: 0.5rem 1rem;
            transition: background-color 0.2s, color 0.2s, border-color 0.2s;
            cursor: pointer;
            gap: 0.25rem;
        }
    
        .btn-primary {
            background-color: hsl(var(--primary));
            color: hsl(var(--primary-foreground));
            border: none;
        }
    
        .btn-primary:hover {
            background-color: hsl(var(--primary) / 0.9);
        }
    
        .btn-secondary {
            background-color: hsl(var(--secondary));
            color: hsl(var(--secondary-foreground));
            border: 1px solid hsl(var(--border));
        }
    
        .btn-secondary:hover {
            background-color: hsl(var(--secondary) / 0.8);
        }
    
        .btn-ghost {
            background-color: transparent;
            color: hsl(var(--foreground));
            border: none;
        }
    
        .btn-ghost:hover {
            background-color: hsl(var(--accent));
        }
    
        .input {
            width: 95%;
            padding: 0.5rem;
            border: 1px solid hsl(var(--input));
            border-radius: var(--radius);
            background-color: transparent;
            color: hsl(var(--foreground));
        }
    
        .input:focus {
            outline: none;
            border-color: hsl(var(--ring));
            box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
        }
    
        .sidebar-section {
            padding: 1rem;
        }
    
        .sidebar-title {
            font-weight: 600;
            font-size: 0.875rem;
            margin-bottom: 0.5rem;
            color: hsl(var(--muted-foreground));
        }
    
        .chat-welcome {
            text-align: center;
            margin-top: 3rem;
        }
    
        .chat-icon {
            width: 4rem;
            height: 4rem;
            background-color: hsl(var(--secondary));
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto 1.5rem;
            font-size: 1.5rem;
        }

        #selectedModel {
            padding-right: 0.3rem !important;
        }
    
        .model-selector {
            display: flex;
            align-items: center;
            gap: 1rem;
            position: relative;
        }

        .cf-turnstile {
            margin-left: 1rem;
            transform: scale(0.85);  /* Increased scale for better visibility */
            transform-origin: left center;
            display: flex;          /* Added to help with alignment */
            align-items: center;    /* Added to help with alignment */
        }

        .cf-turnstile iframe {
            height: 65px !important;  /* Increased height to account for scaling */
            border-radius: var(--radius) !important;
            overflow: hidden;
            margin-top: -12px;      /* Fine-tune vertical alignment */
        }

    
        .model-selector-btn {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            background-color: hsl(var(--secondary));
            border: 1px solid hsl(var(--border));
            padding: 0.5rem 1rem;
            border-radius: var(--radius);
            cursor: pointer;
        }
    
        .model-selector-content {
            display: none;
            position: absolute;
            background-color: hsl(var(--popover));
            min-width: 400px;
            max-height: 300px;
            overflow-y: auto;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1000;
            border-radius: var(--radius);
            border: 1px solid hsl(var(--border));
            top: 100%;
            left: 0;
        }
    
        .model-selector-content a {
            color: hsl(var(--popover-foreground));
            padding: 12px 16px;
            text-decoration: none;
            display: flex;
            align-items: center;
        }
    
        .model-selector-content a:hover {
            background-color: hsl(var(--accent));
        }

        .model-search-container {
            position: sticky;
            top: 0;
            background-color: inherit;
            z-index: 1;
            padding: 10px;
            border-bottom: 1px solid hsl(var(--border));
        }
        
        .model-search-input {
            width: 80%;
            padding: 8px 8px 8px 32px;
            border: none;
            background-color: inherit;
            color: hsl(var(--foreground));
            border-radius: var(--radius);
        }
    
        .model-search-input:focus {
            outline: none !important;
            border: none !important;
        }
    
        .search-icon {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            color: hsl(var(--muted-foreground));
        }
    
        .model-selector-content {
            max-height: 300px;
            overflow-y: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
    
        .model-selector-content::-webkit-scrollbar {
            display: none;
        }

        .model-icon {
            width: 24px;
            height: 24px;
            margin-right: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    
        .model-icon img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }
    
        .show {
            display: block !important;;
        }
    
        .modal {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
            justify-content: center;
            align-items: center;
        }
    
        .modal-content {
            background-color: hsl(var(--background));
            margin: 2% auto;
            padding: 20px;
            border: 1px solid hsl(var(--border));
            width: 80%;
            max-width: 500px;
            height: min-content;
            border-radius: var(--radius);
        }
    
        .close {
            color: hsl(var(--muted-foreground));
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
    
        .close:hover,
        .close:focus {
            color: hsl(var(--foreground));
            text-decoration: none;
        }
    
        .chat-history {
            max-height: calc(100vh - 280px);
            overflow-y: auto;
            scroll-behavior: smooth;
        }
        
        /* Firefox scrollbar styles */
        .chat-history {
            scrollbar-width: thin;
            scrollbar-color: hsl(var(--border)) transparent;
        }
        
        /* Chrome, Edge, and Safari scrollbar styles */
        .chat-history::-webkit-scrollbar {
            width: 5px;
        }
        
        .chat-history::-webkit-scrollbar-track {
            background-color: transparent;
        }
        
        .chat-history::-webkit-scrollbar-thumb {
            background-color: hsl(var(--border));
            border-radius: 5px;
        }

        .load-more {
            display: none;
            width: 100%;
            padding: 0.5rem;
            margin-top: 0.5rem;
            background-color: hsl(var(--secondary));
            color: hsl(var(--secondary-foreground));
            border: none;
            border-radius: var(--radius);
            cursor: pointer;
        }
    
        .load-more:hover {
            background-color: hsl(var(--secondary) / 0.8);
        }
    
    
        .chat-item button {
            display: block;
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;
        }
    
        .chat-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem;
            border-radius: var(--radius);
            margin-bottom: 0.5rem;
            transition: background-color 0.2s ease;
        }
    
        .chat-item:hover {
            background-color: hsl(var(--accent));
        }
    
        .chat-item-actions {
            display: none;
            gap: 0.5rem;
        }

        .chat-item-action {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            color: hsl(var(--muted-foreground));
        }

        .chat-item:hover .chat-item-actions {
            display: flex;
        }

        .message-container {
            margin-bottom: 1rem;
            padding: 0.5rem;
            border-radius: var(--radius);
            flex-direction: column;
        }
    
        .message-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        .message-actions {
            display: flex;
            align-items: center;
            flex-direction: row;
            gap: 0.5rem;

        }
    
        .message-action {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 36px;
            height: 36px;
            border: none;
            cursor: pointer;
            padding: 0;
            transition: opacity 0.2s ease-in-out;
            opacity: 0;
        }

        .message-container:hover .message-action {
            opacity: 1;
        }

        .message-action:hover {
            border: 1px solid hsl(var(--border));
            transform: scale(1.1);
        }

        .message-action svg {
            width: 16px;
            height: 16px;
            stroke: currentColor;
        }

        .edit-interface {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 65vw;
            max-width: 100%;
        }

        .edit-textarea {
            width: 100%;
            max-width: 100%;
            min-height: 100px;
            padding: 8px;
            border: none;
            border-radius: var(--radius);
            background-color: inherit;
            resize: vertical;
            overflow-x: hidden;
            box-sizing: border-box;
            scrollbar-width: thin;
        }
    
        .user-message .edit-textarea {
            color: hsl(var(--primary-foreground));
        }

        .assistant-message .edit-textarea {
            color: hsl(var(--secondary-foreground));
        }

        .user-message  .edit-interface .btn-primary {
            background-color: hsl(var(--secondary));
            color: hsl(var(--secondary-foreground));
            
        }

        .user-message .edit-interface .btn-secondary {
            background-color: hsl(var(--primary));
            color: hsl(var(--primary-foreground));
        }

        .assistant-message .edit-interface .btn-primary {
            background-color: hsl(var(--primary));
        }   

        .assistant-message .edit-interface .btn-secondary {
            background-color: hsl(var(--secondary));
            border: 1px solid hsl(var(--secondary-foreground));
        }

        .edit-textarea:focus {
            outline: none;
        }

        .edit-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            padding: 0.5rem;
        }

        .edit-interface button:hover {      
            opacity: 0.8;
        }

        .retry-button {
            background-color: transparent;
            border: none;
            cursor: pointer;
            padding: 4px;
            border-radius: 50%;
            transition: background-color 0.2s ease-in-out;
        }

        .retry-button:hover {
            background-color: hsl(var(--secondary));
        }

        .retry-button svg {
            width: 16px;
            height: 16px;
            stroke: currentColor;
        }
    
        .message-content {
            background-color: hsl(var(--muted));
            padding: 0.8rem;
            border-radius: var(--radius);
        }
    
        .user-message .message-header {
            flex-direction: row-reverse;
        }
    
        .assistant-message .message-header {
            flex-direction: row;
        }

        .assistant-info {
            display: flex;
            align-items: center;
            font-weight: bold;
        }
    
        .assistant-info .model-icon {
            margin-right: 0.5rem;
        }
    
        .markdown-content {
            background-color: #1e1e1e;
            color: #d4d4d4;
            padding: 1rem;
            border-radius: var(--radius);
            position: relative;
            overflow-x: auto;
            margin-top: 0.5rem;
        }
    
        .markdown-content pre {
            background-color: #2d2d2d;
            padding: 1rem;
            border-radius: var(--radius);
        }
    
        .markdown-content code {
            font-family: 'Courier New', Courier, monospace;
        }

        .katex-display {
            display: block;
            margin: 1em 0;
        }
        .katex {
            font-size: 1.1em;
        }
        .katex .katex-mathml {
            position: fixed !important;
        }

        .copy-btn {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            background-color: hsl(var(--primary));
            color: hsl(var(--primary-foreground));
            border: none;
            border-radius: var(--radius);
            padding: 0.25rem 0.5rem;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
        }
    
        .copy-btn:hover  {
            background-color: hsl(var(--primary) / 0.9);
        }
    
        .settings-modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
    
        .settings-modal-content {
            background-color: hsl(var(--background));
            margin: 2% auto;
            padding: 20px;
            border: 1px solid hsl(var(--border));
            width: 80%;
            max-width: 500px;
            border-radius: var(--radius);
        }
    
        .slider-container {
            display: flex;
            align-items: center;
            margin-top: 1rem;
        }
    
        .slider {
            flex-grow: 1;
            margin: 0 1rem;
        }
    
        .slider-value {
            width: 60px;
            margin: 0 auto;
            text-align: center;
        }

        .slider-value  input[type="number"]::-webkit-inner-spin-button,
        .slider-value input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .slider-value input[type="number"] {
            -moz-appearance: textfield;
        }

        .slider-value input {
            width: 100%;
            text-align: center;
            padding: 0.25rem;
            border: 1px solid hsl(var(--border));
            border-radius: var(--radius);
            background-color: hsl(var(--background));
            color: hsl(var(--foreground));
        }
        
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }
    
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
    
        .slider-switch {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }
    
        .slider-switch:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
    
        input:checked + .slider-switch {
            background-color: #2196F3;
        }
    
        input:checked + .slider-switch:before {
            transform: translateX(26px);
        }
    
        .settings-group {
            margin-bottom: 1rem;
        }
    
        .settings-group label {
            display: block;
            margin-bottom: 0.5rem;
        }
    
        .message-content pre {
            white-space: pre-wrap;
            word-wrap: break-word;
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
        }
    
        .message-content table {
            border-collapse: collapse;
            width: 100%;
            margin-bottom: 1rem;
        }
    
        .message-content th, .message-content td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
    
        .message-content th {
            background-color: #f2f2f2;
        }
    
        .toggle-sidebar {
            display: none;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: hsl(var(--foreground));
        }
    
        .input-area-container {
            display: flex;
            position: relative;
            width: 100%;
            align-items: center;
            gap: 0.5rem;
        }
        
        .input[contenteditable=true]:empty:before {
            content: attr(data-placeholder);
            color: hsl(var(--muted-foreground));
            pointer-events: none;
        }
    
        .input-icons {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 0.8rem;
        }
    
        .input-icon {
            cursor: pointer;
            color: hsl(var(--muted-foreground));
        }
    
        .input-icon:hover {
            color: hsl(var(--foreground));
        }
    
        .blinking-cursor {
            display: inline-block;
            width: 6.9px;
            height: 1.2em;
            background-color: hsl(var(--foreground));
            margin-left: 1px;
            animation: blink 1s step-end infinite;
            vertical-align: middle;
        }
    
        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0; }
            100% { opacity: 1; }
        }
    
        .wave-dots {
            display: inline-block;
        }
    
        .wave-dots span {
            display: inline-block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            margin-right: 3px;
            background: hsl(var(--foreground));
            animation: wave 1.3s linear infinite;
        }
    
        .wave-dots span:nth-child(2) {
            animation-delay: -1.1s;
        }
    
        .wave-dots span:nth-child(3) {
            animation-delay: -0.9s;
        }
    
        @keyframes wave {
            0%, 60%, 100% { transform: initial; }
            30% { transform: translateY(-10px); }
        }
    
        .user-message {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 1rem;
        }
    
        .assistant-message {
            display: flex;
            justify-content: flex-start;
            margin-bottom: 1rem;
        }
    
        .user-message .message-content,
        .assistant-message .message-content {
            max-width: max-content;
        }
    
        .user-message .message-content {
            background-color: hsl(var(--primary));
            color: hsl(var(--primary-foreground));
            margin-left: auto;
        }
        
        .preview-container {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            position: absolute;
            top: -60px;
            left: 20px;
          
        }
    
        .image-preview {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
           
            height: 60px;
        }
    
        .image-preview-item {
            position: relative;
            width: 50px;
            height: 50px;
        }
    
        .image-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 5px;
        }
    
        .image-remove-btn {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 20px;
            height: 20px;
            background-color: hsl(var(--background));
            border: 1px solid hsl(var(--border));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 12px;
            color: hsl(var(--foreground));
            transition: background-color 0.2s;
        }
    
        .image-remove-btn:hover {
            background-color: hsl(var(--destructive));
            color: hsl(var(--destructive-foreground));
        }

        .file-preview {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;       
            height: 50px;
            scrollbar-width: none;
        }
    
        .file-preview-item {
            position: relative;
            display: flex;
            align-items: center;
            background-color: hsl(var(--background));
            border: 0.5px solid hsl(var(--accent-foreground));
            border-radius: var(--radius);
            padding: 5px 10px;
            max-width: 200px;
        }
    
        .file-icon {
            margin-right: 5px;
            font-size: 1.2em;
        }
    
        .file-name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 150px;
        }
    
        .file-remove-btn {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 20px;
            height: 20px;
            background-color: hsl(var(--background));
            border: 1px solid hsl(var(--border));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 12px;
            color: hsl(var(--foreground));
            transition: background-color 0.2s;
        }
    
        .file-remove-btn:hover {
            background-color: hsl(var(--destructive));
            color: hsl(var(--destructive-foreground));
        }
    
        .icon-button {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: hsl(var(--secondary));
            border: 1px solid hsl(var(--border));
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.2s;
        }
    
        .icon-button:hover {
            background-color: hsl(var(--foreground)) / 0.1 !important;
            transform: scale(1.1);
        }
    
        .icon-button svg {
            width: 18px;
            height: 18px;
        }
    
        .input-container {
            display: flex;
            position: relative;
        }

        .prompt-title {
            color: hsl(var(--muted-foreground)); 
            margin-top: 2rem;  
            font-size: 1.2rem;
        }

        .prompt-suggestions {
            display: flex;
            flex-wrap: wrap;
            flex-flow: wrap;
            gap: 0.75rem;
            justify-content: center;
            align-items: center;
        }
        
        .prompt-button {
            background-color: var(--secondary);
            color: hsl(var(--muted-foreground));
            border: 1px solid hsl(var(--border));
            border-radius: 9999px;
            padding: 10px 15px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
        }
    
        .prompt-button:hover {
            background-color: hsl(var(--secondary) / 0.9);
        }
    
        #userInput {
            flex-grow: 1;
            padding: 0.75rem;
            padding-right: 4rem;
            border: 1px solid hsl(var(--border));
            border-radius: var(--radius);
            background-color: hsl(var(--background));
            color: hsl(var(--foreground));
            font-size: 1rem;
            line-height: 1.5;
            min-height: 3.5rem;
            max-height: 150px;
            overflow-y: auto;
            resize: none;
        }
    
        #userInput:focus {
            outline: none;
            border-color: hsl(var(--ring));
            box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
        }
    
        .send-btn {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            right: 0.5rem;
            bottom: 0.5rem;
            background-color: hsl(var(--primary));
            color: hsl(var(--primary-foreground));
            border: none;
            border-radius: var(--radius);
            padding: 0.5rem 1rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }
    
        .send-btn:hover {
            background-color: hsl(var(--primary) / 0.9);
        }

        .send-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }


        .stop-btn {
            display: none;
            background-color: hsl(var(--primary));
            color: hsl(var(--foreground));
            border: 1px solid hsl(var(--border));
            border-radius: var(--radius);
            cursor: pointer;
            transition: background-color 0.2s, color 0.2s;
            font-weight: 500;
            position: absolute;
            right: 0.5rem;
            bottom: 0.5rem;
            padding: 0.5rem 1rem;
            width: 50px;
            height: 34px;
        }

        .stop-btn:hover {
            background-color: hsl(var(--primary) / 0.9);
        }

        .stop-btn::before,
        .stop-btn::after {
            content: "";
            position: absolute;
            left: 1.1rem;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 50%;
        }

        .stop-btn::before {
            width: 0.75rem;
            height: 0.75rem;
            background-color: hsl(var(--card));
            animation: pulse 1s infinite;
        }

        .stop-btn::after {
            width: 1.25rem;
            height: 1.25rem;
            border: 2px solid hsl(var(--border));
            opacity: 0.5;
            left: 0.75rem;
        }

        @keyframes pulse {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
            100% {
                opacity: 1;
            }
        }

        .clear-context-message {
            position: relative;
            text-align: center;
            color: hsl(var(--muted-foreground));
            padding: 10px;
            border-radius: var(--radius);
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .clear-context-message:hover {
            background-color: hsl(var(--accent));
        }
        
        .clear-context-message .clear-text,
        .clear-context-message .revert-text {
            transition: opacity 0.3s;
        }
        
        .clear-context-message:hover .clear-text {
            opacity: 0;
        }
        
        .clear-context-message:hover .revert-text {
            opacity: 1;
        }
        
        .clear-context-message .revert-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
        }

        .user-info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
            margin-top: 15px;
            background-color: hsl(var(--muted));
            padding: 10px;
            border-radius: var(--radius);
            
        }
        
        .user-credits {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .user-credits svg {
            width: 20px;
            height: 20px;
        }
        
        #creditResetCountdown {
            font-size: 0.8em;
            color: hsl(var(--muted-foreground));
        }
        
        .user-plan {
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.8em;
            font-weight: bold;
        }
        
        .free { background-color: #e0e0e0; color: #333; }
        .starter { background-color: #a5d6a7; color: #1b5e20; }
        .pro { background-color: #90caf9; color: #0d47a1; }
        .business { background-color: #ffcc80; color: #e65100; }
        .enterprise { background-color: #ce93d8; color: #4a148c; }
        .partner { background-color: #f48fb1; color: #880e4f; }
        .admin { background-color: #ef9a9a; color: #b71c1c; }
        
        .message-cost {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.9em;
            color: #666;
            gap: 4px;
            margin-left: auto;    
            margin-right: 5px;
        }

        .message-cost svg {
            width: 16px;
            height: 16px;
        }

        .sidebar-container {
            display: flex;
            flex-direction: row;
            height: 100%;
            width: 410px;
            background-color: hsl(var(--background));
            border-right: 1px solid hsl(var(--border));
            transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
            z-index: 1500;
        }
    
        .sidebar-container.collapsed {
            width: 60px;
        }
    
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }

            .sidebar-container {
                position: fixed;
                flex-direction: row;
                height: 100%;
                width: 100%;
                z-index: 1500;
                display: none;
        
            }

            .navigation-sidebar {
                position: relative;
                width: 60px;
                height: 100%;
                flex-direction: column;
                padding: 0;
                background-color: hsl(var(--background));
                border-bottom: 1px solid hsl(var(--border));
                z-index: 1500;
            }

            .navigation-top {
                margin-top: 20px;
            }

            .navigation-bottom {
                margin-bottom: 70px;
            }

            .sidebar {
                position: relative;
                height: 100%;
                width: -webkit-fill-available;
                min-width: calc(100% - 60px);
                z-index: 1500;
                transition: transform 0.3s ease-in-out;
            }

            .sidebar.show {
                transform: translateX(0);
                left: unset;
                width: unset;
                min-width: 100%;
            }

            .main-content {
                width: 100%;
            }

            .toggle-sidebar {
                display: block;
            }

            .model-selector {
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .model-selector-content {
                min-width: 200px;
                max-width: 90vw;
                position: fixed;
                top: 60px;
                left: 10px;
                right: 10px;
                width: calc(100% - 20px);
            }

            .close-sidebar {
                display: block;
                width: 100%;
                padding: 1rem;
                background-color: hsl(var(--primary));
                color: hsl(var(--primary-foreground));
                border: none;
                cursor: pointer;
                font-size: 0.8rem;
                text-align: center;
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
            }

            .sidebar-section:nth-last-child(2) {
                margin-top: auto;
                margin-bottom: 50px;
            }

            .streaming-metrics {
                font-size: 0.7rem;
                flex-wrap: wrap;
                justify-content: space-around;
                gap: unset;
                padding: 0.5rem;
            }

            .streaming-metrics span {
                width: 48%;
                margin-bottom: 0.25rem;
            }

            .chat-item {
                width: 86vw;
            }

            .chat-welcome {
                font-size: 0.8rem;
                margin-top: 1.2rem;
            }

            .prompt-title {
                font-size: 0.7rem;
                margin-top: 4rem;
                padding: 0 1rem;
            }

            .prompt-suggestions {
                margin-bottom: 1vh;
            }

            .prompt-button {
                font-size: 0.75rem;
                padding: 8px 12px;
            }

            .chat-area {
                padding: 0.5rem;
            }

            .user-message .message-content,
            .assistant-message .message-content,
            .assistant-info,
            .user-message .message-header strong,
            .user-info,
            #userInput {
                font-size: 0.8rem;
            }
        }
    </style>
</head>
<body class="dark-mode">
    <div class="container">
        <div class="sidebar-container">
            <div class="navigation-sidebar">
                <div class="navigation-top">
                    <!-- Chat (Current) -->
                    <div class="navigation-item active" onclick="switchPlayground('chat')" title="Chat">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                        </svg>
                    </div>
                
                    <a href="https://image.nexusmind.tech/profile" class="navigation-item" title="Profile">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                        </svg>
                    </a>
                
                    <!-- Gallery -->
                    <a href="https://image.nexusmind.tech/gallery" class="navigation-item" title="Gallery">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                    </a>
                
                    <!-- Draw -->
                    <a href="https://image.nexusmind.tech/" class="navigation-item" title="Draw">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/>
                        </svg>
                    </a>
                
                    <!-- Home -->
                    <a href="https://www.nexusmind.tech/" class="navigation-item" title="Home">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
                        </svg>
                    </a>

                    <!-- API (New) -->
                    <a href="https://www.nexusmind.tech/partners" class="navigation-item" title="API">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
                        </svg>
                    </a>
                </div>
                <div class="navigation-bottom">
                    <button id="metricsToggle" class="icon-button" aria-label="Toggle metrics">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M3 3v18h18"></path>
                            <path d="M18.7 8l-5.1 5.2-2.8-2.7L7 14.3"></path>
                        </svg>
                    </button>
                    <button id="darkModeToggle" class="icon-button" aria-label="Toggle dark mode">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="12" cy="12" r="5"/>
                            <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
                        </svg>
                    </button>
                    <a href="https://discord.com/invite/sk8eddGwmP" target="_blank" class="icon-button" aria-label="Join our Discord">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
                        </svg>
                    </a>
                    <span class="version-text">v 1.0.8</span>
                </div>
            </div>
        
            <div class="sidebar">
                <button class="sidebar-collapse-btn" onclick="toggleSidebarCollapse()" title="Toggle sidebar">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="15 18 9 12 15 6"></polyline>
                    </svg>
                </button>
                
                <div class="sidebar-section">
                    <button class="btn btn-primary" style="width: 100%;" onclick="startNewChat()">+ New Chat</button>
                    <input type="text" class="input" style="margin-top: 0.5rem;" placeholder="Search">
                </div>
                <div class="sidebar-section">
                    <div class="sidebar-title">Chat History</div>
                    <div id="chatHistory" class="chat-history"></div>
                    <button id="loadMoreBtn" class="load-more">Load More</button>
                </div>
                <div class="sidebar-section" style="margin-top: auto;">
                    <button id="deleteAllBtn" class="btn btn-secondary" style="width: 100%; margin-top: 0.5rem;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="3 6 5 6 21 6"></polyline>
                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                            <line x1="10" y1="11" x2="10" y2="17"></line>
                            <line x1="14" y1="11" x2="14" y2="17"></line>
                        </svg>Delete All Conversations
                    </button>
                    <div style="display: flex; justify-content: space-between; margin-top: 0.5rem;">
      
                        <button class="btn btn-ghost" style="width: 100%;" onclick="openSettingsModal()">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="3"></circle>
                                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
                            </svg><span style="margin-left: 0.5rem;">Settings</span>
                        </button>
                    </div>
                 
                </div>
                <button class="close-sidebar" onclick="closeSidebar()">Close</button>
            </div>
        </div>
        
        <div class="main-content">
            <div class="header">
                <div class="model-selector">
                    <button class="model-selector-btn" id="modelSelectorBtn">
                    </button>
                    <div id="modelSelectorContent" class="model-selector-content">
                        <!-- Models will be dynamically loaded here -->
                    </div>
                    <div class="cf-turnstile" data-sitekey="0x4AAAAAAAzRsaZd0P9-qFot"></div>
                </div>
                <button class="toggle-sidebar" onclick="toggleSidebar()">☰</button>
            </div>
            <div class="chat-area" id="chatArea">
                <div class="chat-welcome">
                    <div class="chat-icon">
                        <img src="./images/openai.svg" alt="OpenAI" style="width: 64px; height: 64px; border-radius: 50%; object-fit: cover; position: relative;">
                    </div>
                    <h2>How can I help you?</h2>
                    <p class="prompt-title">Ask me anything or try these example prompts</p>
                    <div id="promptSuggestions" class="prompt-suggestions"></div>
                </div>
            </div>
            <div id="streamingMetrics" class="streaming-metrics">
                <span id="timeToFirstToken" style="font-weight: 600;">
                    <span style="color: hsl(var(--primary)); font-weight: 800;">0.00</span> SEC TO FIRST TOKEN
                </span>
                <span id="avgTokensPerSec" style="font-weight: 600;">
                    <span style="color: hsl(var(--primary)); font-weight: 800;">0.00</span> TOKENS/SEC
                </span>
                <span id="completionTokens" style="font-weight: 600;">
                    <span style="color: hsl(var(--primary)); font-weight: 800;">0</span> COMPLETION TOKENS
                </span>
                <span id="totalTokens" style="font-weight: 600;">
                    <span style="color: hsl(var(--primary)); font-weight: 800;">0</span> TOTAL TOKENS
                </span>
                <!-- <span id="totalTime" style="font-weight: 600;"></span> -->
            </div>
            <div class="input-area">
                <div class="input-icons">
                    <button class="icon-button" onclick="uploadFile()" aria-label="Upload file" id="uploadFileBtn" title="Upload file">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                            <polyline points="17 8 12 3 7 8"></polyline>
                            <line x1="12" y1="3" x2="12" y2="15"></line>
                        </svg>
                    </button>
                    <button class="icon-button" onclick="clearContext()" aria-label="Clear context" title="Clear context">
                        <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 36 36" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M31.155 3.99c-.234-.882-.81-1.62-1.602-2.088-.792-.468-1.71-.576-2.61-.342-.882.234-1.62.81-2.088 1.602l-6.264 10.854-3.024-3.024a1.328 1.328 0 0 0-1.836.486l-2.016 2.016c-.18.306-.234.684-.144 1.026.09.342.324.648.63.828l.558.324c-3.978 3.78-10.908 6.552-10.98 6.588-.468.18-.81.63-.846 1.134-.054.504.198.99.63 1.26l3.618 2.25c.342.216.756.27 1.134.144.054-.018.864-.288 1.926-.756-.18.27-.324.432-.324.432-.27.288-.396.702-.36 1.098.054.396.288.756.63.972l8.982 5.58c.216.144.468.198.72.198.288 0 .576-.09.81-.27.198-.162 4.734-3.672 6.732-11.322l.558.324a1.343 1.343 0 0 0 1.836-.486l2.016-3.474c.18-.306.234-.684.144-1.026a1.386 1.386 0 0 0-.63-.828l-3.978-2.286 6.264-10.854c.45-.81.576-1.746.342-2.628Z" transform="translate(1 1) scale(0.95)" />
                            <path d="M20.25 31.452a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5Z" transform="translate(4.5 2.5)" />
                            <path d="M24.3 24.9a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6Z" transform="translate(4 2)" />
                            <path d="M26.55 28.5a1.35 1.35 0 1 0 0-2.7 1.35 1.35 0 0 0 0 2.7Z" transform="translate(3.5 1.5)" />
                        </svg>
                    </button>
                    <button class="icon-button" onclick="toggleWebSearch()" aria-label="Toggle web search" title="Toggle web search">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10"></circle>
                            <line x1="2" y1="12" x2="22" y2="12"></line>
                            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
                        </svg>
                    </button>
                    <div id="messageCost" class="message-cost"></div>
                    
                </div>
                <div class="input-container">
                    <div id="userInput" class="input" contenteditable="true" data-placeholder="Ask anything ..."></div>
                    <button class="send-btn" onclick="sendMessage()" id="sendButton">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18">
                            <line x1="22" y1="2" x2="11" y2="13"></line>
                            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                        </svg>
                    </button>
                    <button class="stop-btn" onclick="stopStreaming()" id="stopButton"></button>
                </div>
                <div class="preview-container">
                    <div id="imagePreview" class="image-preview"></div>
                    <div id="filePreview" class="file-preview"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Settings Modal -->
    <div id="settingsModal" class="settings-modal">
        <div class="settings-modal-content">
            <h2>Settings</h2>
            <div class="settings-group">
                <label for="systemPromptInput">System Prompt:</label>
                <textarea id="systemPromptInput" class="input" rows="3"></textarea>
            </div>
            <div class="settings-group">
                <label for="historyLengthSlider">Chat History Length:</label>
                <div class="slider-container">
                    <span>2</span>
                    <input type="range" min="2" max="69" value="10" class="slider" id="historyLengthSlider">
                    <span>69</span>
                </div>
                <div class="slider-value">
                    <input type="number" id="historyLengthValue" min="2" max="69" value="10">
                </div>
            </div>
            <div class="settings-group">
                <label for="maxTokensSlider">Max Tokens:</label>
                <div class="slider-container">
                    <span>1</span>
                    <input type="range" min="1" max="10000" value="2000" class="slider" id="maxTokensSlider">
                    <span>10000</span>
                </div>
                <div class="slider-value">
                    <input type="number" id="maxTokensValue" min="1" max="10000" value="2000">
                </div>
            </div>
            <div class="settings-group">
                <label for="temperatureSlider">Temperature:</label>
                <div class="slider-container">
                    <span>0</span>
                    <input type="range" min="0" max="2" step="0.1" value="0.5" class="slider" id="temperatureSlider">
                    <span>2</span>
                </div>
                <div class="slider-value">
                    <input type="number" id="temperatureValue" min="0" max="2" step="0.1" value="0.5">
                </div>
            </div>
            <div class="settings-group">
                <label for="topPSlider">Top P:</label>
                <div class="slider-container">
                    <span>0</span>
                    <input type="range" min="0" max="1" step="0.1" value="1.0" class="slider" id="topPSlider">
                    <span>1</span>
                </div>
                <div class="slider-value">
                    <input type="number" id="topPValue" min="0" max="1" step="0.1" value="1.0">
                </div>
            </div>
            <div class="settings-group">
                <label for="topKSlider">Top K:</label>
                <div class="slider-container">
                    <span>0</span>
                    <input type="range" min="0" max="100" value="5" class="slider" id="topKSlider">
                    <span>100</span>
                </div>
                <div class="slider-value">
                    <input type="number" id="topKValue" min="0" max="100" value="5">
                </div>
            </div>
            <div class="settings-group">
                <label for="suggestRelatedQuestions">Suggest Related Questions:</label>
                <label class="switch">
                    <input type="checkbox" id="suggestRelatedQuestions">
                    <span class="slider-switch"></span>
                </label>
            </div>
            <div class="settings-group">
                <label for="aiGeneratedTitle">AI Generated Title:</label>
                <label class="switch">
                    <input type="checkbox" id="aiGeneratedTitle">
                    <span class="slider-switch"></span>
                </label>
            </div>
            <button class="btn btn-primary" style="margin-top: 1rem;" onclick="saveSettings()">Save Settings</button>
        </div>
    </div>
    <script>
        function setCookie(name, value, minutes) {
            const date = new Date();
            date.setTime(date.getTime() + (minutes * 60 * 1000));
            const expires = "expires=" + date.toUTCString();
            document.cookie = name + "=" + value + ";" + expires + ";path=/";
        }

        function getCookie(name) {
            const nameEQ = name + "=";
            const ca = document.cookie.split(';');
            for(let i = 0; i < ca.length; i++) {
                let c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }

        function deleteCookie(name) {
            document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/';
        }
        
        function onTurnstileSuccess(token) {
          console.log('Turnstile token:', token);
        }
  
        document.addEventListener('DOMContentLoaded', function() {
          console.log('All Cookies:', document.cookie);
          const sessionCookie = getCookie('session_id');
          console.log('Session Cookie:', sessionCookie);
          if (!sessionCookie) {
            //window.location.href = 'https://www.nexusmind.tech?error=login';
          }
          const metricsToggle = document.getElementById('metricsToggle');
            const streamingMetrics = document.getElementById('streamingMetrics');
            
            // Load saved preference
            const metricsHidden = localStorage.getItem('metricsHidden') === 'true';
            if (metricsHidden) {
                streamingMetrics.classList.add('hidden');
                metricsToggle.style.backgroundColor = '';
            } else {
                metricsToggle.style.backgroundColor = 'hsl(var(--primary))';
            }

            metricsToggle.addEventListener('click', function() {
                streamingMetrics.classList.toggle('hidden');
                const isHidden = streamingMetrics.classList.contains('hidden');
                localStorage.setItem('metricsHidden', isHidden);
                
                // Update button style
                metricsToggle.style.backgroundColor = isHidden ? '' : 'hsl(var(--primary))';
            });
        });
    </script>
    <script>
        // Deprecated setup
        let apiKey = localStorage.getItem('apiKey') || '';
        let chatHistory = [];
        let chatHistoryLength = parseInt(localStorage.getItem('chatHistoryLength')) || 10;
        let settings = {
            systemPrompt: localStorage.getItem('systemPrompt') || "You're helpful assistant that can help me with my questions. Today is {{local_date}}.",
            maxTokens: parseInt(localStorage.getItem('maxTokens')) || 2000,
            temperature: parseFloat(localStorage.getItem('temperature')) || 0.5,
            topP: parseFloat(localStorage.getItem('topP')) || 1.0,
            topK: parseInt(localStorage.getItem('topK')) || 5,
            suggestRelatedQuestions: localStorage.getItem('suggestRelatedQuestions') === 'true',
            aiGeneratedTitle: localStorage.getItem('aiGeneratedTitle') === 'false' 
        };
        //-------------------

        let BASE_URL = 'https://api.nexusmind.tech/nexus/v1';
        let currentChatId = null;
        let availableModels = [
        {
            "id": "gpt-3.5-turbo",
            "object": "model",
            "created": 1731473873,
            "owned_by": "openai",
            "tokens": 4000,
            "pricing": {
              "type": "per_token",
              "coefficient": 1
            },
            "endpoints": [
              "/v1/chat/completions"
            ],
            "premium_model": false,
            "metadata": {
              "vision": false,
              "function_call": false,
              "web_search": false
            }
          },
          {
            "id": "gpt-4o",
            "object": "model",
            "created": 1731473873,
            "owned_by": "openai",
            "tokens": 128000,
            "pricing": {
              "type": "per_token",
              "coefficient": 1.25
            },
            "endpoints": [
              "/v1/chat/completions"
            ],
            "premium_model": false,
            "metadata": {
              "vision": false,
              "function_call": false,
              "web_search": false
            }
          },
          {
            "id": "gpt-4o-mini",
            "object": "model",
            "created": 1731473873,
            "owned_by": "openai",
            "tokens": 128000,
            "pricing": {
              "type": "per_token",
              "coefficient": 1
            },
            "endpoints": [
              "/v1/chat/completions"
            ],
            "premium_model": false,
            "metadata": {
              "vision": false,
              "function_call": false,
              "web_search": false
            }
          },
          {
            "id": "o1-mini",
            "object": "model",
            "created": 1731473873,
            "owned_by": "openai",
            "tokens": 128000,
            "pricing": {
              "type": "per_token",
              "coefficient": 2
            },
            "endpoints": [
              "/v1/chat/completions"
            ],
            "premium_model": false,
            "metadata": {
              "vision": false,
              "function_call": false,
              "web_search": false
            }
          },
          {
            "id": "o1-preview",
            "object": "model",
            "created": 1731473873,
            "owned_by": "openai",
            "tokens": 128000,
            "pricing": {
              "type": "per_token",
              "coefficient": 3
            },
            "endpoints": [
              "/v1/chat/completions"
            ],
            "premium_model": false,
            "metadata": {
              "vision": false,
              "function_call": false,
              "web_search": false
            }
          },
          {
            "id": "claude-3-5-sonnet-20240620",
            "object": "model",
            "created": 1731473873,
            "owned_by": "anthropic",
            "tokens": 200000,
            "pricing": {
              "type": "per_token",
              "coefficient": 2
            },
            "endpoints": [
              "/v1/chat/completions"
            ],
            "premium_model": false,
            "metadata": {
              "vision": false,
              "function_call": false,
              "web_search": false
            }
          },
          {
            "id": "claude-3-5-sonnet-20241022",
            "object": "model",
            "created": 1731473873,
            "owned_by": "anthropic",
            "tokens": 200000,
            "pricing": {
              "type": "per_token",
              "coefficient": 2
            },
            "endpoints": [
              "/v1/chat/completions"
            ],
            "premium_model": false,
            "metadata": {
              "vision": false,
              "function_call": false,
              "web_search": false
            }
          },
          {
            "id": "claude-3-5-haiku-20241022",
            "object": "model",
            "created": 1731473873,
            "owned_by": "anthropic",
            "tokens": 200000,
            "pricing": {
              "type": "per_token",
              "coefficient": 2
            },
            "endpoints": [
              "/v1/chat/completions"
            ],
            "premium_model": false,
            "metadata": {
              "vision": false,
              "function_call": false,
              "web_search": false
            }
          },
          {
            "id": "gemini-1.5-pro",
            "object": "model",
            "created": 1731473873,
            "owned_by": "google",
            "tokens": 20000000,
            "pricing": {
              "type": "per_token",
              "coefficient": 2
            },
            "endpoints": [
              "/v1/chat/completions"
            ],
            "premium_model": false,
            "metadata": {
              "vision": false,
              "function_call": false,
              "web_search": false
            }
          },
          {
            "id": "llama-3.1-405b",
            "object": "model",
            "created": 1731473873,
            "owned_by": "meta",
            "tokens": 128000,
            "pricing": {
              "type": "per_token",
              "coefficient": 1.5
            },
            "endpoints": [
              "/v1/chat/completions"
            ],
            "premium_model": false,
            "metadata": {
              "vision": false,
              "function_call": false,
              "web_search": false
            }
          },
          {
            "id": "llama-3.2-90b",
            "object": "model",
            "created": 1731473873,
            "owned_by": "meta",
            "tokens": 128000,
            "pricing": {
              "type": "per_token",
              "coefficient": 1.5
            },
            "endpoints": [
              "/v1/chat/completions"
            ],
            "premium_model": false,
            "metadata": {
              "vision": false,
              "function_call": false,
              "web_search": false
            }
        }];
        let selectedModel = 'gpt-4o';
        let imagesUploaded = [];
        let filesUploaded = [];
        let webSearchEnabled = false;

        let userCredits = 0;
        let userPlan = '';
        let messageCost = 0;
        var countdownInterval;
        let currentController = null;
        const sendButton = document.getElementById('sendButton');
        const stopButton = document.getElementById('stopButton');

        let db;
        const DB_NAME = 'ChatAppDB';
        const DB_VERSION = 1;
        const CHAT_STORE = 'chatHistory';
        const SYSTEM_STORE = 'systemMessages';
        const SETTINGS_STORE = 'settings';

        function openDB() {
            return new Promise((resolve, reject) => {
                const request = indexedDB.open(DB_NAME, DB_VERSION);

                request.onerror = (event) => reject("IndexedDB error: " + event.target.error);

                request.onsuccess = (event) => {
                    db = event.target.result;
                    resolve(db);
                };

                request.onupgradeneeded = (event) => {
                    db = event.target.result;
                   
                    if (!db.objectStoreNames.contains(CHAT_STORE)) {
                        db.createObjectStore(CHAT_STORE, { keyPath: 'id' });
                    }
                    if (!db.objectStoreNames.contains(SYSTEM_STORE)) {
                        db.createObjectStore(SYSTEM_STORE, { keyPath: 'id' });
                    }
                    if (!db.objectStoreNames.contains(SETTINGS_STORE)) {
                        db.createObjectStore(SETTINGS_STORE, { keyPath: 'key' });
                    }
                };
            });
        }

        // Helper functions for IndexedDB operations
        async function getFromStore(storeName, key) {
            return new Promise((resolve, reject) => {
                const transaction = db.transaction(storeName, 'readonly');
                const store = transaction.objectStore(storeName);
                const request = store.get(key);
        
                request.onerror = () => reject(request.error);
                request.onsuccess = () => resolve(request.result);
            });
        }

        function putInStore(storeName, value) {
            return new Promise((resolve, reject) => {
                const transaction = db.transaction(storeName, 'readwrite');
                const store = transaction.objectStore(storeName);
                const request = store.put(value);

                request.onerror = () => reject(request.error);
                request.onsuccess = () => resolve(request.result);
            });
        }

        function deleteFromStore(storeName, key) {
            return new Promise((resolve, reject) => {
                const transaction = db.transaction(storeName, 'readwrite');
                const store = transaction.objectStore(storeName);
                const request = store.delete(key);

                request.onerror = () => reject(request.error);
                request.onsuccess = () => resolve(request.result);
            });
        }

        function getAllFromStore(storeName) {
            return new Promise((resolve, reject) => {
                const transaction = db.transaction(storeName, 'readonly');
                const store = transaction.objectStore(storeName);
                const request = store.getAll();

                request.onerror = () => reject(request.error);
                request.onsuccess = () => resolve(request.result);
            });
        }

        // Modified functions to use IndexedDB instead of localStorage
        async function saveChatToIndexedDB(role, content) {
            if (!currentChatId) {
                currentChatId = `Chat ${Date.now()}`;
            }
        
            let currentChat = await getFromStore(CHAT_STORE, currentChatId);
            
            if (!currentChat) {
                currentChat = { 
                    id: currentChatId, 
                    name: currentChatId, 
                    messages: [], 
                    model: selectedModel 
                };
            }
        
            if (role === 'system') {
                let systemMessages = await getFromStore(SYSTEM_STORE, currentChatId) || { id: currentChatId, messages: [] };
                systemMessages.messages.push(content);
                await putInStore(SYSTEM_STORE, systemMessages);
            } else if (role === 'clear') {
                currentChat.messages.push({ 
                    role, 
                    content: JSON.parse(content),
                    timestamp: new Date().toISOString() // Add timestamp to messages
                });
            } else {
                if (!currentChat.messages) {
                    currentChat.messages = [];
                }
                currentChat.messages.push({ 
                    role, 
                    content: JSON.parse(content),
                    timestamp: new Date().toISOString() // Add timestamp to messages
                });
            }
        
            await putInStore(CHAT_STORE, currentChat);
        
            // Generate title after the first assistant message
            if (settings.aiGeneratedTitle && currentChat.messages.length === 4 && role === 'assistant') {
                const apiMessages = [
                    { 'role': 'system', 'content': JSON.stringify(settings.systemPrompt.replace('{{local_date}}', new Date().toLocaleDateString())) },
                    ...currentChat.messages
                ];
                const title = await generateChatTitle(apiMessages);
                if (title) {
                    currentChat.name = title;
                    await putInStore(CHAT_STORE, currentChat);
                }
            }
        
           // updateChatHistorySidebar();
        }
        

        async function migrateLocalStorageToIndexedDB() {
            const migrationFlag = 'chatHistoryMigrated';
          
            // Check if migration has already been performed
            if (localStorage.getItem(migrationFlag)) {
              console.log('Migration has already been performed. Skipping...');
              return;
            }
          
            console.log('Starting migration from localStorage to IndexedDB...');
          
            // Retrieve chat history from localStorage
            const oldChatHistory = JSON.parse(localStorage.getItem('chatHistory') || '[]');
          
            if (oldChatHistory.length === 0) {
              console.log('No chat history found in localStorage. Skipping migration.');
              localStorage.setItem(migrationFlag, 'true');
              return;
            }
          
            // Migrate each chat to IndexedDB
            for (const chat of oldChatHistory) {
              const newChat = {
                id: chat.id || `Chat ${Date.now()}`,
                name: chat.name || `Chat ${Date.now()}`,
                messages: chat.messages || [],
                model: chat.model || 'gpt-4o'
              };
          
              await putInStore(CHAT_STORE, newChat);
            }
          
            // Migrate settings
            const oldSettings = {
              systemPrompt: localStorage.getItem('systemPrompt'),
              maxTokens: parseInt(localStorage.getItem('maxTokens')),
              temperature: parseFloat(localStorage.getItem('temperature')),
              topP: parseFloat(localStorage.getItem('topP')),
              topK: parseInt(localStorage.getItem('topK')),
              suggestRelatedQuestions: localStorage.getItem('suggestRelatedQuestions') === 'true',
              aiGeneratedTitle: localStorage.getItem('aiGeneratedTitle') === 'false'
            };
          
            await putInStore(SETTINGS_STORE, { key: 'settings', value: oldSettings });
          
            // Migrate other important data
            await putInStore(SETTINGS_STORE, { key: 'apiKey', value: localStorage.getItem('apiKey') });
            await putInStore(SETTINGS_STORE, { key: 'chatHistoryLength', value: parseInt(localStorage.getItem('chatHistoryLength') || '10') });
            await putInStore(SETTINGS_STORE, { key: 'darkMode', value: localStorage.getItem('darkMode') === 'true' });
          
            // Set migration flag
            localStorage.setItem(migrationFlag, 'true');
          
            console.log('Migration completed successfully.');
          }
          

        function toggleWebSearch() {
            webSearchEnabled = !webSearchEnabled;
            const webSearchButton = document.querySelector('.icon-button[aria-label="Toggle web search"]');
            if (webSearchEnabled) {
                webSearchButton.style.backgroundColor = 'hsl(var(--primary))';
                webSearchButton.style.color = 'hsl(var(--primary-foreground))';
            } else {
                webSearchButton.style.backgroundColor = '';
                webSearchButton.style.color = '';
            }
        }

        const allPrompts = [
            {
                summary: "Shakespeare's Influence",
                full: "Analyze the enduring influence of Shakespeare's works on modern literature and popular culture. How have his themes and characters been adapted and reinterpreted over time?"
            },
            {
                summary: "Quantum Computing",
                full: "Explain the principles of quantum computing and its potential to revolutionize fields such as cryptography, drug discovery, and financial modeling. What are the current challenges in its development?"
            },
            {
                summary: "Climate Change Solutions",
                full: "Evaluate the most promising technological solutions to combat climate change, such as carbon capture, renewable energy, and geoengineering. What are their potential impacts and limitations?"
            },
            {
                summary: "Ancient Philosophy",
                full: "Compare and contrast the philosophical ideas of Plato and Aristotle. How have their theories influenced Western thought and modern governance?"
            },
            {
                summary: "Artificial Intelligence Ethics",
                full: "Discuss the ethical implications of advanced AI systems in decision-making roles. How can we ensure AI development benefits humanity while minimizing potential risks?"
            },
            {
                summary: "Evolution of Language",
                full: "Explore the factors that contribute to language evolution. How do new words, expressions, and grammatical structures become part of a language over time?"
            },
            {
                summary: "Space Colonization",
                full: "Analyze the potential benefits and challenges of establishing a permanent human settlement on Mars. What technological and psychological hurdles must be overcome?"
            },
            {
                summary: "Economic Inequality",
                full: "Examine the causes and consequences of growing economic inequality in developed nations. What policy measures could effectively address this issue?"
            },
            {
                summary: "Biodiversity Conservation",
                full: "Discuss the importance of biodiversity in maintaining ecosystem stability. What are the main threats to biodiversity in the 21st century, and how can they be mitigated?"
            },
            {
                summary: "Renaissance Art Techniques",
                full: "Analyze the use of perspective and chiaroscuro in Renaissance art. How did these techniques revolutionize painting during this period?"
            },
            {
                summary: "Neuroscience of Consciousness",
                full: "Explore the current understanding of consciousness in neuroscience. What are the main theories and their implications for our concept of self and free will?"
            },
            {
                summary: "Sustainable Urban Planning",
                full: "Describe the key features of a sustainable city. How can urban planning address environmental, social, and economic challenges in the 21st century?"
            },
            {
                summary: "Classical Music Analysis",
                full: "Analyze the structure and emotional impact of Beethoven's Symphony No. 9. How does it reflect the composer's personal struggles and the cultural context of its time?"
            },
            {
                summary: "Soft Power in Geopolitics",
                full: "Discuss the concept of soft power in international relations. How do countries use cultural influence, education, and diplomacy to achieve foreign policy goals?"
            },
            {
                summary: "Evolutionary Adaptations",
                full: "Explain the concept of convergent evolution. Provide examples of how similar traits have evolved in unrelated species and discuss the driving forces behind this phenomenon."
            },
            {
                summary: "Architectural Movements",
                full: "Compare and contrast the principles of modernist and postmodernist architecture. How do these styles reflect changing cultural values and technological advancements?"
            },
            {
                summary: "Cybersecurity Challenges",
                full: "Discuss the importance of cybersecurity in the digital age. What are the most significant threats to digital privacy and security, and how can individuals and organizations protect themselves?"
            },
            {
                summary: "Philosophy of Mind",
                full: "Explore the mind-body problem in philosophy. How do different theories attempt to explain the relationship between consciousness and the physical brain?"
            },
            {
                summary: "Renewable Energy Transition",
                full: "Analyze the challenges and opportunities in transitioning to a 100% renewable energy economy. What policy and technological innovations are needed to achieve this goal?"
            },
            {
                summary: "Genetic Engineering Ethics",
                full: "Discuss the ethical implications of human genetic engineering. How should society balance the potential benefits with the risks and moral concerns?"
            },
            {
                summary: "Modern Monetary Theory",
                full: "Explain the key principles of Modern Monetary Theory (MMT) and its potential implications for economic policy. What are the main criticisms of this approach?"
            },
            {
                summary: "Quantum Entanglement",
                full: "Describe the phenomenon of quantum entanglement and its potential applications in quantum computing and communication. How does it challenge our understanding of physics?"
            },
            {
                summary: "Anthropocene Epoch",
                full: "Discuss the concept of the Anthropocene epoch. What evidence supports the idea that human activity has become the dominant influence on climate and the environment?"
            },
            {
                summary: "Behavioral Economics",
                full: "Explore how behavioral economics challenges traditional economic models. How can insights from psychology improve economic policy and business practices?"
            },
            {
                summary: "Artificial General Intelligence",
                full: "Analyze the prospects and potential impacts of achieving Artificial General Intelligence (AGI). What are the main approaches to developing AGI, and what are the associated risks?"
            },
            {
                summary: "Comparative Mythology",
                full: "Compare and contrast creation myths from different cultures. What common themes emerge, and what do these similarities and differences reveal about human societies?"
            },
            {
                summary: "Quantum Field Theory",
                full: "Explain the basic principles of Quantum Field Theory and its role in modern physics. How does it unite quantum mechanics and special relativity?"
            },
            {
                summary: "Bioethics in Medicine",
                full: "Discuss the ethical considerations in emerging medical technologies such as gene editing and artificial organ development. How should society balance innovation with ethical concerns?"
            },
            {
                summary: "Dark Matter and Energy",
                full: "Describe the current understanding of dark matter and dark energy in cosmology. What evidence supports their existence, and what are the leading theories about their nature?"
            },
            {
                summary: "Linguistic Relativity",
                full: "Explore the Sapir-Whorf hypothesis and linguistic relativity. To what extent does the language we speak shape our perception and cognition?"
            },
            {
                summary: "Blockchain Technology",
                full: "Analyze the potential applications of blockchain technology beyond cryptocurrencies. How might it transform industries such as finance, supply chain management, and voting systems?"
            },
            {
                summary: "Comparative Political Systems",
                full: "Compare and contrast different systems of government (e.g., democracy, autocracy, theocracy). What are the strengths and weaknesses of each in addressing societal needs?"
            },
            {
                summary: "Cognitive Enhancement",
                full: "Discuss the ethical and social implications of cognitive enhancement technologies. How might they affect concepts of fairness, identity, and human nature?"
            },
            {
                summary: "Exoplanet Exploration",
                full: "Describe the methods used to detect and study exoplanets. What have we learned about planetary formation and the potential for extraterrestrial life?"
            },
            {
                summary: "Information Theory",
                full: "Explain the fundamental concepts of information theory and its applications in fields such as data compression, cryptography, and quantum computing."
            },
            {
                summary: "Cultural Appropriation",
                full: "Analyze the concept of cultural appropriation in a globalized world. How can societies balance cultural exchange and respect for traditional practices and identities?"
            },
            {
                summary: "Nanotechnology Applications",
                full: "Explore the current and potential future applications of nanotechnology in medicine, electronics, and materials science. What are the associated risks and ethical considerations?"
            },
            {
                summary: "Game Theory in Society",
                full: "Discuss how game theory can be applied to understand social, political, and economic interactions. Provide examples of how it has been used to analyze real-world situations."
            },
            {
                summary: "Epigenetics",
                full: "Explain the field of epigenetics and its implications for our understanding of genetics, heredity, and evolution. How might epigenetic research impact medicine and public health?"
            },
            {
                summary: "Postcolonial Literature",
                full: "Analyze the themes and techniques commonly found in postcolonial literature. How do these works address issues of identity, power, and cultural heritage?"
            },
            {
                summary: "Fusion Energy",
                full: "Discuss the potential of fusion energy as a future power source. What are the current technological challenges, and how might they be overcome?"
            },
            {
                summary: "Moral Philosophy",
                full: "Compare consequentialist and deontological approaches to ethics. How do these frameworks differ in their approach to moral decision-making?"
            },
            {
                summary: "Cognitive Biases",
                full: "Explore common cognitive biases and their impact on decision-making. How can awareness of these biases improve critical thinking and problem-solving?"
            },
            {
                summary: "Synesthesia",
                full: "Describe the neurological phenomenon of synesthesia. What does research on synesthesia reveal about sensory perception and brain function?"
            },
            {
                summary: "Circular Economy",
                full: "Explain the concept of a circular economy and its potential to address environmental challenges. What changes in production and consumption are needed to achieve this model?"
            },
            {
                summary: "Comparative Religion",
                full: "Compare and contrast the concepts of salvation or enlightenment in major world religions. What commonalities and differences emerge?"
            },
            {
                summary: "Asteroid Mining",
                full: "Analyze the potential benefits and challenges of asteroid mining. How might it impact the global economy and space exploration efforts?"
            },
            {
                summary: "Memetics",
                full: "Discuss the theory of memetics and its application to understanding cultural evolution. How do ideas spread and evolve in a manner analogous to genes?"
            },
            {
                summary: "Quantum Cryptography",
                full: "Explain the principles of quantum cryptography and its potential to create unbreakable encryption. What are the current limitations and future prospects of this technology?"
            }
        ];

        function loadRandomPrompts() {
            const promptSuggestions = document.getElementById('promptSuggestions');
            promptSuggestions.innerHTML = '';

            const shuffled = [...allPrompts].sort(() => 0.5 - Math.random());
            const selectedPrompts = shuffled.slice(0, 3);

            selectedPrompts.forEach(prompt => {
                const button = document.createElement('button');
                button.className = 'prompt-button';
                button.textContent = prompt.summary;
                button.addEventListener('click', () => {
                document.getElementById('userInput').textContent = prompt.full;
                });
                promptSuggestions.appendChild(button);
            });
        }

        // Add this function to fetch and update message cost
        async function updateMessageCost() {
            try {
                const data = availableModels;
                const selectedModelData = data.find(model => model.id === selectedModel);
                if (selectedModelData) {
                    messageCost = selectedModelData.pricing.coefficient;
                    const creditIcon = `
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10"></circle>
                            <path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"></path>
                            <line x1="12" y1="6" x2="12" y2="18"></line>
                        </svg>
                    `;
                    document.getElementById('messageCost').innerHTML = `${messageCost} ${creditIcon} per token`;
                }
            } catch (error) {
                console.error('Error fetching message cost:', error);
            }
        }
        
        async function loadModels() {
            try {
                updateModelSelector();
            } catch (error) {
                console.error('Error loading models:', error);
            }
        }

        function getDefaultModelIcon() {
            return '<img src="./images/openai.svg" alt="OpenAI" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
        }

        function getModelIcon(model) {
            const ownedBy = model.owned_by.toLowerCase();
            if (ownedBy.includes('openai')) {
                return '<img src="./images/openai.svg" alt="OpenAI" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('anthropic')) {
                return '<img src="./images/anthropic.svg" alt="Anthropic" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('meta')) {
                return '<img src="./images/meta.png" alt="Meta" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('mistral')) {
                return '<img src="./images/mistral.svg" alt="MistralAI" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('google')) {
                return '<img src="./images/google.svg" alt="Google" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('alibaba')) {
                return '<img src="./images/qwen.png" alt="Qwen" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('cohere')) {
                return '<img src="./images/cohere.png" alt="Cohere" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('reka')) {
                return '<img src="./images/reka.jpg" alt="Reka" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('perplexity')) {
                return '<img src="./images/perplexity.png" alt="Perplexity" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('microsoft')) {
                return '<img src="./images/microsoft.png" alt="Microsoft" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('databricks')) {
                return '<img src="./images/databricks.png" alt="Databricks" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('nousresearch')) {
                return '<img src="./images/nousresearch.webp" alt="NousResearch" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('deepseekai')) {
                return '<img src="./images/deepseekai.png" alt="Deepseek" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('baidu')) {
                return '<img src="./images/baidu.png" alt="Baidu" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('tencent')) {
                return '<img src="./images/tencent.png" alt="Tencent" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('openchat')) {
                return '<img src="./images/openchat.png" alt="OpenChat" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('01ai')) {
                return '<img src="./images/01ai.jpg" alt="01AI" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('gryphe')) {
                return '<img src="./images/gryphe.png" alt="Gryphe" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('huggingface')) {
                return '<img src="./images/hf.svg" alt="Hugging Face" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('phind')) {
                return '<img src="./images/phind.webp" alt="Phind" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('nvidia')) {
                return '<img src="./images/nvidia.webp" alt="Nvidia" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('zhipuai')) {
                return '<img src="./images/zhipuai.png" alt="ZhipuAI" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('amazon')) {
                return '<img src="./images/amazon.webp" alt="Amazon" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('x-ai')) {
                return '<img src="./images/x-ai.png" alt="X-AI" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('tsinghua')) {
                return '<img src="./images/tsinghua.png" alt="Tsinghua" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('cognitivecomputations')) {
                return '<img src="./images/cognitivecomputations.webp" alt="Cognitive Computations" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('openbmb')) {
                return '<img src="./images/openbmb.png" alt="OpenBMB" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('iflytek')) {
                return '<img src="./images/iflytek.png" alt="iFlyTek" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('bytedance')) {
                return '<img src="./images/bytedance.webp" alt="ByteDance" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('ai21')) {
                return '<img src="./images/ai21.png" alt="AI21" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('darksideofthemoon')) {
                return '<img src="./images/darksideofthemoon.webp" alt="DarkSideOfTheMoon" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('upstage')) {
                return '<img src="./images/upstage.png" alt="Upstage" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('flagalpha')) {
                return '<img src="./images/flagalpha.png" alt="FlagAlpha" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else if (ownedBy.includes('pawan')) {
                return '<img src="./images/pawan.webp" alt="Pawan" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            } else {
                return '<img src="./images/nexusai.png" alt="Unknown" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; position: relative;">';
            }
        }

          // Modify the toggleModelSelector function
        function toggleModelSelector() {
            const modelSelectorContent = document.getElementById("modelSelectorContent");
            modelSelectorContent.classList.toggle("show");
            
            // Adjust position for mobile
            if (window.innerWidth <= 768) {
                const header = document.querySelector('.header');
                const headerRect = header.getBoundingClientRect();
                modelSelectorContent.style.top = `${headerRect.bottom}px`;
            } else {
                modelSelectorContent.style.top = '100%';
            }
        }
        
        document.getElementById("modelSelectorBtn").addEventListener("click", (event) => {
            event.stopPropagation();
            toggleModelSelector();
        });
        
        document.addEventListener("click", (event) => {
            if (!event.target.matches('.model-selector-btn') && !event.target.closest('.model-selector-content')) {
                const modelSelectorContent = document.getElementById("modelSelectorContent");
                if (modelSelectorContent.classList.contains('show')) {
                    modelSelectorContent.classList.remove('show');
                }
            }
        });

        function updateModelSelector() {
            const modelSelectorContent = document.getElementById("modelSelectorContent");
            modelSelectorContent.innerHTML = `
              <div class="model-search-container">
                <input type="text" id="modelSearch" class="model-search-input" placeholder="Search models...">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="search-icon">
                  <circle cx="11" cy="11" r="8"></circle>
                  <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>
              </div>
            `;
            availableModels.forEach(model => {
              if (model.endpoints.includes('/v1/chat/completions')) {
                const modelLink = document.createElement('a');
                modelLink.style.cursor = 'pointer';
                modelLink.style.transition = 'background-color 0.2s';
                modelLink.innerHTML = `
                  <span class="model-icon" style="padding-right: 5px;">${getModelIcon(model)}</span>
                  ${model.id}
                  ${model.metadata && model.metadata.vision ? '<span style="margin-left: auto;">👁️</span>' : ''}
                  ${model.metadata && model.metadata.vision ? 
                  `<span style="margin-left: 7px;">${model.tokens >= 1000000 ? 
                      Math.round(model.tokens / 1000000) + 'M' : 
                      Math.round(model.tokens / 1000) + 'k'
                  }</span>` : 
                  `<span style="margin-left: auto;">${model.tokens >= 1000000 ? 
                      Math.round(model.tokens / 1000000) + 'M' : 
                      Math.round(model.tokens / 1000) + 'k'
                  }</span>`
                  }
                `;
                modelLink.onclick = (e) => {
                  e.stopPropagation();
                  selectModel(model.id);
                };
                modelSelectorContent.appendChild(modelLink);
              }
            });
        
            const modelSearch = document.getElementById('modelSearch');
            const modelSearchContainer = document.querySelector('.model-search-container');
            modelSearch.addEventListener('input', filterModels);
            modelSearchContainer.addEventListener('click', (e) => e.stopPropagation());
          }

        function filterModels() {
            const searchTerm = document.getElementById('modelSearch').value.toLowerCase();
            const modelLinks = document.querySelectorAll('#modelSelectorContent a');
        
            modelLinks.forEach(link => {
              const modelName = link.textContent.toLowerCase();
              if (modelName.includes(searchTerm)) {
                link.style.display = 'flex';
              } else {
                link.style.display = 'none';
              }
            });
        }

        function selectModel(modelId) {
            selectedModel = modelId;
            const model = availableModels.find(m => m.id === modelId);
            const modelIcon = model ? getModelIcon(model) : getDefaultModelIcon();
            
            document.getElementById("modelSelectorBtn").innerHTML = `
                <span class="model-icon">${modelIcon}</span>
                <span id="selectedModel">${modelId}</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
            `;
            
            updateChatIcon(modelId);
            updateMessageCost();
        
            // Close the model selector modal
            const modelSelectorContent = document.getElementById("modelSelectorContent");
            modelSelectorContent.classList.remove('show');
        }
        
        // Add this function to update the current chat's model
        async function updateCurrentChatModel(modelId) {
            if (currentChatId) {
                const currentChat = await getFromStore(CHAT_STORE, currentChatId);
                if (currentChat) {
                    currentChat.model = modelId;
                    await putInStore(CHAT_STORE, currentChat);
                }
            }
        }
        

        function updateChatIcon(modelId) {
            const chatIcon = document.querySelector('.chat-icon');
            if (chatIcon) {
                const model = availableModels.find(m => m.id === modelId);
                if (model) {
                    chatIcon.innerHTML = getModelIcon(model);
                    chatIcon.getElementsByTagName('img')[0].style.width = '64px';
                    chatIcon.getElementsByTagName('img')[0].style.height = '64px';
                }
            }
        }

        function toggleApiKeyVisibility() {
            const apiKeyInput = document.getElementById("apiKeyInput");
            const eyeIcon = document.getElementById("eyeIcon");
            if (apiKeyInput.type === "password") {
                apiKeyInput.type = "text";
                eyeIcon.innerHTML = `
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: hsl(var(--muted-foreground));">
                        <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
                        <line x1="1" y1="1" x2="23" y2="23"></line>
                    </svg>
                `;
            } else {
                apiKeyInput.type = "password";
                eyeIcon.innerHTML = `
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: hsl(var(--muted-foreground));">
                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                        <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                `;
            }
        }

        function stopStreaming() {
            if (currentController) {
                currentController.abort();
                const sendButton = document.getElementById('sendButton');
                const stopButton = document.getElementById('stopButton');
                sendButton.style.display = 'inline-flex';
                stopButton.style.display = 'none';
            }
        }

        function renderMarkdown(content) {
            const rendered = marked.parse(content);
            const highlighted = hljs.highlightAuto(rendered).value;
            return highlighted;
        }

        function appendMessage(role, content, model) {
            const chatArea = document.getElementById('chatArea');
            const messageContainer = document.createElement('div');
            messageContainer.className = `message-container ${role}-message`;
            
            const messageHeader = document.createElement('div');
            messageHeader.className = 'message-header';
            
            if (role === 'assistant') {
                const modelData = availableModels.find(m => m.id === model) || { id: model };
                const modelIcon = getModelIcon(modelData);
                messageHeader.innerHTML = `
                    <div class="assistant-info">
                        <span class="model-icon">${modelIcon}</span>
                        <span>${model}</span>
                    </div>
                `;
            } else {
                messageHeader.innerHTML = '<strong>You</strong>';
            }
            
            const messageActions = document.createElement('div');
            messageActions.className = 'message-actions';
            messageActions.innerHTML = `
                <button class="btn btn-secondary message-action" onclick="copyMessage(this)">📋</button>
                <button class="btn btn-secondary message-action" onclick="editMessage(this)">✒️</button>
                <button class="btn btn-secondary message-action" onclick="deleteMessage(this)">🗑️</button>
                <button class="btn btn-secondary message-action" onclick="retryMessage(this)">  
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.3"/>
                    </svg>
                </button>
            `;
            messageHeader.appendChild(messageActions);
            
            const messageContent = document.createElement('div');
            messageContent.className = 'message-content';
            messageContent.innerHTML = processMarkdown(content);
            
            messageContainer.appendChild(messageHeader);
            messageContainer.appendChild(messageContent);
            chatArea.appendChild(messageContainer);
            
            setupCopyButtons(messageContent);
            renderLaTeX(); 
            chatArea.scrollTop = chatArea.scrollHeight;
        }
        function isTokenExpired(token) {
            try {
                // Turnstile tokens are JWTs - split and decode the payload
                const payload = JSON.parse(atob(token.split('.')[1]));
                // Check if the token has expired (exp is in seconds)
                return payload.exp * 1000 < Date.now();
            } catch (error) {
                console.error('Error checking token expiration:', error);
                return true; // Assume expired if there's an error
            }
        }

        async function waitForTurnstileToken(timeout = 5000) {
            return new Promise((resolve, reject) => {
                const startTime = Date.now();
                
                function checkToken() {
                    // Check if we already have a valid session token
                    const sessionToken = getCookie('turnstile_session');
                    if (sessionToken && !isTokenExpired(sessionToken)) {
                        resolve(sessionToken);
                        return;
                    }

                    // If session token is expired or missing, clear it and get a new one
                    if (sessionToken) {
                        deleteCookie('turnstile_session');
                        turnstile.reset();
                    }

                    // Get new token from Turnstile
                    const token = document.querySelector('.cf-turnstile input[name="cf-turnstile-response"]')?.value;
                    
                    if (token) {
                        // Set session cookie with the token
                        setCookie('turnstile_session', token, 30); // 30 minutes expiry
                        resolve(token);
                    } else if (Date.now() - startTime >= timeout) {
                        reject(new Error('Turnstile verification timed out'));
                    } else {
                        setTimeout(checkToken, 100);
                    }
                }

                checkToken();
            });
        }
        async function streamOpenAIRequest(messages, webSearch = false) {
            let turnstileToken = '';
            try {
                turnstileToken = await waitForTurnstileToken();
            } catch (error) {
                console.error('Turnstile verification failed:', error);
                throw new Error('Security verification failed. Please try again.');
            }
            const url = `${BASE_URL}/chat/completions`;
            const headers = {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${apiKey}`
            };

            sendButton.style.display = 'none';
            stopButton.style.display = 'inline-flex';

            // Create a new AbortController
            currentController = new AbortController();
            const signal = currentController.signal;

            for (let i = 0; i < messages.length; i++) {
                if (typeof messages[i].content === 'string') {
                    messages[i].content = JSON.parse(messages[i].content);
                }
            }
        
            const lastClearContextIndex = messages.map((message, index) => message.role === 'clear' ? index : -1)
                                      .filter(index => index !== -1)
                                      .pop();
        
            let messagesToSend;
            let fullResponse = '';

            if (lastClearContextIndex !== undefined) {
                messagesToSend = messages.slice(lastClearContextIndex + 1);
            } else {
                messagesToSend = messages;
            }
        
            const body = JSON.stringify({
                model: selectedModel,
                messages: messagesToSend.map(msg => {
                    if (Array.isArray(msg.content)) {
                        const formattedContent = [];
                        let currentText = '';
                
                        msg.content.forEach(item => {
                            if (item.type === 'file') {
                                currentText += (currentText ? '\n\n' : '') + `File: ${item.name}\nContent: ${item.content}`;
                            } else if (item.type === 'text') {
                                currentText += (currentText ? '\n\n' : '') + item.text;
                            } else if (item.type === 'image_url') {
                                if (currentText) {
                                    formattedContent.push({
                                        type: "text",
                                        text: currentText
                                    });
                                    currentText = '';
                                }
                                formattedContent.push({
                                    type: "image_url",
                                    image_url: {
                                        url: item.image_url.url
                                    }
                                });
                            }
                        });
                
                        if (currentText) {
                            formattedContent.push({
                                type: "text",
                                text: currentText
                            });
                        }
                
                        return {
                            role: msg.role,
                            content: formattedContent
                        };
                    }
                    return msg;
                }),
                stream: true,
                stream_options: {
                    include_usage: true
                },
                max_tokens: settings.maxTokens,
                temperature: settings.temperature,
                top_p: settings.topP,
                top_k: settings.topK,
                web_search: webSearch,
                turnstile_token: turnstileToken,
                session: getCookie('session_id')
            });
            try {
                const response = await fetch(url, {
                    method: 'POST',
                    headers: headers,
                    body: body,
                    signal: signal
                });
        
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status} 
                    <br>
                    ${await response.text()}`
                    );
                }
        
                const reader = response.body.getReader();
                const decoder = new TextDecoder('utf-8');
        
                let aiResponseElement;
                let aiResponseContent;
        
                const createAssistantMessageContainer = () => {
                    aiResponseElement = document.createElement('div');
                    aiResponseElement.className = 'message-container assistant-message';
                    aiResponseElement.innerHTML = `
                        <div class="message-header">
                            <div class="assistant-info">
                                <span class="model-icon
                                ">${getModelIcon(availableModels.find(m => m.id === selectedModel))}</span>
                                <span>${selectedModel}</span>
                            </div>
                            <div class="message-actions">
                                <button class="btn btn-secondary message-action" onclick="copyMessage(this)">📋</button>
                                <button class="btn btn-secondary message-action" onclick="editMessage(this)">✒️</button>
                                <button class="btn btn-secondary message-action" onclick="deleteMessage(this)">🗑️</button>
                                <button class="btn btn-secondary message-action" onclick="retryMessage(this)">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.3"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                        <div class="message-content"><span class="wave-dots"><span></span><span></span><span></span></span></div>
                    `;
        
                    document.getElementById('chatArea').appendChild(aiResponseElement);
                    aiResponseContent = aiResponseElement.querySelector('.message-content');
                };
        
                createAssistantMessageContainer();
                document.getElementById('chatArea').scrollTo(0, document.getElementById('chatArea').scrollHeight);
        
                const startTime = Date.now();
                let firstTokenTime = null;
                let approximateTokenCount = 0;
                let usageInfo = null;
        
                while (true) {
                    const { done, value } = await reader.read();
                    if (done) {
                        break;
                    }
                    
                    const chunk = decoder.decode(value);
                    const lines = chunk.split('\n');
                    
                    for (const line of lines) {
                        if (line.startsWith('data: ')) {
                            const jsonData = line.slice(6);
                            if (jsonData.trim() === '[DONE]') {
                                console.log('Stream finished');
                                aiResponseContent.innerHTML = processMarkdown(fullResponse);
                                await saveChatToIndexedDB('assistant', JSON.stringify([{ 'type': 'text', 'text': fullResponse}]));
                                
                                setupCopyButtons(aiResponseContent);
                                renderLaTeX(); 
        
                                // Update final metrics
                                const endTime = Date.now();
                                const totalTime = (endTime - startTime) / 1000;
                                const finalTokenCount = usageInfo ? usageInfo.completion_tokens : approximateTokenCount;
                                const totalTokensForConversation = usageInfo ? usageInfo.total_tokens : null;
                                updateStreamingMetrics(firstTokenTime, finalTokenCount, totalTime, totalTokensForConversation);

                                // Re-enable send button and hide stop button
                                sendButton.disabled = false;
                                stopButton.style.display = 'none';
                                currentController = null;
        
                                return;
                            }
                            try {
                                const parsedData = JSON.parse(jsonData);
                                if (parsedData.choices && parsedData.choices[0].delta.content) {
                                    const content = parsedData.choices[0].delta.content;
                                    if (fullResponse === '') {
                                        aiResponseContent.innerHTML = '';
                                        firstTokenTime = (Date.now() - startTime) / 1000;
                                    }
                                    fullResponse += content;
                                    approximateTokenCount = Math.floor(fullResponse.length / 4);
                                    aiResponseContent.innerHTML = processMarkdown(fullResponse);
                                    const cursorSpan = document.createElement('span');
                                    cursorSpan.className = 'blinking-cursor';
                                    aiResponseContent.lastChild.remove();
                                    aiResponseContent.appendChild(cursorSpan);
        
                                    // Update streaming metrics in real-time
                                    const currentTime = (Date.now() - startTime) / 1000;
                                    updateStreamingMetrics(firstTokenTime, approximateTokenCount, currentTime, null);
                                }
                                if (parsedData.usage) {
                                    usageInfo = parsedData.usage;
                                }
                            } catch (error) {
                                console.error('Error parsing JSON:', error);
                            }
                            document.getElementById('chatArea').scrollTo(0, document.getElementById('chatArea').scrollHeight);
                        }
                    }
                }
                    
            } catch (error) {
                if (error.name === 'AbortError') {
                    console.log('Request was aborted');
                    if (document.querySelector('.blinking-cursor')) {
                        document.querySelector('.blinking-cursor').remove();
                    }
                    await saveChatToIndexedDB('assistant', JSON.stringify([{ 'type': 'text', 'text': fullResponse}]));
                } else {
                    console.error('Error:', error);
                    const errorContainer = document.createElement('div');
                    errorContainer.className = 'message-container assistant-message';
                    errorContainer.innerHTML = `
                        <div class="message-header">
                            <div class="assistant-info">
                                <span class="model-icon">${getModelIcon(availableModels.find(m => m.id === selectedModel))}</span>
                                <span>${selectedModel}</span>
                            </div>
                            <div class="message-actions">
                                <button class="btn btn-secondary message-action" onclick="copyMessage(this)">📋</button>
                                <button class="btn btn-secondary message-action" onclick="editMessage(this)">✒️</button>
                                <button class="btn btn-secondary message-action" onclick="deleteMessage(this)">🗑️</button>
                                <button class="btn btn-secondary message-action" onclick="retryMessage(this)">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.3"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                        <div class="message-content">
                            <strong>Error:</strong> 
                            <p style="background-color: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); padding: 0.5rem; border-radius: var(--radius);">${error.message}</p>
                        </div>
                    `;
                    document.getElementById('chatArea').appendChild(errorContainer);
                }
            } finally {
                // Re-enable send button and hide stop button
                sendButton.style.display = 'inline-flex';
                stopButton.style.display = 'none';
                currentController = null;
            }
        }
        
        function updateStreamingMetrics(timeToFirstToken, latestResponseTokens, totalTime, totalTokensForConversation) {
            const avgTokensPerSec = latestResponseTokens !== 'N/A' ? (latestResponseTokens / totalTime).toFixed(2) : 'N/A';
        
            document.getElementById('timeToFirstToken').innerHTML = `<span style="color: hsl(var(--primary)); font-weight: 800;">${timeToFirstToken ? timeToFirstToken.toFixed(2) : 'N/A'}</span> SEC TO FIRST TOKEN`;
            //document.getElementById('totalTime').innerHTML = `<span style="color: hsl(var(--primary)); font-weight: 800;">${totalTime.toFixed(2)}</span> SEC ELAPSED`;
            document.getElementById('avgTokensPerSec').innerHTML = `<span style="color: hsl(var(--primary)); font-weight: 800;">${avgTokensPerSec}</span> TOKENS/SEC`;
            document.getElementById('completionTokens').innerHTML = `<span style="color: hsl(var(--primary)); font-weight: 800;">${latestResponseTokens}</span> COMPLETION TOKENS`;
            
            // Update the tokens metric
            const totalTokens = document.getElementById('totalTokens');
            if (totalTokensForConversation !== null) {
                totalTokens.innerHTML = `<span style="color: hsl(var(--primary)); font-weight: 800;">${totalTokensForConversation}</span> TOTAL TOKENS`;
            } else {
                totalTokens.innerHTML = `<span style="color: hsl(var(--primary)); font-weight: 800;">N/A</span> TOTAL TOKENS`;
            }
        }

        function processMarkdown(content) {
            if (!content) return '';
        
            const regexes = {
                link: /\[([^\]]+)\]\(([^)]+)\)/g,
                codeBlock: /```(\w+)?\n([\s\S]*?)```/g,
                inlineCode: /`([^`\n]+)`/g,
                bulletPoint: /^- (.+)$/gm,
                header: /^(#{1,6}) (.+)$/gm,
                table: /\|(.+?)\|/g,
                bold: /\*\*(.+?)\*\*/g,
                italic: /\*(.+?)\*/g,
                underline: /\_\_(.+?)\_\_/g,
                specialLatex: /\\\(([\s\S]+?)\\\)/g,
                displayLatex: /\$\$([^$]+)\$\$|\\\[([\s\S]*?)\\\]/g,
                inlineLatex: /\$([^$\n]+)\$|\\$$([\s\S]*?)\\$$/g,
                undelimitedLatex: /\\[a-zA-Z]+(?:\{(?:[^{}]+|\{(?:[^{}]+|\{[^{}]*\})*\})*\})*|\\[^a-zA-Z]/g,
                numberedList: /^(\d+)\. (.+)$/gm
            };
        
            function subRenderLatex(latex, displayMode = false) {
                try {
                    latex = latex.replace(/<br>/g, '').replace(/\\\\/g, '\\');
                    return katex.renderToString(latex, {
                        displayMode: displayMode,
                        throwOnError: false
                    });
                } catch (e) {
                    console.error('KaTeX error:', e);
                    return latex;
                }
            }
        
            let processedContent = content
                .replace(regexes.codeBlock, (match, language, code) => 
                    `<div class="markdown-content"><pre><code class="language-${language || ''}">${hljs.highlightAuto(code.trim(), [language]).value.replace(/\n/g, '<br>')}</code></pre><button class="copy-btn">Copy</button></div>`
                );
        
            const lines = processedContent.split('\n');
            let bulletPointHtml = '';
            let inBulletPoint = false;
        
            for (const line of lines) {
                if (regexes.bulletPoint.test(line)) {
                    if (!inBulletPoint) {
                        bulletPointHtml += '<ul style="list-style-type: disc; padding-left: 20px;">';
                        inBulletPoint = true;
                    }
                    bulletPointHtml += `<li>${line.replace(regexes.bulletPoint, '$1')}</li>`;
                } else {
                    if (inBulletPoint) {
                        bulletPointHtml += '</ul>';
                        inBulletPoint = false;
                    }
                    bulletPointHtml += `${line}<br>`;
                }
            }
        
            if (inBulletPoint) {
                bulletPointHtml += '</ul>';
            }
        
            processedContent = bulletPointHtml
                .replace(regexes.link, '<a href="$2" target="_blank" rel="noopener noreferrer" style="font-weight: bold; color: #9494fa; text-decoration: none;">$1</a>')
                .replace(/<table>/g, '|')
                .replace(/<\/table>/g, '|')
                .replace(regexes.specialLatex, (_, latex) => subRenderLatex(latex))
                .replace(regexes.displayLatex, (_, latex1, latex2) => subRenderLatex(latex1 || latex2, true))
                .replace(regexes.inlineLatex, (_, latex1, latex2) => subRenderLatex(latex1 || latex2))
                .replace(regexes.undelimitedLatex, match => subRenderLatex(match))
                .replace(regexes.inlineCode, '<code>$1</code>')
                .replace(regexes.numberedList, '<ol style="padding-left: 20px;"><li>$2</li></ol>')
                .replace(regexes.header, (_, hashes, text) => `<h${hashes.length} style="text-transform: uppercase;">${text}</h${hashes.length}>`)
                .replace(regexes.bold, '<strong>$1</strong>')
                .replace(regexes.italic, '<em>$1</em>')
                .replace(regexes.underline, '<u>$1</u>');
        
            if (regexes.table.test(processedContent)) {
                const rows = processedContent.split('<br>');
                let tableHtml = '<table>';
                let isHeader = true;
        
                for (const row of rows) {
                    if (row.trim().startsWith('|') && row.trim().endsWith('|')) {
                        const cells = row.split('|').filter(cell => cell.trim() !== '');
                        if (isHeader) {
                            tableHtml += '<tr>' + cells.map(cell => `<th>${cell.trim()}</th>`).join('') + '</tr>';
                            isHeader = false;
                        } else {
                            tableHtml += '<tr>' + cells.map(cell => `<td>${cell.trim()}</td>`).join('') + '</tr>';
                        }
                    }
                }
        
                tableHtml += '</table>';
                processedContent = processedContent.replace(regexes.table, tableHtml);
            }
        
            return processedContent;
        }

        // Function to render LaTeX in the chat area
        function renderLaTeX() {
            renderMathInElement(document.getElementById('chatArea'), {
                delimiters: [
                    {left: "$$", right: "$$", display: true},
                    {left: "$", right: "$", display: false}
                ],
                throwOnError: false
            });
        }

        async function generateChatTitle(messages) {
            const titlePrompt = "Generate a three to four words title summarizing our conversation. Respond with only the title and without any date, symbols or additional text. Remove enclosing quotation marks. IGNORE and do not include this prompt when generating title at any cost.\n\n";
            let turnstileToken = '';
            try {
                turnstileToken = await waitForTurnstileToken();
            } catch (error) {
                console.error('Turnstile verification failed:', error);
                throw new Error('Security verification failed. Please try again.');
            }
            const apiMessages = [
                ...messages,
                { role: 'user', content: JSON.stringify([{ type: 'text', text: titlePrompt }]) }
            ];
        
            const response = await fetch(`${BASE_URL}/chat/completions`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${apiKey}`
                },
                body: JSON.stringify({
                    model: selectedModel,
                    messages: apiMessages.map(msg => {
                        if (Array.isArray(msg.content)) {
                            const formattedContent = [];
                            let currentText = '';
                    
                            msg.content.forEach(item => {
                                if (item.type === 'file') {
                                    currentText += (currentText ? '\n\n' : '') + `File: ${item.name}\nContent: ${item.content}`;
                                } else if (item.type === 'text') {
                                    currentText += (currentText ? '\n\n' : '') + item.text;
                                } else if (item.type === 'image_url') {
                                    if (currentText) {
                                        formattedContent.push({
                                            type: "text",
                                            text: currentText
                                        });
                                        currentText = '';
                                    }
                                    formattedContent.push({
                                        type: "image_url",
                                        image_url: {
                                            url: item.image_url.url
                                        }
                                    });
                                }
                            });
                    
                            if (currentText) {
                                formattedContent.push({
                                    type: "text",
                                    text: currentText
                                });
                            }
                    
                            return {
                                role: msg.role,
                                content: formattedContent
                            };
                        }
                        return msg;
                    }),
                    stream: false,
                    max_tokens: 30,
                    temperature: 0.7,
                    turnstile_token: turnstileToken,
                    session: getCookie('session_id')
                })
            });
        
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json();
            return data.choices[0].message.content.trim();
        }

        function setupCopyButtons(container) {
            const copyButtons = container.querySelectorAll('.copy-btn');
            copyButtons.forEach(button => {
                button.addEventListener('click', () => {
                    const codeBlock = button.previousElementSibling;
                    const code = codeBlock.querySelector('code').innerText;
                    navigator.clipboard.writeText(code).then(() => {
                        button.textContent = 'Copied!';
                        setTimeout(() => {
                            button.textContent = 'Copy';
                        }, 2000);
                    });
                });
            });
        }

        async function copyMessage(button) {
            // save current chat history to IndexedDB
            const chat = await getFromStore(CHAT_STORE, currentChatId);
            const messageIndex = Array.from(document.getElementById('chatArea').children).indexOf(button.closest('.message-container'));

            let textToCopy = '';
            try {
                const message = chat.messages[messageIndex].content;
                textToCopy = message.map(item => item.text).join('\n');
            } catch (error) {
                console.error('Error copying message:', error);
                textToCopy = button.closest('.message-container').querySelector('.message-content').innerText;
            }
            navigator.clipboard.writeText(textToCopy).then(() => {
                alert('Message copied to clipboard!');
            });
        }

        function editMessage(button) {
            const messageContainer = button.closest('.message-container');
            const messageContent = messageContainer.querySelector('.message-content');
            
            // Check if the message is already in edit mode
            if (messageContent.querySelector('.edit-interface')) {
                return; // If already in edit mode, do nothing
            }
            
            const originalContent = messageContent.innerHTML;

            // Create edit interface
            const editInterface = document.createElement('div');
            editInterface.className = 'edit-interface';
            editInterface.innerHTML = `
                <textarea class="edit-textarea">${messageContent.innerText}</textarea>
                <div class="edit-actions">
                    <button class="btn btn-secondary" onclick="cancelEdit(this)">Cancel</button>
                    <button class="btn btn-primary" onclick="saveEdit(this)">Save</button>
                </div>
            `;

            // Replace message content with edit interface
            messageContent.innerHTML = '';
            messageContent.appendChild(editInterface);

            // Store original content for potential cancellation
            messageContent.dataset.originalContent = originalContent;

            // Focus on the textarea
            editInterface.querySelector('.edit-textarea').focus();
        }

        function saveEdit(button) {
            const editInterface = button.closest('.edit-interface');
            const messageContent = editInterface.closest('.message-content');
            const editedContent = editInterface.querySelector('.edit-textarea').value;

            // Update message content
            messageContent.innerHTML = processMarkdown(editedContent);

            // Update chat history in localStorage
            updateChatHistoryAfterEdit(messageContent, editedContent);
        }

        function cancelEdit(button) {
            const editInterface = button.closest('.edit-interface');
            const messageContent = editInterface.closest('.message-content');

            // Restore original content
            messageContent.innerHTML = messageContent.dataset.originalContent;
        }
        
        async function updateChatHistoryAfterEdit(messageContent, editedContent) {
            const messageContainer = messageContent.closest('.message-container');
            const chatArea = document.getElementById('chatArea');
            const messageIndex = Array.from(chatArea.children).indexOf(messageContainer);
        
            if (currentChatId) {
                const currentChat = await getFromStore(CHAT_STORE, currentChatId);
                if (currentChat && currentChat.messages.length > messageIndex) {
                    currentChat.messages[messageIndex].content = [{ type: 'text', text: editedContent }];
                    await putInStore(CHAT_STORE, currentChat);
                }
            }
        }
                
        async function deleteMessage(button) {
            if (confirm('Are you sure you want to delete this message?')) {
                const messageContainer = button.closest('.message-container');
                const chatArea = document.getElementById('chatArea');
                const messageIndex = Array.from(chatArea.children).indexOf(messageContainer);
                
                // Remove the message from the UI
                messageContainer.remove();
                
                // Remove the message from chatHistory in IndexedDB
                if (currentChatId) {
                    const currentChat = await getFromStore(CHAT_STORE, currentChatId);
                    if (currentChat && currentChat.messages.length > messageIndex) {
                        currentChat.messages.splice(messageIndex, 1);
                        await putInStore(CHAT_STORE, currentChat);
                    }
                }
            }
        }

        async function retryMessage(button) {
            const messageContainer = button.closest('.message-container');
            const chatArea = document.getElementById('chatArea');
            const messageIndex = Array.from(chatArea.children).indexOf(messageContainer);
            
            if (messageContainer.classList.contains('user-message')) {
                // Case 1: Retry user message
                if (messageIndex < chatArea.children.length - 1) {
                    chatArea.removeChild(chatArea.children[messageIndex + 1]); // Remove assistant's response
                }
                const userMessage = messageContainer.querySelector('.message-content').innerText;
                chatArea.removeChild(messageContainer); // Remove user's message
                
                // Remove messages from chatHistory in IndexedDB
                if (currentChatId) {
                    const currentChat = await getFromStore(CHAT_STORE, currentChatId);
                    if (currentChat) {
                        currentChat.messages.splice(messageIndex, 2);
                        await putInStore(CHAT_STORE, currentChat);
                    }
                }
                
                // Re-send the user's message
                document.getElementById('userInput').innerText = userMessage;
                sendMessage();
            } else if (messageContainer.classList.contains('assistant-message')) {
                // Case 2: Retry assistant message
                if (messageIndex > 0) {
                    const userMessageContainer = chatArea.children[messageIndex - 1];
                    const userMessage = userMessageContainer.querySelector('.message-content').innerText;
                    
                    chatArea.removeChild(userMessageContainer); // Remove user's message
                    chatArea.removeChild(messageContainer); // Remove assistant's message
                    
                    // Remove messages from chatHistory in IndexedDB
                    if (currentChatId) {
                        const currentChat = await getFromStore(CHAT_STORE, currentChatId);
                        if (currentChat) {
                            currentChat.messages.splice(messageIndex - 1, 2);
                            await putInStore(CHAT_STORE, currentChat);
                        }
                    }
                    
                    // Re-send the user's message
                    document.getElementById('userInput').innerText = userMessage;
                    sendMessage();
                }
            }
        }

        function generateChatName() {
            const adjectives = [
                "Curious", "Brilliant", "Cosmic", "Mystic", "Quantum", "Creative", 
                "Digital", "Electric", "Stellar", "Dynamic", "Infinite", "Vibrant",
                "Ethereal", "Luminous", "Nebulous", "Radiant", "Serene", "Zenith",
                "Astral", "Celestial", "Enigmatic", "Harmonic", "Lunar", "Solar"
            ];
            
            const nouns = [
                "Explorer", "Voyager", "Discovery", "Journey", "Quest", "Odyssey",
                "Venture", "Horizon", "Galaxy", "Nexus", "Prism", "Cipher",
                "Phoenix", "Atlas", "Oracle", "Pulse", "Echo", "Vision",
                "Beacon", "Chronicle", "Meridian", "Zenith", "Nova", "Cosmos"
            ];

            const adjective = adjectives[Math.floor(Math.random() * adjectives.length)];
            const noun = nouns[Math.floor(Math.random() * nouns.length)];
            const number = Math.floor(Math.random() * 90 + 10); // Generates number between 10-99
            
            return `${adjective} ${noun} ${number}`;
        }

        async function sendMessage() {
            const userInput = document.getElementById('userInput');
            const chatArea = document.getElementById('chatArea');
            const message = userInput.innerText.trim();
            
            if (message) {
                if (chatArea.querySelector('.chat-welcome')) {
                    chatArea.innerHTML = '';
                }
        
                let messages = [];
        
                if (message) {
                    messages.push({
                        type: "text",
                        text: message
                    });
                    appendMessage('user', message);
                }

                // Include uploaded files
                filesUploaded.forEach(file => {
                    messages.push({
                        type: "file",
                        name: file.name,
                        content: file.content
                    });
                    const lastMessage = chatArea.lastElementChild;
                    lastMessage.querySelector('.message-content').innerHTML += `
                        <div><strong>File:</strong> ${file.name}</div>
                    `;
                });

                if (imagesUploaded.length > 0) {
                    imagesUploaded.forEach(image => {
                        messages.push({
                            type: "image_url",
                            image_url: {
                                url: image
                            }
                        });
                        const lastMessage = chatArea.lastElementChild;
                        lastMessage.querySelector('.message-content').innerHTML += `
                            <div><img src="${image}" style="max-width: 100%; border-radius: var(--radius);"></div>
                        `;
                    });
                }
                
                userInput.innerText = '';
                document.getElementById('imagePreview').innerHTML = '';
                document.getElementById('filePreview').innerHTML = '';
                
                let currentChat;
                if (currentChatId) {
                    currentChat = await getFromStore(CHAT_STORE, currentChatId);
                } else {
                    currentChatId = generateChatName();
                    currentChat = { id: currentChatId, name: currentChatId, messages: [], model: selectedModel };
                }
        
                const chatMessages = currentChat ? currentChat.messages.slice(-chatHistoryLength) : [];
                const apiMessages = [
                    { 'role': 'system', 'content': JSON.stringify(settings.systemPrompt.replace('{{local_date}}', new Date().toLocaleDateString())) },
                    ...chatMessages,
                    { 'role': 'user', 'content': JSON.stringify(messages) }
                ];
        
                await saveChatToIndexedDB('user', JSON.stringify(messages));
        
                try {
                    filesUploaded = [];
                    imagesUploaded = [];
                    await streamOpenAIRequest(apiMessages, webSearchEnabled);
        
                    // Update user credits and message cost after sending a message
  
                    await updateMessageCost();
        
                    // Update the model in IndexedDB after sending the message
                    await updateCurrentChatModel(selectedModel);
        
                    // Update chat history sidebar without causing a flash
                    await updateChatHistorySidebar();
                } catch (error) {
                    console.error('Error:', error);
                    filesUploaded = [];
                    imagesUploaded = [];
                    updateFilePreview();
                    document.getElementById('imagePreview').innerHTML = '';
                    document.getElementById('chatArea').innerHTML += `
                        <div style="margin-bottom: 1rem;">
                            <strong>Error:</strong> 
                            <p style="background-color: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); padding: 0.5rem; border-radius: var(--radius);">${error.message}</p>
                        </div>
                    `;
                    
                }
                
                filesUploaded = [];
                imagesUploaded = [];
            }
        }
        
        
        function searchChats() {
            const searchInput = document.querySelector('.sidebar-section input[type="text"]');
            const searchTerm = searchInput.value.toLowerCase();
            const chatHistoryElement = document.getElementById('chatHistory');
            const chatItems = chatHistoryElement.querySelectorAll('.chat-item');
        
            chatItems.forEach(item => {
                const chatName = item.querySelector('button').textContent.toLowerCase();
                if (chatName.includes(searchTerm)) {
                    item.style.display = 'flex';
                } else {
                    item.style.display = 'none';
                }
            });
        
            // Update "Load More" button visibility
            const loadMoreBtn = document.getElementById('loadMoreBtn');
            const visibleChats = chatHistoryElement.querySelectorAll('.chat-item[style="display: flex;"]');
        }

        // Add event listener to search input
        document.querySelector('.sidebar-section input[type="text"]').addEventListener('input', searchChats);

        
        async function updateChatHistorySidebar() {
            const chatHistoryElement = document.getElementById('chatHistory');
            
            const scrollPosition = chatHistoryElement.scrollTop;
            
            chatHistoryElement.innerHTML = '';
            
            const allChats = await getAllFromStore(CHAT_STORE);
            // Sort chats by most recent first
            const sortedChats = allChats.sort((a, b) => {
                const aLastMessage = a.messages[a.messages.length - 1];
                const bLastMessage = b.messages[b.messages.length - 1];
                const aTime = aLastMessage ? new Date(aLastMessage.timestamp || 0) : new Date(0);
                const bTime = bLastMessage ? new Date(bLastMessage.timestamp || 0) : new Date(0);
                return bTime - aTime; // Reverse chronological order
            });
            
            sortedChats.forEach(chat => {
                const chatItem = document.createElement('div');
                chatItem.className = 'chat-item';
                chatItem.innerHTML = `
                    <button class="btn btn-ghost" style="width: 100%; justify-content: flex-start;" onclick="loadChat('${chat.id}')">${chat.name}</button>
                    <div class="chat-item-actions">
                        <button class="chat-item-action" onclick="renameChat('${chat.id}')">✒️</button>
                        <button class="chat-item-action" onclick="deleteChat('${chat.id}')">🗑️</button>
                    </div>
                `;
                chatHistoryElement.appendChild(chatItem);
            });
            
            // Remove the loadMoreBtn element
            const loadMoreBtn = document.getElementById('loadMoreBtn');
            if (loadMoreBtn) {
                loadMoreBtn.style.display = 'none';
            }
            
            // Reset search input and show all chats
            const searchInput = document.querySelector('.sidebar-section input[type="text"]');
            searchInput.value = '';
            searchChats();
        }

        
        async function clearContext() {
            if (currentChatId) {
                const currentChat = await getFromStore(CHAT_STORE, currentChatId);
                if (currentChat) {
                    await saveChatToIndexedDB('clear', JSON.stringify([{ 'type': 'clear', 'text': [] }]));
                    const clearMessage = document.createElement('div');
                    clearMessage.className = 'clear-context-message';
                    clearMessage.innerHTML = `
                        <span class="clear-text">Context Cleared</span>
                        <span class="revert-text">Revert Action</span>
                    `;
                    clearMessage.addEventListener('click', () => revertClearContext(clearMessage));
                    document.getElementById('chatArea').appendChild(clearMessage);
                }
            }
        }
        
        async function revertClearContext(clearMessage) {
            if (currentChatId) {
                const currentChat = await getFromStore(CHAT_STORE, currentChatId);
                if (currentChat) {
                    const clearIndex = currentChat.messages.findIndex(msg => msg.content[0].type === 'clear');
                    if (clearIndex !== -1) {
                        currentChat.messages.splice(clearIndex, 1);
                        await putInStore(CHAT_STORE, currentChat);
                        clearMessage.remove();
                    }
                }
            }
        }
    
        function setupRevertActionButtons() {
            const clearMessages = document.querySelectorAll('.clear-context-message');
            clearMessages.forEach(message => {
                const revertBtn = message.querySelector('.revert-action-btn');
                message.addEventListener('mouseenter', () => {
                    revertBtn.style.display = 'block';
                });
                message.addEventListener('mouseleave', () => {
                    revertBtn.style.display = 'none';
                });
                revertBtn.addEventListener('click', () => revertClearContext(message));
            });
        }
        
        async function loadChat(chatId) {
            if (currentController) {
                stopStreaming();
            }

            currentChatId = chatId;
            const chat = await getFromStore(CHAT_STORE, chatId);
            if (chat) {
                const chatArea = document.getElementById('chatArea');
                chatArea.innerHTML = '';
         
                chat.messages.forEach(message => {
                    console.log(message);
                    if (Array.isArray(message.content)) {
                        message.content.forEach(content => {
                            if (content.type === 'text') {
                       
                                    appendMessage(message.role, content.text, message.model || chat.model);
                                
                            } else if (content.type === 'image_url') {
                                const lastMessage = chatArea.lastElementChild;
                                lastMessage.querySelector('.message-content').innerHTML += `
                                    <div><img src="${content.image_url.url}" style="max-width: 100%; border-radius: var(--radius);"></div>
                                `;
                            } else if (content.type === 'file') {
                                const lastMessage = chatArea.lastElementChild;
                                lastMessage.querySelector('.message-content').innerHTML += `
                                    <div><strong>File:</strong> ${content.name}</div>
                                `;
                            } else if (content.type === 'clear') {
                                const clearMessage = document.createElement('div');
                                clearMessage.className = 'clear-context-message';
                                clearMessage.innerHTML = `
                                    <span class="clear-text">Context Cleared</span>
                                    <span class="revert-text">Revert Action</span>
                                `;
                                clearMessage.addEventListener('click', () => revertClearContext(clearMessage));
                                chatArea.appendChild(clearMessage);
                            }
                        });
                    } else {
                        appendMessage(message.role, message.content, message.model || chat.model);
                    }
                });
                setupCopyButtons(chatArea);
                selectModel(chat.model);
                if (window.innerWidth < 768) {
                    closeSidebar();
                }
            }
        }

        async function renameChat(chatId) {
            const chat = await getFromStore(CHAT_STORE, chatId);
            if (chat) {
                const newName = prompt('Enter new name for the chat:', chat.name);
                if (newName && newName.trim() !== '') {
                    chat.name = newName.trim();
                    await putInStore(CHAT_STORE, chat);
                    updateChatHistorySidebar();
                }
            }
        }
        
        async function deleteChat(chatId) {
            if (confirm('Are you sure you want to delete this chat?')) {
                await deleteFromStore(CHAT_STORE, chatId);
                await deleteFromStore(SYSTEM_STORE, chatId);
                if (currentChatId === chatId) {
                    currentChatId = null;
                    document.getElementById('chatArea').innerHTML = '';
                }
                updateChatHistorySidebar();
            }
        }

        function startNewChat() {
            if (currentController) {
                stopStreaming();
            }
            
            currentChatId = null;
            document.getElementById('chatArea').innerHTML = '';
            document.getElementById('userInput').innerText = '';
            document.getElementById('chatArea').innerHTML = `
                <div class="chat-welcome">
                    <div class="chat-icon">AI</div>
                    <h2>How can I help you?</h2>
                    <p class="prompt-title">Ask me anything or try these example prompts</p>
                    <div id="promptSuggestions" class="prompt-suggestions"></div>
                </div>
            `;
            updateChatIcon(selectedModel);
            loadRandomPrompts();
            if (window.innerWidth < 768) {
                closeSidebar();
            }
        }

        // Update the loadMoreChats function to work with IndexedDB
        async function loadMoreChats() {
            const chatHistoryElement = document.getElementById('chatHistory');
            const currentChatCount = chatHistoryElement.children.length;
            const allChats = await getAllFromStore(CHAT_STORE);
            const reversedChats = allChats.reverse();
            const nextChats = reversedChats.slice(currentChatCount, currentChatCount + 50);
            
            nextChats.forEach(chat => {
                const chatItem = document.createElement('div');
                chatItem.className = 'chat-item';
                chatItem.innerHTML = `
                    <button class="btn btn-ghost" style="width: 100%; justify-content: flex-start;" onclick="loadChat('${chat.id}')">${chat.name}</button>
                    <div class="chat-item-actions">
                        <button class="chat-item-action" onclick="renameChat('${chat.id}')">✒️</button>
                        <button class="chat-item-action" onclick="deleteChat('${chat.id}')">🗑️</button>
                    </div>
                `;
                chatHistoryElement.appendChild(chatItem);
            });

            if (allChats.length <= chatHistoryElement.children.length) {
                document.getElementById('loadMoreBtn').style.display = 'none';
            }

            // Apply search filter after loading more chats
            searchChats();
        }


        async function deleteAllConversations() {
            if (confirm('Are you sure you want to delete all conversations? This action cannot be undone.')) {
                const allChats = await getAllFromStore(CHAT_STORE);
                for (const chat of allChats) {
                    await deleteFromStore(CHAT_STORE, chat.id);
                    await deleteFromStore(SYSTEM_STORE, chat.id);
                }
                currentChatId = null;
                document.getElementById('chatArea').innerHTML = '';
                updateChatHistorySidebar();
            }
        }

        function openSettingsModal() {
            document.getElementById('settingsModal').style.display = 'block';
            document.getElementById('systemPromptInput').value = settings.systemPrompt;
            document.getElementById('historyLengthSlider').value = chatHistoryLength;
            document.getElementById('historyLengthValue').value = chatHistoryLength;
            document.getElementById('maxTokensSlider').value = settings.maxTokens;
            document.getElementById('maxTokensValue').value = settings.maxTokens;
            document.getElementById('temperatureSlider').value = settings.temperature;
            document.getElementById('temperatureValue').value = settings.temperature;
            document.getElementById('topPSlider').value = settings.topP;
            document.getElementById('topPValue').value = settings.topP;
            document.getElementById('topKSlider').value = settings.topK;
            document.getElementById('topKValue').value = settings.topK;
            document.getElementById('suggestRelatedQuestions').checked = settings.suggestRelatedQuestions;
            document.getElementById('aiGeneratedTitle').checked = settings.aiGeneratedTitle;
        }

        async function saveSettings() {
            settings.systemPrompt = document.getElementById('systemPromptInput').value;
            chatHistoryLength = parseInt(document.getElementById('historyLengthValue').value);
            settings.maxTokens = parseInt(document.getElementById('maxTokensValue').value);
            settings.temperature = parseFloat(document.getElementById('temperatureValue').value);
            settings.topP = parseFloat(document.getElementById('topPValue').value);
            settings.topK = parseInt(document.getElementById('topKValue').value);
            settings.suggestRelatedQuestions = document.getElementById('suggestRelatedQuestions').checked;
            settings.aiGeneratedTitle = document.getElementById('aiGeneratedTitle').checked;
        
            await putInStore(SETTINGS_STORE, { key: 'settings', value: settings });
            await putInStore(SETTINGS_STORE, { key: 'chatHistoryLength', value: chatHistoryLength });
        
            document.getElementById('settingsModal').style.display = 'none';
        }

        function updateSliderValue(sliderId, valueId) {
            const slider = document.getElementById(sliderId);
            const value = document.getElementById(valueId);
            value.value = slider.value;
        }

        function updateSliderFromValue(valueId, sliderId) {
            const value = document.getElementById(valueId);
            const slider = document.getElementById(sliderId);
            slider.value = value.value;
        }

        function uploadImage() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            input.onchange = e => {
                const file = e.target.files[0];
                const reader = new FileReader();
                reader.onload = event => {
                    const base64Image = event.target.result;
                    imagesUploaded.push(base64Image);
                    updateImagePreview();
                };
                reader.readAsDataURL(file);
            };
            input.click();
        }


        function updateImagePreview() {
            const previewArea = document.getElementById('imagePreview');
            previewArea.innerHTML = '';
            imagesUploaded.forEach((image, index) => {
                const previewItem = document.createElement('div');
                previewItem.className = 'image-preview-item';
                
                const img = document.createElement('img');
                img.src = image;
                
                const removeBtn = document.createElement('button');
                removeBtn.className = 'image-remove-btn';
                removeBtn.innerHTML = '×';
                removeBtn.onclick = () => removeImage(index);
                
                previewItem.appendChild(img);
                previewItem.appendChild(removeBtn);
                previewArea.appendChild(previewItem);
            });
        }

        function removeImage(index) {
            imagesUploaded.splice(index, 1);
            updateImagePreview();
        }


        async function uploadFile() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = '.pdf,.txt,.docx,.doc,.js,.ts,.py,.html,.csv,.xlsx,.xls,.pptx,.json,.xml,.yaml,.yml,.md,.java,.c,.cs,.cpp,.rs,.go,.php,.rb,.sh,.sql';
            input.multiple = true;
            input.onchange = async (e) => {
                const files = Array.from(e.target.files);
                if (files.length + filesUploaded.length > 4) {
                    alert('You can only upload up to 4 files at a time.');
                    return;
                }
                
                for (const file of files) {
                    try {
                        const content = await parseFile(file);
                        filesUploaded.push({
                            name: file.name,
                            content: content,
                            type: file.type
                        });
                        updateFilePreview();
                    } catch (error) {
                        console.error(`Error parsing file ${file.name}:`, error);
                        alert(`Error parsing file ${file.name}. Please try again.`);
                    }
                }
            };
            input.click();
        }

        async function parseFile(file) {
            const extension = file.name.split('.').pop().toLowerCase();
            const buffer = await file.arrayBuffer();
            
            switch (extension) {
                case 'pdf':
                    return await parsePDF(buffer);
                case 'docx':
                    return await parseDocx(buffer);
                case 'txt':
                case 'js':
                case 'ts':
                case 'py':
                case 'html':
                case 'java':
                case 'c':
                case 'cs':
                case 'cpp':
                case 'rs':
                case 'go':
                case 'php':
                case 'rb':
                case 'sh':
                case 'sql':
                case 'json':
                case 'xml':
                case 'yaml':
                case 'yml':
                case 'md':
                    return await parseTextFile(file);
                case 'csv':
                    return await parseCSV(buffer);
                case 'xlsx':
                case 'xls':
                    return await parseExcel(buffer);
                case 'pptx':
                    return await parsePPTX(buffer);
                default:
                    throw new Error('Unsupported file type');
            }
        }
        

        async function parsePDF(buffer) {
            const pdf = await pdfjsLib.getDocument({data: buffer}).promise;
            let text = '';
            for (let i = 1; i <= pdf.numPages; i++) {
                const page = await pdf.getPage(i);
                const content = await page.getTextContent();
                text += content.items.map(item => item.str).join(' ') + '\n';
            }
            return text;
        }
        
        async function parseDocx(buffer) {
            const result = await mammoth.extractRawText({buffer});
            return result.value;
        }

        async function parseTextFile(file) {
            return await file.text();
        }
        
        async function parseCSV(buffer) {
            const text = new TextDecoder().decode(buffer);
            const lines = text.split('\n').filter(line => line.trim() !== '');
            if (lines.length === 0) {
                return "Empty CSV file";
            }
            const headers = lines[0].split(',').map(header => header.trim());
            const result = lines.slice(1).map(line => {
                const values = line.split(',');
                return headers.reduce((obj, header, index) => {
                    obj[header] = values[index] ? values[index].trim() : '';
                    return obj;
                }, {});
            });
            return JSON.stringify(result, null, 2);
        }

        async function parseExcel(buffer) {
            const workbook = XLSX.read(buffer, {type: 'array'});
            const result = {};
            workbook.SheetNames.forEach(sheetName => {
                result[sheetName] = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
            });
            return JSON.stringify(result, null, 2);
        }

        async function parsePPTX(buffer) {
            const zip = new JSZip();
            await zip.loadAsync(buffer);
            let text = '';

            // Extract text from slides
            const slideFiles = Object.keys(zip.files).filter(filename => filename.startsWith('ppt/slides/slide'));
            for (const slideFile of slideFiles) {
                const slideContent = await zip.file(slideFile).async('string');
                const textMatches = slideContent.match(/<a:t>(.+?)<\/a:t>/g);
                if (textMatches) {
                    text += textMatches.map(match => match.replace(/<\/?a:t>/g, '')).join('\n') + '\n\n';
                }
            }

            return text.trim();
        }

        function updateFilePreview() {
            const previewArea = document.getElementById('filePreview');
            previewArea.innerHTML = '';
            filesUploaded.forEach((file, index) => {
                const previewItem = document.createElement('div');
                previewItem.className = 'file-preview-item';
                
                const fileIcon = document.createElement('span');
                fileIcon.className = 'file-icon';
                fileIcon.textContent = getFileIcon(file.name);
                
                const fileName = document.createElement('span');
                fileName.className = 'file-name';
                fileName.textContent = file.name;
                
                const removeBtn = document.createElement('button');
                removeBtn.className = 'file-remove-btn';
                removeBtn.innerHTML = '×';
                removeBtn.onclick = () => removeFile(index);
                
                previewItem.appendChild(fileIcon);
                previewItem.appendChild(fileName);
                previewItem.appendChild(removeBtn);
                previewArea.appendChild(previewItem);
            });
        }
        
        function getFileIcon(fileName) {
            const extension = fileName.split('.').pop().toLowerCase();
            switch (extension) {
                case 'pdf': return '📄';
                case 'txt': return '📝';
                case 'docx':
                case 'doc': return '📃';
                case 'js':
                case 'ts': return '📦';
                case 'py': return '🐍';
                case 'html': return '🌐';
                case 'css': return '🎨';
                case 'csv':
                case 'xlsx':
                case 'xls': return '📊';
                case 'pptx': return '🖼';
                case 'json':
                case 'xml':
                case 'yaml':
                case 'yml':
                case 'md': return '📄';
                case 'java': return '☕';
                case 'c': return '🅒';
                case 'cs': return '©️';
                case 'cpp': return '🅒';
                case 'rs': return '🦀';
                case 'go': return '🐹';
                case 'php': return '🐘';
                case 'rb': return '💎';
                case 'sh': return '🔒';
                case 'sql': return '💾';
                default: return '📁';
            }
        }
        

        function removeFile(index) {
            filesUploaded.splice(index, 1);
            updateFilePreview();
        }
        

        document.getElementById('historyLengthSlider').addEventListener('input', () => updateSliderValue('historyLengthSlider', 'historyLengthValue'));
        document.getElementById('historyLengthValue').addEventListener('input', () => updateSliderFromValue('historyLengthValue', 'historyLengthSlider'));

        document.getElementById('maxTokensSlider').addEventListener('input', () => updateSliderValue('maxTokensSlider', 'maxTokensValue'));
        document.getElementById('maxTokensValue').addEventListener('input', () => updateSliderFromValue('maxTokensValue', 'maxTokensSlider'));

        document.getElementById('temperatureSlider').addEventListener('input', () => updateSliderValue('temperatureSlider', 'temperatureValue'));
        document.getElementById('temperatureValue').addEventListener('input', () => updateSliderFromValue('temperatureValue', 'temperatureSlider'));

        document.getElementById('topPSlider').addEventListener('input', () => updateSliderValue('topPSlider', 'topPValue'));
        document.getElementById('topPValue').addEventListener('input', () => updateSliderFromValue('topPValue', 'topPSlider'));

        document.getElementById('topKSlider').addEventListener('input', () => updateSliderValue('topKSlider', 'topKValue'));
        document.getElementById('topKValue').addEventListener('input', () => updateSliderFromValue('topKValue', 'topKSlider'));

        document.getElementById('userInput').addEventListener('keydown', function(event) {
            if (event.key === 'Enter' && !event.shiftKey) {
                event.preventDefault();
                sendMessage();
            }
        });

        document.getElementById('loadMoreBtn').addEventListener('click', loadMoreChats);
        document.getElementById('deleteAllBtn').addEventListener('click', deleteAllConversations);

        window.onclick = function(event) {
            if (event.target == document.getElementById('apiKeyModal')) {
                closeModal();
            }
            if (event.target == document.getElementById('settingsModal')) {
                document.getElementById('settingsModal').style.display = 'none';
            }
            if (!event.target.matches('.model-selector-btn')) {
                var dropdowns = document.getElementsByClassName("model-selector-content");
                for (var i = 0; i < dropdowns.length; i++) {
                    var openDropdown = dropdowns[i];
                    if (openDropdown.classList.contains('show')) {
                        openDropdown.classList.remove('show');
                    }
                }
            }
        }

        function toggleSidebar() {
            const sidebarContainer = document.querySelector('.sidebar-container');
            sidebarContainer.style.display = 'flex';
        }
    
        function closeSidebar() {
            const sidebarContainer = document.querySelector('.sidebar-container');
            sidebarContainer.style.display = 'none';
        }
    
        function toggleSidebarCollapse() {
            const sidebarContainer = document.querySelector('.sidebar-container');
            const sidebar = document.querySelector('.sidebar');
            const collapseBtn = document.querySelector('.sidebar-collapse-btn');
            
            sidebarContainer.classList.toggle('collapsed');
            sidebar.classList.toggle('collapsed');
            collapseBtn.classList.toggle('collapsed');
        }

        function checkScreenSize() {
            const toggleSidebarBtn = document.querySelector('.toggle-sidebar');
            const closeSidebarBtn = document.querySelector('.close-sidebar');
            const sidebarContainer = document.querySelector('.sidebar-container');
            
            if (window.innerWidth <= 768) {
                toggleSidebarBtn.style.display = 'block';
                closeSidebarBtn.style.display = 'block';
                document.querySelector('.model-selector-content').style.position = 'fixed';
                sidebarContainer.classList.remove('show');
            } else {
                toggleSidebarBtn.style.display = 'none';
                closeSidebarBtn.style.display = 'none';
                document.querySelector('.model-selector-content').style.position = 'absolute';
                sidebarContainer.classList.remove('show');
            }
        }
    

        async function toggleDarkMode() {
            const darkModeToggle = document.getElementById('darkModeToggle');
            const isDarkMode = document.body.classList.toggle('dark-mode');
            await putInStore(SETTINGS_STORE, { key: 'darkMode', value: isDarkMode });
            updateDarkModeIcon(isDarkMode);
            updateModelSelectorStyle(isDarkMode);
        }

        function updateDarkModeIcon(isDarkMode) {
            const darkModeToggle = document.getElementById('darkModeToggle');
            if (isDarkMode) {
                darkModeToggle.innerHTML = `
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
                    </svg>
                `;
            } else {
                darkModeToggle.innerHTML = `
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="5"/>
                        <line x1="12" y1="1" x2="12" y2="3"/>
                        <line x1="12" y1="21" x2="12" y2="23"/>
                        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
                        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
                        <line x1="1" y1="12" x2="3" y2="12"/>
                        <line x1="21" y1="12" x2="23" y2="12"/>
                        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
                        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
                    </svg>
                `;
            }
        }
        
        function updateModelSelectorStyle(isDarkMode) {
            const modelSelector = document.querySelector('.model-selector-btn');
            if (isDarkMode) {
                modelSelector.style.backgroundColor = 'hsl(var(--secondary-dark))';
                modelSelector.style.borderColor = 'hsl(var(--border-dark))';
                modelSelector.style.color = 'hsl(var(--foreground-dark))';
            } else {
                modelSelector.style.backgroundColor = '';
                modelSelector.style.borderColor = '';
                modelSelector.style.color = '';
            }
        }

        function switchPlayground(type) {
            const items = document.querySelectorAll('.navigation-item');
            items.forEach(item => item.classList.remove('active'));
            event.currentTarget.classList.add('active');
            
            if (type === 'image') {
                window.location.href = 'https://image.nexusmind.tech/';
            }
        }
        
        // Initialize dark mode
        const isDarkMode = localStorage.getItem('darkMode') === 'true';
        document.body.classList.toggle('dark-mode', isDarkMode);
        updateDarkModeIcon(isDarkMode);
        updateModelSelectorStyle(isDarkMode);
    
        window.onload = async function() {
            await openDB();
            
            await migrateLocalStorageToIndexedDB();
            
            const storedSettings = await getFromStore(SETTINGS_STORE, 'settings');
            if (storedSettings) {
                settings = storedSettings.value;
            }
            
            const storedChatHistoryLength = await getFromStore(SETTINGS_STORE, 'chatHistoryLength');
            if (storedChatHistoryLength) {
                chatHistoryLength = storedChatHistoryLength.value;
            } else {
                chatHistoryLength = 10;
                await putInStore(SETTINGS_STORE, { key: 'chatHistoryLength', value: chatHistoryLength });
            }

            // if systemPrompt is not set, or not exist, set the default systemPrompt
            if (!settings.systemPrompt || !storedSettings) {
                settings.systemPrompt = "You're helpful assistant that can help me with my questions. Today is {{local_date}}.";
                settings.aiGeneratedTitle = true;
                settings.suggestRelatedQuestions = true;
                settings.maxTokens = 2000;
                settings.temperature = 0.5;
                settings.topP = 1.0;
                settings.topK = 5;
                await putInStore(SETTINGS_STORE, { key: 'settings', value: settings });
            }

            // Retrieve dark mode setting from IndexedDB
            const darkModeSetting = await getFromStore(SETTINGS_STORE, 'darkMode');
            const isDarkMode = darkModeSetting ? darkModeSetting.value : false;
            document.body.classList.toggle('dark-mode', isDarkMode);
            updateDarkModeIcon(isDarkMode);
            updateModelSelectorStyle(isDarkMode);
        
            updateChatHistorySidebar();
            loadModels();
            checkScreenSize();
            document.getElementById('darkModeToggle').addEventListener('click', toggleDarkMode);
        
            // Add the default model icon
            const defaultModelIcon = getDefaultModelIcon();
            document.getElementById("modelSelectorBtn").innerHTML = `
                <span class="model-icon">${defaultModelIcon}</span>
                <span id="selectedModel">gpt-4o</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
            `;
            setupRevertActionButtons();
  
            updateMessageCost();
            loadRandomPrompts();
        }
    </script>
</body>
</html>