Spaces:
Running
Running
File size: 3,487 Bytes
fc69895 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
<script lang="ts">
import { base } from "$app/paths";
import { page } from "$app/state";
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 type { ConvSidebar } from "$lib/types/ConvSidebar";
import EditConversationModal from "$lib/components/EditConversationModal.svelte";
import { requireAuthUser } from "$lib/utils/auth";
interface Props {
conv: ConvSidebar;
readOnly?: true;
ondeleteConversation?: (id: string) => void;
oneditConversationTitle?: (payload: { id: string; title: string }) => void;
}
let { conv, readOnly, ondeleteConversation, oneditConversationTitle }: Props = $props();
let confirmDelete = $state(false);
let renameOpen = $state(false);
</script>
<a
data-sveltekit-noscroll
onmouseleave={() => {
confirmDelete = false;
}}
href="{base}/conversation/{conv.id}"
class="group flex h-[2.15rem] flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 max-sm:h-10
{conv.id === page.params.id ? 'bg-gray-100 dark:bg-gray-700' : ''}"
>
<div class="my-2 min-w-0 flex-1 truncate first-letter:uppercase">
<span>
{#if confirmDelete}
<span class="mr-1 font-semibold"> Delete? </span>
{/if}
{conv.title}
</span>
</div>
{#if !readOnly}
{#if confirmDelete}
<button
type="button"
class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
title="Cancel delete action"
onclick={(e) => {
e.preventDefault();
if (requireAuthUser()) return;
confirmDelete = false;
}}
>
<CarbonClose 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 md:hidden md:group-hover:flex"
title="Confirm delete action"
onclick={(e) => {
e.preventDefault();
if (requireAuthUser()) return;
confirmDelete = false;
ondeleteConversation?.(conv.id.toString());
}}
>
<CarbonCheckmark
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 md:hidden md:group-hover:flex"
title="Edit conversation title"
onclick={(e) => {
e.preventDefault();
if (requireAuthUser()) return;
renameOpen = true;
}}
>
<CarbonEdit 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 md:hidden md:group-hover:flex"
title="Delete conversation"
onclick={(event) => {
event.preventDefault();
if (requireAuthUser()) return;
if (event.shiftKey) {
ondeleteConversation?.(conv.id.toString());
} else {
confirmDelete = true;
}
}}
>
<CarbonTrashCan
class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300"
/>
</button>
{/if}
{/if}
</a>
<!-- Edit title modal -->
{#if renameOpen}
<EditConversationModal
open={renameOpen}
title={conv.title}
onclose={() => (renameOpen = false)}
onsave={(payload) => {
renameOpen = false;
oneditConversationTitle?.({ id: conv.id.toString(), title: payload.title });
}}
/>
{/if}
|