Amélioration du design
This commit is contained in:
parent
43e22385b4
commit
f2a5366281
@ -17,7 +17,7 @@ if (!$this->title) $this->title = 'IA Assistant';
|
||||
<title><?= $this->escape($this->title) ?></title>
|
||||
<?= $this->head() ?>
|
||||
</head>
|
||||
<body>
|
||||
<body class="bg-body-secondary">
|
||||
<nav class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Openai</h5>
|
||||
|
||||
@ -12,7 +12,7 @@ if (!$this->title) $this->title = 'IA Assistant';
|
||||
<title><?= $this->escape($this->title) ?></title>
|
||||
<?= $this->head() ?>
|
||||
</head>
|
||||
<body class="d-flex align-items-center py-4">
|
||||
<body class="d-flex align-items-center py-4 bg-body-secondary">
|
||||
|
||||
<?= $content ?>
|
||||
|
||||
|
||||
@ -412,44 +412,40 @@
|
||||
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<h1 class="text-center fw-lighter">{assistant_title}</h1>
|
||||
<header class="p-2 text-bg-dark">
|
||||
<h1 class="text-center fw-lighter h3">{assistant_title}</h1>
|
||||
|
||||
<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}
|
||||
<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}
|
||||
<option value={config.id}>{config.title}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{#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-danger" on:click={deleteAssistant} title="Supprimer l'assistant {assistant_title}"><span class="icon-delete"></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 btn-sm" on:click={deleteAssistant} title="Supprimer l'assistant {assistant_title}"><span class="icon-delete"></span></button>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
{#if messages.length}
|
||||
<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-info" on:click="{exportMessages}" title="Exporter la conversation"><span class="icon-file_download"></span></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 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>
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="chat-container" bind:this="{chatContainer}" >
|
||||
<div class="container" bind:this="{chatContainer}">
|
||||
{#each messages as message, index (index)}
|
||||
<ChatMessage message="{message}"
|
||||
message_index={index} model_id={assistant.model}
|
||||
@ -461,12 +457,14 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<textarea class="chat-input" rows="1"
|
||||
<footer class="p-2 border-top border-dark bg-secondary">
|
||||
<div class="container">
|
||||
<textarea class="shadow form-control form-control-lg" rows="1"
|
||||
bind:this="{chatInput}"
|
||||
on:keyup={handleChatInputKey}
|
||||
placeholder="Saisissez votre message ici..."
|
||||
aria-label="Chat with AI"></textarea>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<Modal bind:this="{modal}" ariaLabelledby="editAssistantModal">
|
||||
@ -476,12 +474,9 @@
|
||||
<style lang="scss">
|
||||
|
||||
header {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
padding: 8px;
|
||||
background-color: var(--bs-gray-800);
|
||||
}
|
||||
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -497,49 +492,17 @@
|
||||
& > select {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
& > button {
|
||||
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
main {
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
button.clear {
|
||||
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>
|
||||
|
||||
|
||||
@ -115,20 +115,24 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
.message {
|
||||
padding: 16px;
|
||||
|
||||
&.assistant {
|
||||
background-color: var(--bs-gray-300);
|
||||
}
|
||||
|
||||
.assistant {
|
||||
background-color: #f0f0f0;
|
||||
&.user {
|
||||
background-color: var(--bs-gray-500);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{#if message.role != 'system'}
|
||||
|
||||
<!-- 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}
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
@ -145,14 +149,14 @@
|
||||
<span class="icon-edit"></span>
|
||||
</button>
|
||||
{: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}>
|
||||
<span class="icon-content_copy"></span>
|
||||
</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>
|
||||
</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>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
@ -9,10 +9,6 @@ body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #cccccc;
|
||||
}
|
||||
|
||||
#navBtn {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user