Merge branch 'feat'

bm777 · Mar 9, 2024 · 983f035 · 983f035
2 parents 3f11b7c + 1edf46d
commit 983f035
Show file tree

Hide file tree

Showing 16 changed files with 205 additions and 188 deletions.
diff --git a/main/background.js b/main/background.js
@@ -5,7 +5,6 @@ import axios from 'axios';
 const Groq = require('groq-sdk');
 
 const isProd = process.env.NODE_ENV === 'production';
-
 let settingsWindow;
 
 if (isProd) {
@@ -85,10 +84,10 @@ async function createMainWindow() {
   });
 
   mainWindow.on('blur', (e) => {
-    mainWindow.hide();
+    // mainWindow.hide();
   });
   ipcMain.on('window-blur', (e) => {
-    mainWindow.hide();
+    // mainWindow.hide();
   });
 
   function get_content_block(block) {
@@ -247,7 +246,7 @@ async function createMainWindow() {
   }
 
   mainWindow.setAlwaysOnTop(true, "normal");
-  mainWindow.setVisibleOnAllWorkspaces(true, {visibleOnFullScreen: true});
+  // mainWindow.setVisibleOnAllWorkspaces(true, {visibleOnFullScreen: true});
   // mainWindow.setFullScreenable(false);
   return mainWindow;
 }
