Skip to content

Commit

Permalink
Merge pull request #38 from Philippebrouillet/redesign
Browse files Browse the repository at this point in the history 
feat: redesign
  • Loading branch information
@gemini-15
gemini-15 authored Sep 10, 2024
2 parents dd48e18 + 32bc68a commit 1c1570b
Show file tree
Hide file tree
Showing 37 changed files with 550 additions and 299 deletions.
2 changes: 1 addition & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,4 @@ node_modules
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
nohup.out
nohup.out
10 changes: 6 additions & 4 deletions src/app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 || [];
Expand All @@ -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>
2 changes: 1 addition & 1 deletion src/lib/components/BigModal.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/MobileNav.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down
180 changes: 111 additions & 69 deletions src/lib/components/NavConversationItem.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
62 changes: 46 additions & 16 deletions src/lib/components/NavMenu.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,12 @@
export let loginModalVisible;
let isSubMenuOpen: boolean = false;
let isSubMenuOpen = false;
let magic = false;
let disableLogin = PUBLIC_DISABLE_LOGIN === "true" ? true : false;
let isLogged = disableLogin ? true : false;
console.log(disableLogin)
is_magic_writable.subscribe((val) => {
magic = val;
Expand Down Expand Up @@ -104,49 +104,79 @@
{/if}

<!-- top left corner - remove from class bg-[#141c2a] -->
<div class="bg-[#142343] sticky top-0 flex flex-none items-center justify-between px-3 py-5 max-sm:pt-0">
<a class="flex items-center rounded-xl text-lg font-semibold" href="{PUBLIC_ORIGIN}{base}/">
<Logo classNames="mr-1" />
<div class = "pl-2 text-white"> {PUBLIC_APP_NAME} </div>
<div class="bg-secondary sticky top-0 flex flex-none items-center justify-between px-6 pt-6 pb-8 max-sm:pt-0">
<a class="flex items-center rounded-xl text-xl font-semibold" href="{PUBLIC_ORIGIN}{base}/">
<Logo classNames="mr-1 h-[36px] w-[42px]" />
<div class = "pl-1 text-customBlack"> {PUBLIC_APP_NAME} </div>
</a>


<a
class='customHover'
href={`${base}/`}
class="flex rounded-lg border bg-white px-2 py-0.5 text-center shadow-sm hover:shadow-none dark:border-mithril-border dark:bg-sidebar"
>
New Chat
<img
class="w-8 h-8 blueImg"
alt="redirect to page in new tab icon"
src="{PUBLIC_ORIGIN || $page.url.origin}{base}/{PUBLIC_APP_ASSETS}/newChat.png"
title="link to open new page"
/>
</a>
</div>
<!-- left side bar
style = "background-color: #141c2a !important;"
-->
<div
class="bg-[#142343] scrollbar-custom flex flex-col gap-1 overflow-y-auto px-3 pb-3 pt-2 dark:from-gray-800/30"
class="bg-secondary scrollbar-custom flex flex-col gap-1 overflow-y-auto px-6 pb-3 dark:from-gray-800/30"

>
>
{#each conversations as conv (conv.id)}
<div class="py-1">
<NavConversationItem on:editConversationTitle on:deleteConversation {conv}/>
</div>
{/each}
</div>

<div class="display position relative inline-block bg-[#142343] flex justify-center items-center pb-4">
<div class="display position relative bg-secondary flex justify-center items-center pb-4">
{#if !disableLogin}
<div
class="rounded-2xl text-center bg-[#0d1830] flex items-center justify-center group h-11 -lg text-white w-[96%] hover:bg-gray-600 font-semibold"
class="rounded-2xl text-center bg-newPrimary flex items-center justify-center group h-11 -lg text-customBlack w-[96%] hover:bg-gray-600 font-semibold"
on:click={toggleSubMenu}
on:keydown={handleKeyDown}
>
{email_addr.length > 0 ? email_addr.substring(0, 20) : "Not logged in"}
</div>
{:else}
<div class="flex flex-col gap-4 w-full items-center px-6">

<div
class="hover:bg-gradient-to-r from-[#1485e6] to-[#01F8FF] p-0.2 rounded-2xl text-center bg-[#0d1830] flex items-center justify-center group h-11 -lg text-white w-[96%] font-semibold">
class="border customHover border-tertiary active:scale-95 transition-all duration-100 rounded-xl text-center bg-newPrimary flex items-center justify-center group h-[62px] w-[96%] font-semibold">
<a href="https://github.com/mithril-security/blind_llama_client/blob/main/docs/docs/whitepaper/blind_llama_whitepaper.pdf" target="_blank" rel="noopener noreferrer"
class="bg-newPrimary py-2 text-center block text-tertiary rounded-xl w-[99%]">
<div class="flex items-center w-full justify-center gap-1 text-lg"><img
class="w-8 h-8 transform translate-y-[-1.5px]"
alt="shield"
src="{PUBLIC_ORIGIN || $page.url.origin}{base}/{PUBLIC_APP_ASSETS}/shield.png"

/>Security manifest</div>

</a>
</div>
<div
class=" customHover active:scale-95 transition-all duration-100 rounded-xl text-center bg-newPrimary flex items-center justify-center group h-[62px] text-customBlack w-[96%] font-semibold">
<a href="https://blindllama.mithrilsecurity.io/en/latest/docs/getting-started/how-we-achieve-zero-trust/" target="_blank" rel="noopener noreferrer"
class="bg-newPrimary block py-2 text-center text-customBlack rounded-xl w-[99%] text-lg">
How BlindChat works
</a>
</div>
<div
class=" customHover mb-4 active:scale-95 transition-all duration-100 rounded-xl text-center bg-newPrimary flex items-center justify-center group h-[62px] text-customBlack w-[96%] font-semibold">
<a href="https://1qdag6eehid.typeform.com/to/EFrGfL1u" target="_blank" rel="noopener noreferrer"
class="bg-[#0d1830] px-8 block py-2 text-center text-white rounded-2xl w-[99%]">
class="bg-newPrimary block py-2 text-center text-customBlack rounded-xl w-[99%] text-lg">
Give Feedback
</a>
</div>
</div>
{/if}

{#if isSubMenuOpen}
Expand All @@ -157,7 +187,7 @@ style = "background-color: #141c2a !important;"
<div>
<div class="flex justify-center" style="position: relative;">
<a href="https://1qdag6eehid.typeform.com/to/EFrGfL1u" target="_blank" rel="noopener noreferrer"
class="px-8 block py-3 text-center h-11 text-white rounded-2xl w-[100%]">
class="px-8 block py-3 text-center h-11 text-customBlack rounded-2xl w-[100%]">
Give Feedback
</a>
<img
Expand All @@ -173,7 +203,7 @@ style = "background-color: #141c2a !important;"
<button
on:click={logoutSubmit}
type="button"
class="px-8 py-3 text-center h-11 text-white hover:bg-gray-600 rounded-2xl"
class="px-8 py-3 text-center h-11 text-customBlack hover:bg-gray-600 rounded-2xl"
style="width: 100%;"
>
<p class="">Log out</p>
Expand Down
Loading

0 comments on commit 1c1570b

Please sign in to comment.