Xylaria-chat

Running

App Files Files Community

Reality123b commited on Feb 7

Commit

756a49f

verified ·

1 Parent(s): 8e3eda3

Update application/templates/index.html

Browse files

Files changed (1) hide show

application/templates/index.html +405 -453

application/templates/index.html CHANGED Viewed

@@ -1,455 +1,392 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <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">
-    <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>
-    <title>Chat Completion Demo</title>
     <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;
-            justify-content: space-between;
             align-items: center;
-            background-color: rgba(20, 20, 20, 0.8);
-            backdrop-filter: blur(10px);
-        }
-        .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, .line2 {
-            background-color: rgb(122, 122, 122);
-            width: 6vh;
-            height: 0.5vh;
-            transition: transform 0.3s ease;
-        }
-        .hamburger:hover .line1 {
-            transform: translateX(-30px);
-        }
-        .hamburger:hover .line2 {
-            transform: translateX(30px);
-        }
-        .menu {
-            height: 100vh;
-            width: 0;
-            background-color: rgba(20, 20, 20, 0.8);
-            backdrop-filter: blur(10px);
-            border-radius: 10px;
-            position: fixed;
-            top: 0;
-            left: 0;
-            display: flex;
-            flex-direction: column;
-            overflow-y: auto;
-            transition: width 0.3s ease;
-        }
-        .menu.open {
-            width: 250px;
-        }
-        .newChat {
-            margin-top: 8vh;
-            margin-left: 1vw;
-            color: gray;
-            font-size: large;
             cursor: pointer;
-            font-weight: 400;
-            position: relative;
-            font-size: large;
-            transition: transform 0.3s ease;
         }
-        .newChat:hover {
-            transform: scale(0.95);
-        }
-        .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;
-            transition: background-color 0.3s ease, transform 0.3s ease;
-        }
-        .prevChat:hover {
-            background-color: rgba(70, 70, 70, 1);
-            transform: translateY(5px);
-        }
-        .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;
-            transition: width 0.3s ease;
-        }
-        .inputs.expanded {
-            width: 90%;
-        }
-        .textBox {
-            width: 90%;
-            background: none;
-            outline: none;
-            border: none;
-            color: rgb(161, 161, 161);
-            padding: 7px;
-            font-family: 'Inter';
-            resize: none;
-        }
-        .sendBtn {
-            background-color: white;
-            border: none;
-            color: black;
-            font-size: x-large;
-            cursor: pointer;
-            border-radius: 50%;
-            width: 6vh;
-            height: 6vh;
-            transition: background-color 0.3s ease;
-        }
-        .sendBtn:hover {
-            background-color: #e0e0e0;
-        }
-        .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%;
-            margin-bottom: 10px;
-        }
-        .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';
-            margin-bottom: 10px;
-        }
-        .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;
-            background-color: #282a36;
-            color: #f8f8f2;
-            padding: 5px;
-            font-family: 'Fira Code', monospace;
-        }
-        pre {
-            background-color: #282a36;
-            color: #f8f8f2;
-            padding: 10px;
-            border-radius: 15px;
-            overflow-x: auto;
-            font-family: 'Fira Code', monospace;
-        }
-        .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;
-            transition: background-color 0.3s ease;
-        }
-        .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;
-            border-radius: 15px;
-            animation: fadeIn 0.5s ease-in-out;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translate(-50%, -60%); }
-            to { opacity: 1; transform: translate(-50%, -50%); }
-        }
-        .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;
-            transition: background-color 0.3s ease;
-        }
-        .closeAlert:hover {
-            background-color: #ff5757;
-        }
-        .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;
-            transition: background 0.3s ease;
-        }
-        .discord:hover {
-            background: linear-gradient(to right, #9c18e3, #4A148C);
-        }
-        .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;
-            border-radius: 10px;
-        }
-        .webSearch {
-            color: rgb(233, 233, 233);
-            background: transparent;
-            cursor: pointer;
-            border: none;
-            font-size: x-large;
-            transition: color 0.3s ease;
-        }
-        .webSearch:hover {
-            color: #ffcc00;
-        }
-        .generated-image {
-            margin-top: 20px;
-            text-align: center;
         }
-        .generated-image img {
-            max-width: 80%;
-            height: auto;
-            border-radius: 10px;
-            border: 2px solid rgba(255, 255, 255, 0.1);
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-        }
-        @media screen and (max-width: 780px) {
-            .menu {
-                background-color: rgba(20, 20, 20);
-            }
-            .inputs {
-                width: 85%;
-            }
-            .ai {
-                width: 90%;
-            }
-            .user {
-                max-width: 90%;
-            }
         }
     </style>
 </head>
 <body>
     <nav>
@@ -468,43 +405,58 @@
     </nav>
     <div class="container" id="container">
         <div class="messages" id="messages">
         </div>
         <div class="inputs">
-            <button id="imageGenBtn" class="webSearch"><i class="fa-solid fa-image"></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>
-    <div class="alert" id="alert">
-        <div class="closeAlert" id="closeAlert">X</div>
-        <p class="note">Note</p>
-        <p>Welcome to Xylaria!</p>
-    </div>
-    <div class="textCustomization">
-        <div class="colors"></div>
-        <div class="fontSize"></div>
-        <div class="background"></div>
-    </div>
     <script>
-        document.getElementById('hamburger').addEventListener('click', function() {
-            document.getElementById('menu').classList.toggle('open');
-        });
-        document.getElementById('closeAlert').addEventListener('click', function() {
-            document.getElementById('alert').style.display = 'none';
-        });
-        document.getElementById('textBox').addEventListener('focus', function() {
-            document.querySelector('.inputs').classList.add('expanded');
-        });
-        document.getElementById('textBox').addEventListener('blur', function() {
-            if (!this.value) {
-                document.querySelector('.inputs').classList.remove('expanded');
             }
-        });
     </script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
-    <script>hljs.highlightAll();</script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <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>
+    <title>Chat Completion Demo</title>
 </head>
 <body>
     <nav>
     </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;
+        }
+        // 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>