@@ -316,12 +315,8 @@ async function createMainWindow() {
   const menu = Menu.buildFromTemplate(template)
   Menu.setApplicationMenu(menu)
 
-  // mainWindow.setAlwaysOnTop(true, "floating");
-  // mainWindow.setVisibleOnAllWorkspaces(true);
-  // mainWindow.setFullScreenable(false);
   app.dock.hide();
 
-
   app.on('window-all-closed', () => {
     if (process.platform !== 'darwin') {
       app.quit();

diff --git a/package.json b/package.json
@@ -23,7 +23,10 @@
       "icon": "resources/icon.png"
     },
     "mac": {
-      "target": ["dmg", "pkg"],
+      "target": [
+        "dmg",
+        "pkg"
+      ],
       "icon": "resources/icon.icns"
     },
     "win": {
@@ -35,6 +38,7 @@
     "electron-serve": "^1.1.0",
     "electron-store": "^8.1.0",
     "groq-sdk": "^0.3.0",
+    "next-themes": "^0.2.1",
     "prismjs": "^1.29.0",
     "react-markdown": "^9.0.1",
     "react-redux": "^9.1.0",

diff --git a/renderer/components/answer.js b/renderer/components/answer.js
@@ -2,19 +2,17 @@ import { useEffect, useState } from "react";
 import { parseLink } from "../pages/api/methods";
 import CodeText from "../components/codetext";
 import { get_code_blocks } from "../pages/api/methods";
-import Prism from 'prismjs';
+import { useTheme } from "next-themes";
 import React from "react";
 import { v4 as uid } from 'uuid';
 import ParsedText from "./parsedtext";
 
-
-
 const Answer = React.memo(({ answer }) => {
     const [formattedLines, setFormattedLines] = useState([]);
     const [status, setStatus] = useState("copy");
+    const { theme } = useTheme();
 
     useEffect(() => {
-        Prism.highlightAll();
         if (answer) {
             const lines = answer.split('\n');
             const linesWithLinksParsed = lines.map(line => parseLink(line));
@@ -44,25 +42,24 @@ const Answer = React.memo(({ answer }) => {
         {formattedLines.map((line, index) => (
             <div key={uid()}>
             {
-
                 line.includes("```") ? // .slice(3, -3)
-                <CodeText key={uid()} className={"border rounded-md bg-[#1F1F1D] text-sm overflow-auto"}>{line}</CodeText>
+                <CodeText key={uid()} >{line}</CodeText>
                 :
-                <ParsedText>
+                <ParsedText >
                     {line}   
                 </ParsedText>
             }
             </div>
             ))
         }
 
-        <div className={" absolute w-full -bottom-5 ml-3 bg-transparent flex items-center justify-end transition-all duration-500  " + (answer === "" ? "scale-0" : "scale-100") }>
-            <div onClick={copied} className="flex py-[1px] px-2 bg-[#2f2f2f3a] rounded"> 
+        <div className={" absolute w-full -bottom-5 ml-3 flex items-center justify-end transition-all duration-500  " + (answer === "" ? "scale-0" : "scale-100") }>
+            <div onClick={copied} className={`flex py-[1px] px-2 bg-[#2f2f2f3a] border border-[#8181814b] rounded dark:bg-[#87858965]`}> 
                 <div className="flex items-center justify-center  mr-2 gap-1 hover:cursor-pointer">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="#00000090" className="w-[14px] h-[14px]">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke={theme === "light" ? "#2f2f2fa3" : "#ACABAE"} className="w-[14px] h-[14px]">
                         <path strokeLinecap="round" strokeLinejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184" />
                     </svg>
-                    <span className="text-sm text-[#00000090] mb-[1px]"> {status} </span>
+                    <span className={`text-sm text-[#00000090] mb-[1px] dark:text-[#ACABAE]`}> {status} </span>
                 </div>
             </div>
         </div>

diff --git a/renderer/components/buttons/btn.js b/renderer/components/buttons/btn.js
@@ -1,45 +1,54 @@
-
+import { useTheme } from "next-themes"
 export default function Btn({ type, text, action }) {
+    const { theme } = useTheme()
+
     if(type==="settings")
         return (
-            <div onClick={action} className="hover:bg-[#c5ccdb9a] flex items-center justify-between mt-1 py-[8px] px-2 rounded-md transition-all duration-200 hover:cursor-default">
-                <div className=" flex items-center justify-center gap-1">
-                    <div className=" ">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="#2f2f2fa3" className="w-[20px] h-[20px]">
+            <div onClick={() => action("discord")} className="hover:bg-[#c5ccdb9a] flex items-center justify-between mt-1 py-[8px] px-2 rounded-md transition-all duration-200 hover:cursor-default dark:hover:bg-[#2C2B2F]">
+                <div className="flex items-center justify-center gap-1">
+                    <div className="">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke={theme==="light" ? "#2f2f2fa3": "#A7A6A8"} className="w-[20px] h-[20px]">
                             <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12a7.5 7.5 0 0 0 15 0m-15 0a7.5 7.5 0 1 1 15 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077 1.41-.513m14.095-5.13 1.41-.513M5.106 17.785l1.15-.964m11.49-9.642 1.149-.964M7.501 19.795l.75-1.3m7.5-12.99.75-1.3m-6.063 16.658.26-1.477m2.605-14.772.26-1.477m0 17.726-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205 12 12m6.894 5.785-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" />
                         </svg>
                     </div>
-                    <div className="text-sm ">{text}</div>
+                    <div className="text-sm text-[#2f2f2fa3] dark:text-[#A7A6A8] ">{text}</div>
                 </div>
                 <div className=" flex items-center justify-center gap-1 ">
-                    <div className="bg-[#2f2f2f1d] h-[20px] w-[20px] flex items-center justify-center rounded">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#2f2f2fb9" viewBox="0 0 256 256" className="w-4 h-4">
+                    <div className="bg-[#2f2f2f1d] h-[24px] w-[24px] flex items-center justify-center rounded-md border border-[#8181814b] dark:bg-[#414045]">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill={theme==="light" ?"#2f2f2fb9":"#ACABAE"} viewBox="0 0 256 256" className="w-4 h-4">
                             <path d="M180,144H160V112h20a36,36,0,1,0-36-36V96H112V76a36,36,0,1,0-36,36H96v32H76a36,36,0,1,0,36,36V160h32v20a36,36,0,1,0,36-36ZM160,76a20,20,0,1,1,20,20H160ZM56,76a20,20,0,0,1,40,0V96H76A20,20,0,0,1,56,76ZM96,180a20,20,0,1,1-20-20H96Zm16-68h32v32H112Zm68,88a20,20,0,0,1-20-20V160h20a20,20,0,0,1,0,40Z"></path>
                         </svg>
                     </div>
-                    <div className="bg-[#2f2f2f1d] flex items-center justify-center rounded h-[20px] w-[20px]">
-                        <span className="text-[#2f2f2fb9] text-sm ">,</span>
+                    <div className="bg-[#2f2f2f1d] flex items-center justify-center rounded-md border border-[#8181814b] h-[24px] w-[24px] dark:bg-[#414045]">
+                        <span className="text-[#2f2f2fb9] text-sm dark:text-[#ACABAE] ">,</span>
                     </div>
                 </div>
             </div>
         )
-    else if(type==="discord")
+    else if(type==="discord" || type==="github")
     return (
-        <div onClick={action} className="hover:bg-[#c5ccdb9a] flex items-center justify-between mt-1 py-[8px] px-2 rounded-md transition-all duration-200 hover:cursor-default">
+        <div onClick={() => action(type)} className="hover:bg-[#c5ccdb9a] flex items-center justify-between mt-1 py-[8px] px-2 rounded-md transition-all duration-200 hover:cursor-default dark:hover:bg-[#2C2B2F]">
             <div className=" flex items-center justify-center gap-1">
                 <div className="">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000" viewBox="0 0 256 256" className="w-[20px] h-[20px]">
-                        <path d="M247.51,174.39,218,58a16.08,16.08,0,0,0-13-11.88l-36.06-5.92a16.22,16.22,0,0,0-18.26,11.88l-.21.85a4,4,0,0,0,3.27,4.93,155.62,155.62,0,0,1,24.41,5.62,8.2,8.2,0,0,1,5.62,9.7,8,8,0,0,1-10.19,5.64,155.4,155.4,0,0,0-90.8-.1,8.22,8.22,0,0,1-10.28-4.81,8,8,0,0,1,5.08-10.33,156.85,156.85,0,0,1,24.72-5.72,4,4,0,0,0,3.27-4.93l-.21-.85A16.21,16.21,0,0,0,87.08,40.21L51,46.13A16.08,16.08,0,0,0,38,58L8.49,174.39a15.94,15.94,0,0,0,9.06,18.51l67,29.71a16.17,16.17,0,0,0,21.71-9.1l3.49-9.45a4,4,0,0,0-3.27-5.35,158.13,158.13,0,0,1-28.63-6.2,8.2,8.2,0,0,1-5.61-9.67,8,8,0,0,1,10.2-5.66,155.59,155.59,0,0,0,91.12,0,8,8,0,0,1,10.19,5.65,8.19,8.19,0,0,1-5.61,9.68,157.84,157.84,0,0,1-28.62,6.2,4,4,0,0,0-3.27,5.35l3.49,9.45a16.18,16.18,0,0,0,21.71,9.1l67-29.71A15.94,15.94,0,0,0,247.51,174.39ZM92,152a12,12,0,1,1,12-12A12,12,0,0,1,92,152Zm72,0a12,12,0,1,1,12-12A12,12,0,0,1,164,152Z"></path>
-                    </svg>
+                    {
+                        type==="github" ?
+                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill={theme==="light" ? "#2f2f2fa3": "#A7A6A8"} viewBox="0 0 256 256" className="w-[20px] h-[20px]">
+                            <path d="M216,104v8a56.06,56.06,0,0,1-48.44,55.47A39.8,39.8,0,0,1,176,192v40a8,8,0,0,1-8,8H104a8,8,0,0,1-8-8V216H72a40,40,0,0,1-40-40A24,24,0,0,0,8,152a8,8,0,0,1,0-16,40,40,0,0,1,40,40,24,24,0,0,0,24,24H96v-8a39.8,39.8,0,0,1,8.44-24.53A56.06,56.06,0,0,1,56,112v-8a58.14,58.14,0,0,1,7.69-28.32A59.78,59.78,0,0,1,69.07,28,8,8,0,0,1,76,24a59.75,59.75,0,0,1,48,24h24a59.75,59.75,0,0,1,48-24,8,8,0,0,1,6.93,4,59.74,59.74,0,0,1,5.37,47.68A58,58,0,0,1,216,104Z"></path>
+                        </svg>
+                        :
+                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill={theme==="light" ? "#2f2f2fa3": "#A7A6A8"} viewBox="0 0 256 256" className="w-[20px] h-[20px]">
+                            <path d="M247.51,174.39,218,58a16.08,16.08,0,0,0-13-11.88l-36.06-5.92a16.22,16.22,0,0,0-18.26,11.88l-.21.85a4,4,0,0,0,3.27,4.93,155.62,155.62,0,0,1,24.41,5.62,8.2,8.2,0,0,1,5.62,9.7,8,8,0,0,1-10.19,5.64,155.4,155.4,0,0,0-90.8-.1,8.22,8.22,0,0,1-10.28-4.81,8,8,0,0,1,5.08-10.33,156.85,156.85,0,0,1,24.72-5.72,4,4,0,0,0,3.27-4.93l-.21-.85A16.21,16.21,0,0,0,87.08,40.21L51,46.13A16.08,16.08,0,0,0,38,58L8.49,174.39a15.94,15.94,0,0,0,9.06,18.51l67,29.71a16.17,16.17,0,0,0,21.71-9.1l3.49-9.45a4,4,0,0,0-3.27-5.35,158.13,158.13,0,0,1-28.63-6.2,8.2,8.2,0,0,1-5.61-9.67,8,8,0,0,1,10.2-5.66,155.59,155.59,0,0,0,91.12,0,8,8,0,0,1,10.19,5.65,8.19,8.19,0,0,1-5.61,9.68,157.84,157.84,0,0,1-28.62,6.2,4,4,0,0,0-3.27,5.35l3.49,9.45a16.18,16.18,0,0,0,21.71,9.1l67-29.71A15.94,15.94,0,0,0,247.51,174.39ZM92,152a12,12,0,1,1,12-12A12,12,0,0,1,92,152Zm72,0a12,12,0,1,1,12-12A12,12,0,0,1,164,152Z"></path>
+                        </svg>
+                    }
                 </div>
-                <div className="text-sm ">{text}</div>
+                <div className="text-sm text-[#2f2f2fa3] dark:text-[#A7A6A8]">{text}</div>
             </div>
             <div className=" "> </div>
         </div>
     )
     else if(type==="exit") 
     return (
-        <div onClick={action} className="hover:bg-[#c5ccdb9a] flex items-center justify-between mt-1 py-[8px] px-2 rounded-md transition-all duration-200 hover:cursor-default">
+        <div onClick={action} className="hover:bg-[#c5ccdb9a] flex items-center justify-between mt-1 py-[8px] px-2 rounded-md transition-all duration-200 hover:cursor-default dark:hover:bg-[#2C2B2F]">
             <div className=" flex items-center justify-center gap-1">
                 <div className="">
                     <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#ff0000" viewBox="0 0 256 256" className="w-[20px] h-[20px]">

diff --git a/renderer/components/buttons/model.js b/renderer/components/buttons/model.js
@@ -1,23 +1,26 @@
+import { useTheme } from "next-themes"
+
 export default function Model({ selected, text , action}) {
+    const { theme } = useTheme()
     const handleClick = () => {
         action(text)
     }
     return (
-        <div onClick={handleClick} className={"hover:bg-[#c5ccdb9a] flex items-center justify-between mt-1 py-[8px] px-2 rounded-md transition-all duration-200 hover:cursor-default "  + (selected ? "bg-[#c5ccdb9a]" : "")}>
+        <div onClick={handleClick} className={"hover:bg-[#c5ccdb9a] flex items-center justify-between mt-1 py-[8px] px-2 rounded-md transition-all duration-200 hover:cursor-default "  + (selected ? "bg-[#c5ccdb9a] dark:bg-[#2c2b2fb7]" : "")}>
             <div className=" flex items-center justify-center gap-1">
                 <div className="">
                     {
                         selected ?
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#2f2f2fa3" className="w-5 h-5">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill={theme==="light" ?"#2f2f2fa3":"#8181814b"}  className="w-5 h-5">
                             <path d="M11.983 1.907a.75.75 0 0 0-1.292-.657l-8.5 9.5A.75.75 0 0 0 2.75 12h6.572l-1.305 6.093a.75.75 0 0 0 1.292.657l8.5-9.5A.75.75 0 0 0 17.25 8h-6.572l1.305-6.093Z" />
                         </svg>
                         :
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="#2f2f2fa3" className="w-5 h-5">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke={theme==="light" ?"#2f2f2fa3":"#8181814b"} className="w-5 h-5">
                             <path strokeLinecap="round" strokeLinejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" />
                         </svg> 
                     }
                 </div>
-                <div className={"text-sm " + (selected ? "font-medium" : "")}>{text}</div>
+                <div className={"text-sm text-[#2f2f2fa3] dark:text-[#A7A6A8] " + (selected ? "font-medium" : "")}>{text}</div>
             </div>
             <div className=" "> </div>
         </div>

diff --git a/renderer/components/buttons/pvd.js b/renderer/components/buttons/pvd.js
@@ -1,22 +1,24 @@
-
+import { useTheme } from "next-themes";
 export default function Pvd({ text, action, defaultModel, selected }) {
+    const { theme } = useTheme();
+
     const handleClick = () => {
         action(text.toLowerCase());
     }
     return (
-        <div onClick={handleClick} className={"hover:bg-[#c5ccdb9a] flex items-center justify-between mt-1 py-[8px] px-2 rounded-md transition-all duration-200 hover:cursor-default " + (selected ? "bg-[#b7becbab]" : "")}>
+        <div onClick={handleClick} className={"hover:bg-[#c5ccdb9a]  flex items-center justify-between mt-1 py-[8px] px-2 rounded-md transition-all duration-200 hover:cursor-default dark:hover:bg-[#2C2B2F] " + (selected ? "bg-[#c5ccdb9a] dark:bg-[#2c2b2fb7]" : "")}>
             <div className=" flex items-center gap-3 h-full w-[90%]">
-                <div className="text-sm font-medium">{text}</div>
+                <div className="text-sm font-medium text-[#2f2f2fa3] dark:text-[#A7A6A8]">{text}</div>
                 { selected && 
                     <>
                         <div className="h-[12px] w-[2px] rounded-full bg-[#2f2f2f47]"></div> 
-                        <div className="text-sm text-[#2f2f2fb9] truncate">{defaultModel}</div>
+                        <div className="text-sm text-[#2f2f2fb9] dark:text-[#a7a6a884] truncate">{defaultModel}</div>
                     </>
                 }
             </div>
-            <div className=" flex items-center justify-center gap-1 ">
-                <div className="bg-[#2f2f2f1d] h-[20px] w-[20px] flex items-center justify-center rounded">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#2f2f2fb9" className="w-4 h-4">
+            <div className=" flex items-center justify-center ">
+                <div className="bg-[#2f2f2f1d]  h-[24px] w-[24px] flex items-center justify-center rounded-md border border-[#8181814b] dark:hover:bg-[#2C2B2F]">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill={theme==="light" ?"#2f2f2fb9":"#8181814b"} className="w-4 h-4">
                         <path fillRule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clipRule="evenodd" />
                     </svg>
                 </div>

diff --git a/renderer/components/codetext.js b/renderer/components/codetext.js
@@ -3,17 +3,18 @@ import React from "react";
 import Prism from 'prismjs';
 
 
-const CodeText = React.memo(({ children, className }) => {
+const CodeText = ({ children }) => {
     const [status, setStatus] = useState("copy");
     const [lang, setLang] = useState("");
     const [code, setCode] = useState("");
     useEffect(() => {
-        Prism.highlightAll();
-
+        Prism.highlightAll(); 
         if (children) {
             setLang(children.split("\n")[0])
             setCode(children.split("\n").slice(1, -1).join("\n"))
+            // console.log("children", children.split("\n").slice(1, -1).join("\n"));
         }
+        Prism.highlightAll();
     }
     , [children]);
 
@@ -30,26 +31,27 @@ const CodeText = React.memo(({ children, className }) => {
             }, 1000);
         });
     }
+
     return (
-        <div className={className}>
-            <div className="w-full bg-[#2F2F2F]  flex items-center text-[#B4B4B4] justify-between py-[2px]">
-                <div className="ml-3 ">{lang}</div>
+        <div className={`rounded-md bg-[#1e1e1e] text-sm overflow-auto border dark:border-[#49484C] duration-700`}>
+            <div className={`w-full bg-[#2F2F2F] flex items-center text-[#B4B4B4] justify-between py-[2px]`}>
+                <div className="ml-3 ">{lang.replace('`', '').replace('`', '').replace('`', '') }</div>
 
                 <div onClick={copied} className="flex items-center justify-center  mr-2 gap-1 hover:cursor-pointer">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="#B4B4B4" className="w-[14px] h-[14px]">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke={`#B4B4B4`} className="w-[14px] h-[14px]">
                         <path strokeLinecap="round" strokeLinejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184" />
                     </svg>
                     <span className="text-sm"> {status} </span>
                 </div>
 
             </div>
-            <pre className={"language-"+lang}>
-                <code className={" token language-"+ lang} >
+            <pre>
+                <code className="language-js" >
                     {code}
                 </code>
             </pre>
         </div>
     );
-});
+}
 
 export default CodeText;