Update application/templates/index.html

application/templates/index.html

@@ -7,10 +7,405 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap" rel="stylesheet">
-
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css">
+    <style>
+      ::-webkit-scrollbar {
+    width: 12px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent; 
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgb(43, 43, 43);
+    border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgb(119, 119, 119);
+}
+html,body{
+    padding: 0;
+    margin: 0;
+    background-color: rgb(2,2,8);
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    scrollbar-width: thin; 
+    scrollbar-color: rgb(41, 41, 41) transparent;
+    font-family: 'Inter';
+
+}
+nav{
+    position: fixed;
+    width: 100vw;
+    height: 8vh;
+    z-index: 100;
+    display: flex;
+}
+.hamburger{
+    display: flex;
+    flex-direction: column;
+    gap: 1.5vh;
+    width: 20vh;
+    color: white;
+    margin: 1vw;
+    cursor: pointer;
+    position: absolute;
+    z-index: 101;
+    margin: 10px;
+}
+.line1{
+    background-color: rgb(122, 122, 122);
+    width: 6vh;
+    height: 0.5vh;
+}
+.line2{
+    background-color: rgb(104, 104, 104);
+    width: 3vh;
+    height: 0.5vh;
+}
+
+.hamburger:hover .line1{
+    transform: translateX(-30px);
+    transition: transform 1s ease;
+}
+.hamburger:hover .line2{
+    transform: translateX(30px);
+    transition: transform 1s ease;
+}
+.menu{
+    height: 100vh;
+    width: 0px;
+    background-color: rgba(20, 20, 20,0.5);
+    border-radius: 10px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+}
+.newChat{
+    margin-top: 8vh;
+    margin-left: 1vw;
+    color: gray;
+    font-size: large;
+    cursor: pointer;
+    font-weight: 400;
+    position: relative;
+    font-size: large;
+}
+.newChat:hover{
+    transform: scale(0.95);
+    transition: transform 0.7s ease;
+}
+.prevChatsCont{
+    color: rgb(172, 171, 171);
+    margin-left: 1vw;
+    font-weight: 300;
+    display: flex;
+    flex-direction: column;
+    gap: 1vh;
+    position: relative;
+    font-size: medium;
+    
+}
+.prevChat{
+    min-height: 5vh;
+    cursor: pointer;
+    width: 90%;
+    display: flex;
+    align-items: center;
+    padding-left: 5%;
+    border-radius: 10px;
+    overflow: hidden;
+    padding-top: 1%;
+    padding-bottom: 1%;
+    position: relative;
+}
+.prevChat:hover{
+    background-color: rgba(70,70, 70,1);
+    transform: translateY(5px);
+    transition: transform 0.8s ease;
+}
+.chatsTxt{
+    color: #fdffdf;
+    margin-left: 1vw;
+    font-size: 14px;
+    margin-top: 4vh;
+    margin-bottom: 3vh;
+    z-index: 100;
+    overflow: hidden;
+    min-height: 5vh;
+    display: flex;
+    align-items: center;
+
+}
+
+.container {
+    width: 99.5%;
+    max-width: 99.5%;
+    height: 90%;
+    position: absolute;
+    z-index: 50;
+    top: 8vh;
+    display: flex;
+    flex-direction: column; 
+    justify-content: flex-end; 
+    z-index: 1;
+}
+
+.inputs {
+    width: 70%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    background-color: rgba(51, 51, 51, 0.4);
+    padding: 10px;
+    border-top-right-radius: 50px;
+    border-bottom-left-radius: 20px;
+    border-top-left-radius: 20px;
+    border-bottom-right-radius: 50px;
+    font-size: large;
+    position: relative; 
+    margin-top: auto; 
+    align-self: center;
+
+}
+
+.textBox{
+    width: 90%;
+    background: none;
+    outline: none;
+    border: none;
+    color: rgb(161, 161, 161);
+    padding: 7px;
+}
+.sendBtn{
+    background-color: white;
+    border: none;
+    color: black;
+    font-size: x-large;
+    cursor: pointer;
+    border-radius: 50%;
+    width: 6vh;
+    height: 6vh;
+}
+.messages {
+    overflow-y: auto; 
+    color: white;
+    padding: 10px;
+    display: flex;
+    flex-direction: column; 
+    position: relative;
+}
+.user{
+    margin-left: auto;
+    max-width: 60%;
+    background-color: rgba(51, 51, 51, 0.4);
+    padding: 0.5vh 1.5vh 0.5vh 1.5vh;
+    text-align: left;
+    font-weight: 300;
+    border-radius: 10px;
+    line-height: 130%;
+    
+}
+.user p{
+    color: #b4b4b4;
+    padding: 0;
+    opacity: 0.9;
+}
+.ai{
+    text-align: left;
+    width: 70%;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 2vh;
+}
+.ai p {
+    opacity: 0.9;
+    font-weight: 300; 
+    font-size: medium;
+    line-height: 1.6;
+    color: #c5c5c5; 
+    background-color: rgba(28, 28, 28, 0.5);
+    padding: 20px;
+    border-radius: 10px;
+    border: 2px solid rgba(255,255,255,0.1);
+    font-family: 'Inter';
+}
+
+.subHeading,.heading{
+    padding: 1vh;
+    border-radius: 10px;
+    display: inline-block;
+    margin-bottom: 2vh;
+    margin-top: 2vh;
+}
+.subHeading{
+    background-color: rgba(59, 59, 59, 0.5);
+    border: 1px solid rgba(255,255,255,0.1)
+}
+.heading{
+    background-color: rgba(119, 16, 238, 0.55);
+    box-shadow: 6px 6px rgba(0, 0, 0, 0.5) ;
+}
+
+code{
+    border-radius: 15px;
+}
+.models{
+    position: relative;
+    margin: auto;
+    padding: 10px   ;
+    outline: none;
+    background-color: rgb(43, 43, 43);
+    color: rgb(177, 177, 177);
+    border: none;
+    border-radius: 10px;
+}
+.models:hover{
+    background-color: #383838;
+}
+.models option{
+    background-color: rgb(34, 34, 34);
+    color: #afafaf;
+    padding: 10px;
+}
+.alert{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    width: 320px;
+    height: 320px;
+    display: flex;
+    flex-direction: column;
+    gap: 0px;
+    color: #d8d8d8;
+    background-color: #222222;
+    box-shadow: 6px 6px rgb(41, 41, 41) ;
+    justify-content: center;
+    z-index: 100;
+}
+.alert p{
+    float: left;
+    font-family: 'Inter';
+    font-weight: 300;
+    font-size: 15px;
+    color: #cfcfcf; 
+    opacity: 0.9;
+    padding-left: 10px;
+}
+.closeAlert{
+    margin-left: auto;
+    margin-right: 10px;
+    margin-top: 10px;
+    background-color: rgb(247, 102, 102);
+    padding: 10px;
+    cursor: pointer;
+    border-radius: 10px;
+    color: #ffffff;
+}
+.discord {
+    margin: 10px;
+    text-decoration: none;
+    color: rgb(211, 211, 211);
+    padding: 7.5px;
+    border-radius: 10px;
+    background: linear-gradient(to right, #4A148C, #9c18e3);
+    cursor: pointer;
+    display: inline-block;
+    font-size: 13px;
+    max-width: 77px;
+}
+.note{
+    text-align: center;
+    background-color: rgba(119, 16, 238, 0.55);
+    box-shadow: 6px 6px rgb(32, 32, 32) ;
+    margin: auto;
+    width: 70px;
+    padding: 10px;
+}
+.webSearch{
+    color: rgb(233, 233, 233);
+    background: transparent;
+    cursor: pointer;
+    border: none;
+    font-size: x-large;
+}
+
+@media screen and (max-width: 780px){
+    .menu{
+    background-color: rgba(20, 20, 20);
+    }
+    .inputs{
+        width: 85%;
+    }
+    .ai{
+        width: 90%;
+    }
+    .user{
+        max-width: 90%;
+    }
+}
+        /* New styles for thinking section */
+        .thinking-container {
+            background: rgba(30, 30, 30, 0.7);
+            border-radius: 8px;
+            margin: 10px 0;
+            overflow: hidden;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .thinking-header {
+            display: flex;
+            align-items: center;
+            padding: 10px 15px;
+            cursor: pointer;
+            background: rgba(119, 16, 238, 0.2);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .thinking-header:hover {
+            background: rgba(119, 16, 238, 0.3);
+        }
+
+        .thinking-title {
+            color: #fdffdf;
+            font-size: 14px;
+            margin-right: 10px;
+        }
+
+        .thinking-arrow {
+            margin-left: auto;
+            transition: transform 0.3s ease;
+        }
+
+        .thinking-arrow.open {
+            transform: rotate(180deg);
+        }
+
+        .thinking-content {
+            padding: 15px;
+            color: #c5c5c5;
+            font-size: 14px;
+            line-height: 1.5;
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease-out;
+        }
+
+        .thinking-content.open {
+            max-height: 500px;
+            transition: max-height 0.5s ease-in;
+        }
+    </style>
     <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
-   <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
     <title>Chat Completion Demo</title>
 </head>
 <body>
@@ -27,25 +422,62 @@
             <div class="prevChatsCont" id="prevChatsCont">
             </div>
         </div>
-
     </nav>
     <div class="container" id="container">
         <div class="messages" id="messages">
+            <!-- Messages will be inserted here -->
         </div>
         <div class="inputs">
             <button id="webSearch" class="webSearch"><i class="fa-solid fa-globe"></i></button>
-            
             <textarea name="" id="textBox" class="textBox" placeholder="Enter your message..."></textarea>
             <button id="sendBtn" class="sendBtn"><i class="fa-solid fa-arrow-up"></i></button>
         </div>
     </div>
+    <script>
+        // Add this to your existing JavaScript or create a new script
+        function createThinkingElement(thinkingContent) {
+            const container = document.createElement('div');
+            container.className = 'thinking-container';
+            
+            const header = document.createElement('div');
+            header.className = 'thinking-header';
+            
+            const title = document.createElement('span');
+            title.className = 'thinking-title';
+            title.textContent = 'Reasoning about it';
+            
+            const arrow = document.createElement('i');
+            arrow.className = 'fa-solid fa-chevron-down thinking-arrow';
+            
+            const content = document.createElement('div');
+            content.className = 'thinking-content';
+            content.textContent = thinkingContent;
+            
+            header.appendChild(title);
+            header.appendChild(arrow);
+            container.appendChild(header);
+            container.appendChild(content);
+            
+            header.addEventListener('click', () => {
+                arrow.classList.toggle('open');
+                content.classList.toggle('open');
+            });
+            
+            return container;
+        }
 
-    <div class="textCustomization">
-        <div class="colors"></div>
-        <div class="fontSize"></div>
-        <div class="background"></div>
-    </div>
-<script src="{{ url_for('static', filename='js/script.js') }}" type="module"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
+        // Example usage in your message processing logic:
+        function processMessage(message) {
+            const thinkMatch = message.match(/<think>(.*?)<\/think>/s);
+            if (thinkMatch) {
+                const thinkingContent = thinkMatch[1].trim();
+                const thinkingElement = createThinkingElement(thinkingContent);
+                // Insert the thinking element into your message container
+                document.getElementById('messages').appendChild(thinkingElement);
+            }
+        }
+    </script>
+    <script src="{{ url_for('static', filename='js/script.js') }}" type="module"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
 </body>
 </html>