ilhooq/ai-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Amélioration du design

Browse Source
This commit is contained in:
Sylvain Philip 2024-09-10 19:04:49 +02:00
parent 43e22385b4
commit f2a5366281
5 changed files with 30 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
modules/site/layouts/main.php
View File

@ -17,7 +17,7 @@ if (!$this->title) $this->title = 'IA Assistant';
<title><?= $this->escape($this->title) ?></title> <title><?= $this->escape($this->title) ?></title>
<?= $this->head() ?> <?= $this->head() ?>
</head> </head>
<body> <body class="bg-body-secondary">
<nav class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel"> <nav class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header"> <div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Openai</h5> <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Openai</h5>

2
modules/site/layouts/minimal.php
View File

@ -12,7 +12,7 @@ if (!$this->title) $this->title = 'IA Assistant';
<title><?= $this->escape($this->title) ?></title> <title><?= $this->escape($this->title) ?></title>
<?= $this->head() ?> <?= $this->head() ?>
</head> </head>
<body class="d-flex align-items-center py-4"> <body class="d-flex align-items-center py-4 bg-body-secondary">
<?= $content ?> <?= $content ?>

69
vite/src/ChatApp.svelte
View File

@ -412,44 +412,40 @@
</script> </script>
<header> <header class="p-2 text-bg-dark">
<h1 class="text-center fw-lighter">{assistant_title}</h1> <h1 class="text-center fw-lighter h3">{assistant_title}</h1>
<div class="toolbar"> <div class="toolbar">
<button class="btn btn-primary" on:click={createAssistant} title="Créer un assistant"><span class="icon-add"></span></button> <button class="btn btn-primary btn-sm" on:click={createAssistant} title="Créer un assistant"><span class="icon-add"></span></button>
{#if assistants.length} {#if assistants.length}
<select class="form-select" bind:value={assistant_id} on:change={handleChange}> <select class="form-select form-select-sm" bind:value={assistant_id} on:change={handleChange}>
{#each assistants as config} {#each assistants as config}
<option value={config.id}>{config.title}</option> <option value={config.id}>{config.title}</option>
{/each} {/each}
</select> </select>
{#if assistant} {#if assistant}
<button class="btn btn-secondary" on:click={editAssistant} title="Modifier l'assistant {assistant_title}"><span class="icon-edit"></span></button> <button class="btn btn-secondary btn-sm" on:click={editAssistant} title="Modifier l'assistant {assistant_title}"><span class="icon-edit"></span></button>
<button class="btn btn-danger" on:click={deleteAssistant} title="Supprimer l'assistant {assistant_title}"><span class="icon-delete"></span></button> <button class="btn btn-danger btn-sm" on:click={deleteAssistant} title="Supprimer l'assistant {assistant_title}"><span class="icon-delete"></span></button>
{/if} {/if}
{/if} {/if}
{#if messages.length} {#if messages.length}
<div class="separator d-none d-sm-block"></div> <div class="separator d-none d-sm-block"></div>
<button class="btn btn-warning clear" on:click="{clearMessages}" title="Effacer les messages"><span class="icon-clean"></button> <button class="btn btn-warning btn-sm clear" on:click="{clearMessages}" title="Effacer les messages"><span class="icon-clean"></button>
<button class="btn btn-info" on:click="{exportMessages}" title="Exporter la conversation"><span class="icon-file_download"></span></button> <button class="btn btn-info btn-sm" on:click="{exportMessages}" title="Exporter la conversation"><span class="icon-file_download"></span></button>
<div class="separator d-none d-sm-block"></div> <div class="separator d-none d-sm-block"></div>
{/if} {/if}
<input id="import-file" type="file" accept=".json" on:change="{importMessages}" style="display:none" /> <input id="import-file" type="file" accept=".json" on:change="{importMessages}" style="display:none" />
<label for="import-file" class="btn btn-info"><span class="icon-file_upload" title="Importer une conversation"></span></label> <label for="import-file" class="btn btn-info btn-sm"><span class="icon-file_upload" title="Importer une conversation"></span></label>
</div> </div>
</header> </header>
<main> <main>
<div class="chat-container" bind:this="{chatContainer}" > <div class="container" bind:this="{chatContainer}">
{#each messages as message, index (index)} {#each messages as message, index (index)}
<ChatMessage message="{message}" <ChatMessage message="{message}"
message_index={index} model_id={assistant.model} message_index={index} model_id={assistant.model}
@ -461,12 +457,14 @@
</div> </div>
</main> </main>
<footer> <footer class="p-2 border-top border-dark bg-secondary">
<textarea class="chat-input" rows="1" <div class="container">
<textarea class="shadow form-control form-control-lg" rows="1"
bind:this="{chatInput}" bind:this="{chatInput}"
on:keyup={handleChatInputKey} on:keyup={handleChatInputKey}
placeholder="Saisissez votre message ici..." placeholder="Saisissez votre message ici..."
aria-label="Chat with AI"></textarea> aria-label="Chat with AI"></textarea>
</div>
</footer> </footer>
<Modal bind:this="{modal}" ariaLabelledby="editAssistantModal"> <Modal bind:this="{modal}" ariaLabelledby="editAssistantModal">
@ -476,12 +474,9 @@
<style lang="scss"> <style lang="scss">
header { header {
background-color: #333; background-color: var(--bs-gray-800);
color: white;
padding: 8px;
} }
.toolbar { .toolbar {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -497,49 +492,17 @@
& > select { & > select {
width: auto; width: auto;
} }
/*
& > button {
}
*/
} }
main { main {
flex-grow: 1; flex-grow: 1;
overflow-y: auto; overflow-y: auto;
background-color: #fff;
} }
button.clear { button.clear {
right: 0; right: 0;
} }
footer {
width: 100%;
padding: 8px;
display: flex;
justify-content: center;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.chat-input {
width: 100%;
max-width: 768px;
padding: 8px;
border-width: 1px;
border-color: rgba(0, 0, 0, 0.1);
border-radius: 6px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
min-height: 40px;
}
.chat-container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 768px;
margin: 0 auto;
overflow-wrap: break-word;
}
</style> </style>

18
vite/src/ChatMessage.svelte
View File

@ -115,20 +115,24 @@
} }
</script> </script>
<style> <style lang="scss">
.message { .message {
padding: 16px; padding: 16px;
&.assistant {
background-color: var(--bs-gray-300);
} }
.assistant { &.user {
background-color: #f0f0f0; background-color: var(--bs-gray-500);
}
} }
</style> </style>
{#if message.role != 'system'} {#if message.role != 'system'}
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
<div class={message.role + ' message'} on:click={handleClick}> <div class={message.role + ' message rounded-2 my-3 shadow'} on:click={handleClick}>
{#if isEditing} {#if isEditing}
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
@ -145,14 +149,14 @@
<span class="icon-edit"></span> <span class="icon-edit"></span>
</button> </button>
{:else if message.role == 'assistant'} {:else if message.role == 'assistant'}
<span class="d-inline-block py-1 px-2 me-2 border-end">{model_id}</span> <span class="d-inline-block py-1 px-2 me-2 border-end border-secondary-subtle">{model_id}</span>
<button class="btn btn-primary btn-sm" title="Copier" on:click={handleCopy}> <button class="btn btn-primary btn-sm" title="Copier" on:click={handleCopy}>
<span class="icon-content_copy"></span> <span class="icon-content_copy"></span>
</button> </button>
<button class="btn btn-primary btn-sm" on:click={handleRegenerate} title="Régénérer"> <button class="btn btn-success btn-sm" on:click={handleRegenerate} title="Régénérer">
<span class="icon-loop"></span> <span class="icon-loop"></span>
</button> </button>
<button class="btn btn-primary btn-sm" on:click={handleDelete} title="Supprimer le message"> <button class="btn btn-danger btn-sm" on:click={handleDelete} title="Supprimer le message">
<span class="icon-delete"></span> <span class="icon-delete"></span>
</button> </button>
{/if} {/if}

4
vite/src/styles/site.scss
View File

@ -9,10 +9,6 @@ body {
height: 100%; height: 100%;
} }
body {
background-color: #cccccc;
}
#navBtn { #navBtn {
position: fixed; position: fixed;
top: 10px; top: 10px;