Merge pull request #40 from mithril-security/openai_implementation

Openai implementation

.env.local

@@ -1,35 +1,34 @@
 # Specific remote enclave-only configuration
 
 MODELS=`[
-  {
-    "name": "TheBloke/Llama-2-70B-chat-GPTQ",
+   {
+    "name": "/app/Llama-3.1-70B-Instruct",
     "is_local": false,
-    "type": "text-generation",
-    "userMessageToken": "[INST]",
-    "assistantMessageToken": "[/INST]",
+    "is_code": false,
+    "type": "text2text-generation",
+    "userMessageToken": "<|prompter|>",
+    "assistantMessageToken": "<|assistant|>",
     "messageEndToken": "</s>",
-    "preprompt": "[INST]<<SYS>>\nYou are a helpful, respectful and honest assistant. Always answer as helpfully as possible, while being safe. Your answers should not include any harmful, unethical, racist, sexist, toxic, dangerous, or illegal content. Please ensure that your responses are socially unbiased and positive in nature.\n\nIf a question does not make any sense, or is not factually coherent, explain why instead of answering something not correct. If you don't know the answer to a question, please don't share false information.<</SYS>>\n\n[/INST]",
+    "preprompt": "",
+    "server_addr": "api.chat.mithrilsecurity.io",
     "promptExamples": [
       {
-        "title": "Draft tender offer using company  internal documentation",
-        "prompt": "AI, assist us in drafting a robust proposal for the National Cybersecurity Enhancement Tender issued by the Federal Technology Department. Our proposal should demonstrate our innovative solutions in cybersecurity, emphasizing on real-time threat detection, mitigation, and prevention through our proprietary AI and machine learning technologies. Highlight our team\u2019s expertise, our successful projects in cybersecurity, and the long-term benefits of partnering with Quantum Innovations for this initiative. Provide a clear roadmap, budget estimation, and a timeline for implementing our solutions to significantly enhance the nation's cybersecurity infrastructure\r\n\r\nHere is a description of our company:\r\nQuantum Innovations Inc. is a cutting-edge tech company specializing in developing robust cybersecurity solutions and implementing Artificial Intelligence (AI) for optimizing business operations. With a team of dedicated AI specialists and cybersecurity experts, Quantum Innovations aims to assist organizations in fortifying their digital infrastructure and harnessing the power of AI for strategic decision-making.\r\n\r\nHere is information about the call for proposal:\r\nThe Federal Technology Department has issued the National Cybersecurity Enhancement Tender (NCET) inviting tech firms to submit proposals for bolstering the nation's cybersecurity infrastructure. The proposal should detail innovative solutions for identifying, mitigating, and preventing cyber threats in real-time, with a strong emphasis on employing AI and machine learning technologies."
-      },
-      {
-        "title": "Document functions automatically from code",
-        "prompt": "Can you add comments and documentation to this Python function to handle concurrent requests?\r\n\r\nimport concurrent.futures\r\nimport requests\r\n\r\ndef fetch_url(url):\r\n    response = requests.get(url)\r\n    return response.text\r\n\r\ndef handle_concurrent_requests(urls, max_workers=5):\r\n    with concurrent.futures.ThreadPoolExecutor(max_workers=max_workers) as executor:\r\n        future_to_url = {executor.submit(fetch_url, url): url for url in urls}\r\n        responses = []\r\n        for future in concurrent.futures.as_completed(future_to_url):\r\n            responses.append(future.result())\r\n    return responses\r\n\r\nurls = ['https:\/\/httpbin.org\/get', 'https:\/\/httpbin.org\/ip']\r\nresponses = handle_concurrent_requests(urls)\r\nfor response in responses:\r\n    print(response)"
-      },
-      {
-        "title": "Generate GRPC boilerplate code in Python",
-        "prompt": "Can you propose an example of boilerplate code for a server in Python using gRPC?"
+        "title": "What is love?",
+        "prompt": "What is love?"
+      }, {
+        "title": "Who is Ada Lovelace?",
+        "prompt": "Who is Ada Lovelace?"
+      }, {
+        "title": "What does end-to-end protected mean?",
+        "prompt": "What does end-to-end protected mean?"
       }
     ],
-    "server_addr" : "https://api.chat.mithrilsecurity.io",
     "parameters": {
       "temperature": 0.8,
       "top_p": 0.95,
       "repetition_penalty": 1.2,
       "top_k": 50,
-      "truncate": 2048,
+      "truncate": 1000,
       "max_new_tokens": 2048
     }
   }

.gitignore

@@ -3,9 +3,6 @@ node_modules
 /build
 /.svelte-kit
 /package
-.env
-.env.*
-!.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 nohup.out

.vscode/settings.json

@@ -2,7 +2,7 @@
 	"editor.formatOnSave": true,
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"editor.codeActionsOnSave": {
-		"source.fixAll": true
+		"source.fixAll": "explicit"
 	},
 	"eslint.validate": ["javascript", "svelte"],
 	"[svelte]": {

src/app.html

@@ -2,7 +2,6 @@
 <html lang="en" class="h-full">
 	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
 	<head>
-		<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@48,400,0,0" />  
 		<!-- Google Tag Manager -->
 		<script>
 			var _paq = window._paq || [];
@@ -19,17 +18,20 @@
 			})(window, document, "script", "dataLayer", "GTM-TVD93MF");
 		</script>
 		<!-- End Google Tag Manager -->
-		<link rel="canonical" href="https://chat.mithrilsecurity.io/"/>
+		<link rel="canonical" href="https://chat.mithrilsecurity.io/" />
+
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-		<meta description="Discover Blindchat: an open-source Confidential conversational AI solution for private inference">
+		<meta
+			description="Discover Blindchat: an open-source Confidential conversational AI solution for private inference"
+		/>
 		<meta property="og:image" content="/chatui/thumbnail.jpg" />
 		<script>
 			document.documentElement.classList.add("dark");
 		</script>
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" class="h-full dark:bg-gray-900">
+	<body data-sveltekit-preload-data="hover" class="h-full dark:bg-newPrimary">
 		<div id="app" class="contents h-full">%sveltekit.body%</div>
 	</body>
 </html>

src/lib/components/BigModal.svelte

@@ -54,7 +54,7 @@
 			tabindex="-1"
 			bind:this={modalEl}
 			on:keydown={handleKeydown}
-			class="-mt-10 overflow-hidden rounded-2xl shadow-2xl outline-none md:-mt-20 {width}"
+			class=" overflow-hidden rounded-2xl shadow-2xl outline-none -mt-10 {width}"
 		>
 			<slot />
 		</div>

src/lib/components/MobileNav.svelte

@@ -30,7 +30,7 @@
 </script>
 
 <nav
-	class="font-semibold flex h-12 items-center justify-between border-b bg-gray-50 px-4 dark:border-gray-800 dark:bg-chat md:hidden"
+	class="font-semibold flex h-12 items-center justify-between border-b bg-gray-50 px-4 dark:border-customGray dark:bg-chat md:hidden"
 >
 	<button
 		type="button"
@@ -49,7 +49,7 @@
 		? 'block'
 		: 'hidden'}"
 >
-	<div class="bg-[#142343] flex h-12 items-center px-4">
+	<div class="bg-secondary flex h-12 items-center px-4">
 		<button
 			type="button"
 			class="-mr-3 ml-auto flex h-9 w-9 items-center justify-center"

src/lib/components/NavConversationItem.svelte

@@ -3,95 +3,137 @@
 	import { page } from "$app/stores";
 	import { createEventDispatcher } from "svelte";
 	import { params_writable } from "../../routes/conversation/[id]/ParamsWritable";
-
-	import CarbonCheckmark from "~icons/carbon/checkmark";
-	import CarbonTrashCan from "~icons/carbon/trash-can";
-	import CarbonClose from "~icons/carbon/close";
-	import CarbonEdit from "~icons/carbon/edit";
+	import { PUBLIC_APP_ASSETS, PUBLIC_ORIGIN } from "$env/static/public";
 
 	export let conv: { id: string; title: string };
 
 	let confirmDelete = false;
+	let doubleClicked = false;
+	let inputElement: HTMLElement;
+
+	$: if (inputElement) inputElement.focus();
 
 	const dispatch = createEventDispatcher<{
 		deleteConversation: string;
 		editConversationTitle: { id: string; title: string };
 	}>();
 </script>
 
-<div class="hover:bg-gradient-to-r from-[#1485e6] to-[#01F8FF] p-0.5 rounded-2xl">
-<a
-	data-sveltekit-noscroll
-	on:mouseleave={() => {
-		confirmDelete = false;
-	}}
-	on:click={() => {
-		params_writable.set(conv.id);
-	}}
-	href="{base}/conversation/{conv.id}"
-	class="bg-[#142343] group flex h-11 flex-none items-center gap-1.5 pl-3 pr-2 rounded-2xl {conv.id ===
-	$page.params.id
-		? 'border border-[#1E9FE7] text-white'
-		: 'border border-[#0F4A81] text-[#B4B4B4]'}"
->
-<!-- styling for current chat goes just after question mark above-->
+<div class="cursor-pointer rounded-xl h-[68px]">
+	<a
+		data-sveltekit-noscroll
+		on:click={() => {
+			params_writable.set(conv.id);
+		}}
+		class:hover:bg-[#F1F1F1]={conv.id !==
+			$page.params.id}
+		href="{base}/conversation/{conv.id}"
+		class="group relative flex flex-none h-[68px]  items-center gap-1.5 rounded-xl  px-4 transition-all duration-100 hover:border-tertiary  hover:text-customBlack {conv.id ===
+		$page.params.id
+			? 'bg-newPrimary text-customBlack'
+			: ' text-customGrey bg-secondary'}"
+		on:dblclick={() => {
+			doubleClicked = true;
+		}}
+	>
+		<!-- styling for current chat goes just after question mark above-->
 
-	<div class="flex-1 truncate">
-		{#if confirmDelete}
-			<span class="font-semibold"> Delete </span>
-		{/if}
-		{conv.title}
-	</div>
+		<div class="flex-1 truncate">
+			{conv.title}
+		</div>
 
-	{#if confirmDelete}
-		<button
-			type="button"
-			class="flex h-5 w-5 items-center justify-center rounded-2xl md:hidden md:group-hover:flex"
-			title="Confirm delete action"
-			on:click|preventDefault={() => dispatch("deleteConversation", conv.id)}
-		>
-			<CarbonCheckmark class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
-		</button>
-		<button
-			type="button"
-			class="flex h-5 w-5 items-center justify-center rounded-2xl md:hidden md:group-hover:flex"
-			title="Cancel delete action"
-			on:click|preventDefault={() => {
-				confirmDelete = false;
-			}}
-		>
-			<CarbonClose class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
-		</button>
-	{:else}
 		<button
 			type="button"
-			class="flex h-5 w-5 items-center justify-center rounded-2xl md:hidden md:group-hover:flex"
-			title="Edit conversation title"
+			class="flex items-center justify-center"
+			title="Delete conversation"
 			on:click|preventDefault={() => {
-				const newTitle = prompt("Edit this conversation title:", conv.title);
-				if (!newTitle) return;
-				dispatch("editConversationTitle", { id: conv.id, title: newTitle });
+				confirmDelete = true;
 			}}
 		>
-			<CarbonEdit class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
+			<img
+				alt="trash icon"
+				src="{PUBLIC_ORIGIN || $page.url.origin}{base}/{PUBLIC_APP_ASSETS}/trash.png"
+				class=" trash customHover h-[24px] w-[24px] group-hover:opacity-100 {conv.id === $page.params.id
+					? 'opacity-100'
+					: 'opacity-40'}"
+			/>
 		</button>
 
-		<button
-			type="button"
-			class="flex h-5 w-5 items-center justify-center rounded-2xl md:hidden md:group-hover:flex"
-			title="Delete conversation"
-			on:click|preventDefault={(event) => {
-				if (event.shiftKey) {
-					dispatch("deleteConversation", conv.id);
-				} else {
-					confirmDelete = true;
-				}
-			}}
-		>
-			<CarbonTrashCan class="text-xs text-gray-400  hover:text-gray-500 dark:hover:text-gray-300" />
-		</button>
-	{/if}
-</a>
+		<!-- show modify input  -->
+		{#if doubleClicked}
+			<input
+				bind:this={inputElement}
+				on:focus|preventDefault
+				on:click|preventDefault
+				on:blur={() => (doubleClicked = false)}
+				class="focus:border-customGray absolute left-0 z-[10000]
+
+				 w-full rounded-xl h-[68px] py-2.5  px-4  text-customBlack outline-none focus:border"
+				type="text"
+				bind:value={conv.title}
+				on:input|preventDefault={(event) => {
+					const newTitle = event?.target?.value;
+					if (!newTitle) return;
+					dispatch("editConversationTitle", { id: conv.id, title: newTitle });
+				}}
+			/>{/if}
+	</a>
 </div>
 
+{#if confirmDelete}
+	<div
+		class="fixed left-0 top-0 z-[100] flex h-full w-full items-center justify-center bg-gray-200/50"
+	>
+		<div class="flex flex-col gap-2 rounded-2xl bg-secondary p-6 shadow-xl">
+			<div class="flex items-center justify-center">
+				<div class="rounded-full bg-tertiary bg-opacity-20 p-0.5">
+					<img
+
+						class=" blue-filter-img h-[50px] w-[50px]"
+						alt="trash icon"
+						src="{PUBLIC_ORIGIN || $page.url.origin}{base}/{PUBLIC_APP_ASSETS}/trash.png"
+					/>
+				</div>
+			</div>
+			<div class="my-3.5 flex flex-col gap-2">
+				<h2 class="text-center text-2xl font-bold text-customBlack">Delete chat</h2>
+				<p class="max-w-[400px] text-center">
+					Are you sure you want to delete this conversation? <br /> Action can’t be undone
+				</p>
+			</div>
+
+			<div class="flex flex-col items-center gap-2">
+				<button
+					type="button"
+					class="flex w-full items-center customHover justify-center rounded-xl bg-red-700 px-2 py-3 text-white sm:w-1/2"
+					on:click|preventDefault={() => {
+						dispatch("deleteConversation", conv.id);
+						doubleClicked = false;
+					}}
+				>
+				Delete conversation
+				</button>
+				<button
+					type="button"
+					class="flex w-full items-center customHover justify-center rounded-xl px-2 py-3 text-tertiary sm:w-1/2"
+					on:click|preventDefault={() => {
+						confirmDelete = false;
+					}}
+				>
+					Cancel
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.blue-filter-img {
+		filter: invert(22%) sepia(100%) saturate(1000%) hue-rotate(180deg) brightness(100%)
+			contrast(100%);
+	}
 
+	.trash:hover {
+            filter: invert(33%) sepia(100%) saturate(7488%) hue-rotate(1deg) brightness(108%) contrast(131%);
+        }
+</style>