Inbox mail view and create modal

components/inbox-mail/DeleteInboxMailModal.tsx

@@ -0,0 +1,97 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { IconAlertTriangle } from "@tabler/icons-react";
+import { Fragment, useMemo, useRef } from "react";
+
+interface ConfirmDeleteModalProps {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    onConfirm: () => void;
+    translator: (key: string) => string;
+}
+
+
+export default function DeleteInboxMailModal(props: ConfirmDeleteModalProps) {
+
+    const cancelRef = useRef(null);
+    const t = useMemo(() => props.translator, [props.translator]);
+
+    return (
+        <Transition.Root show={props.open} as={Fragment}>
+            <Dialog as="div" className="relative z-50" initialFocus={cancelRef} onClose={props.setOpen ? props.setOpen : () => null}>
+                <Transition.Child
+                    as={Fragment}
+                    enter="ease-out duration-300"
+                    enterFrom="opacity-0"
+                    enterTo="opacity-100"
+                    leave="ease-in duration-200"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                >
+                    <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+                </Transition.Child>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full justify-center p-4 items-center">
+                        <Transition.Child
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                            enterTo="opacity-100 translate-y-0 sm:scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+                            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                        >
+                            <div className="flex justify-center w-full">
+                                <div className="w-full max-w-md">
+                                    <Dialog.Panel className="relative rounded-lg bg-white shadow-xl sm:my-8">
+                                        <div className="p-6">
+                                            <div className="sm:flex sm:items-start">
+                                                <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center 
+                                                                    rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                                                    <IconAlertTriangle className="h-6 w-6 text-red-600" />
+                                                </div>
+
+                                                <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
+                                                    <Dialog.Title
+                                                        as="h3"
+                                                        className="text-lg font-medium leading-6 text-gray-900"
+                                                    >
+                                                        {t("inboxMail.deleteHeader")}
+                                                    </Dialog.Title>
+
+                                                    <p className="mt-2 text-sm text-gray-600">{t("inboxMail.deleteConfirmation")}</p>
+                                                </div>
+                                            </div>
+                                            <div className="mt-6 sm:flex sm:flex-row-reverse gap-3">
+                                                <button
+                                                    onClick={() => {
+                                                        props.onConfirm();
+                                                        props.setOpen(false);
+                                                    }}
+                                                    className="inline-flex w-full justify-center rounded-md border border-transparent 
+                                                                bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm 
+                                                                hover:bg-red-700 sm:ml-3 sm:w-auto sm:text-sm"
+                                                >
+                                                    {t("inboxMail.deleteButton")}
+                                                </button>
+                                                <button
+                                                    ref={cancelRef}
+                                                    onClick={() => props.setOpen(false)}
+                                                    className="inline-flex w-full justify-center rounded-md border border-gray-300 
+                                                                bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm 
+                                                                hover:bg-gray-50 sm:w-auto sm:text-sm"
+                                                >
+                                                    {t("inboxMail.cancelButton")}
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </Dialog.Panel>
+                                </div>
+                            </div>
+                        </Transition.Child>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition.Root>
+    );
+}

components/inbox-mail/InboxMailAdminPanel.tsx

@@ -0,0 +1,129 @@
+import React, { useCallback } from "react";
+import { InboxMailThread, InboxMailThreadSupportProgressState, User } from "./types-mail";
+import { IconExternalLink, IconProgressCheck } from "@tabler/icons-react";
+import KernDropdown from "../KernDropdown";
+import { addUserToOrganization, removeUserFromOrganization } from "./service-mail";
+
+interface ProgressOption {
+    name: string;
+    value: InboxMailThreadSupportProgressState;
+}
+
+interface InboxMailAdminPanelProps {
+    selectedThread: InboxMailThread;
+    progressStateOptions: ProgressOption[];
+    handleInboxMailProgressChange: (value: InboxMailThreadSupportProgressState) => void;
+    currentUser: User;
+}
+
+function InboxMailAdminPanel(props: InboxMailAdminPanelProps) {
+    // No translations needed, admin only
+    const assignAndJump = useCallback((toConversation: boolean) => {
+        if (!props.currentUser) return;
+        const currentOrganizationId = props.currentUser?.organizationId;
+        if (!currentOrganizationId) {
+            addUserToOrganization(props.currentUser.mail, props.selectedThread.organizationName, (res) => {
+                jumptoConversationOrProject(toConversation);
+
+            });
+        } else if (currentOrganizationId === props.selectedThread.organizationId) {
+            jumptoConversationOrProject(toConversation);
+
+        } else {
+            removeUserFromOrganization(props.currentUser.mail, (res) => {
+                addUserToOrganization(props.currentUser.mail, props.selectedThread.organizationName, (res) => {
+                    jumptoConversationOrProject(toConversation);
+                });
+            });
+        }
+    }, [props.currentUser, props.selectedThread]);
+
+    const jumptoConversationOrProject = useCallback((toConversation: boolean) => {
+        if (toConversation) {
+            window.open(`/cognition/projects/${props.selectedThread.metaData?.projectId}/ui/${props.selectedThread.metaData?.conversationId}`, '_blank');
+        }
+        else {
+            window.open(`/cognition/projects/${props.selectedThread.metaData.projectId}/pipeline`, '_blank');
+        }
+    }, [props.selectedThread.metaData]);
+
+    return (
+        <div>
+            <div className="flex items-center gap-x-2">
+                <div className="flex items-center gap-x-1 mb-2 mt-1 overflow-y-visible z-10">
+                    <span className="text-sm font-medium mr-2">Progress:</span>
+                    <KernDropdown
+                        dropdownWidth="w-40"
+                        buttonName={
+                            props.progressStateOptions.find(
+                                (option) => option.value === props.selectedThread.progressState
+                            )?.name || "Set progress"
+                        }
+                        options={props.progressStateOptions}
+                        selectedOption={(option: { label: string; value: InboxMailThreadSupportProgressState }) =>
+                            props.handleInboxMailProgressChange(option.value)
+                        }
+                    />
+                </div>
+                {props.selectedThread.progressState !== InboxMailThreadSupportProgressState.PENDING && props.selectedThread.metaData?.supportOwnerName && (
+                    <div className="bg-orange-400 text-white rounded-full px-2 py-0.5 text-xs flex items-center gap-x-2 ml-2">
+                        <IconProgressCheck className="w-5 h-5" />
+                        {props.selectedThread.metaData.supportOwnerName.first}{" "}
+                        {props.selectedThread.metaData.supportOwnerName.last}
+                    </div>
+                )}
+            </div>
+
+            {props.selectedThread.metaData?.projectId && (
+                <div className="flex items-center gap-3 ml-2 my-2 px-3 py-1 rounded-xl bg-slate-400/60 text-white w-fit">
+                    <div className="flex items-center gap-1.5 text-xs">
+                        <span className="font-semibold">Project</span>
+                    </div>
+
+                    <div className="flex items-center gap-1.5 text-xs bg-slate-400 px-2 py-0.5 rounded-md">
+                        <span>ID:</span>
+                        <span>{props.selectedThread.metaData.projectId}</span>
+                    </div>
+                    <div className="flex items-center gap-1.5 text-xs bg-slate-400 px-2 py-0.5 rounded-md">
+                        <span>{props.selectedThread.metaData.projectName}</span>
+                    </div>
+                    <button
+                        className="flex items-center gap-1.5 text-xs bg-slate-400 px-2 py-0.5 rounded-md"
+                        onClick={() =>
+                            assignAndJump(false)
+                        }
+                    >
+                        <IconExternalLink className="w-4 h-4" />
+                    </button>
+                </div>
+            )
+            }
+
+            {
+                props.selectedThread.metaData?.conversationId && (
+                    <div className="flex items-center gap-3 ml-2 my-2 px-3 py-1 rounded-xl bg-gray-400/60 text-white w-fit">
+                        <div className="flex items-center gap-1.5 text-xs">
+                            <span className="font-semibold">Conversation</span>
+                        </div>
+
+                        <div className="flex items-center gap-1.5 text-xs bg-gray-400 px-2 py-0.5 rounded-md">
+                            <span>ID:</span>
+                            <span>{props.selectedThread.metaData.conversationId}</span>
+                        </div>
+                        <div className="flex items-center gap-1.5 text-xs bg-gray-400 px-2 py-0.5 rounded-md">
+                            <span>{props.selectedThread.metaData.conversationHeader || "N/A"}</span>
+                        </div>
+                        <button
+                            className="flex items-center gap-1.5 text-xs bg-gray-400 px-2 py-0.5 rounded-md"
+                            onClick={() => assignAndJump(true)}
+                        >
+                            <IconExternalLink className="w-4 h-4" />
+                        </button>
+                    </div>
+                )
+            }
+        </div >
+    );
+};
+
+export default InboxMailAdminPanel;

components/inbox-mail/InboxMailItem.tsx

@@ -0,0 +1,69 @@
+import { IconTrash } from "@tabler/icons-react";
+import KernButton from "../kern-button/KernButton";
+import DeleteInboxMailModal from "./DeleteInboxMailModal";
+import { InboxMail, User } from "./types-mail";
+import { useCallback, useMemo, useState } from "react";
+import { formatDisplayTimestampFull } from "@/submodules/javascript-functions/date-parser";
+
+interface ThreadMailItemProps {
+    mail: InboxMail;
+    currentUser: User;
+    translator: (key: string) => string;
+    onDelete?: (id: string) => void;
+}
+
+export default function ThreadMailItem(props: ThreadMailItemProps) {
+
+    const t = useMemo(() => props.translator, [props.translator]);
+    const [openDeleteConfirm, setOpenDeleteConfirm] = useState(false);
+    const handleConfirmDelete = useCallback(() => {
+        if (props.onDelete) {
+            props.onDelete(props.mail.id);
+        }
+    }, [props.mail.id, props.onDelete]);
+
+    return (
+        <>
+            <div className="py-3 px-4 mb-2 border border-gray-300 rounded-lg shadow-sm bg-white">
+                <div className="flex items-center justify-between text-sm">
+                    <div className="grow min-w-0">
+                        <div className="flex items-center justify-between gap-x-2 flex-nowrap">
+                            <span className="font-medium text-gray-700">
+                                {props.mail.senderName?.first} {props.mail.senderName?.last}
+                            </span>
+
+                            <span className="ml-auto text-xs text-gray-400 whitespace-nowrap">
+                                {formatDisplayTimestampFull(props.mail.createdAt)}
+                            </span>
+                        </div>
+
+                        <span className="text-sm text-gray-500">
+                            {t("inboxMail.to")}: {props.mail.recipientNames.map((name) => `${name.first} ${name.last}`).join(", ")}
+                        </span>
+                    </div>
+                </div>
+
+                <div className="border-t border-gray-200 mt-2 pt-2 text-gray-700 whitespace-pre-line break-words">
+                    {props.mail.content}
+                </div>
+
+                <div className="mt-2 flex items-center justify-end space-x-3">
+                    {props.currentUser.id === props.mail.senderId && (
+                        <KernButton
+                            icon={IconTrash}
+                            size="small"
+                            className="text-gray-700 hover:text-red-700"
+                            onClick={() => setOpenDeleteConfirm(true)}
+                        />
+                    )}
+                </div>
+            </div>
+            <DeleteInboxMailModal
+                open={openDeleteConfirm}
+                setOpen={setOpenDeleteConfirm}
+                onConfirm={handleConfirmDelete}
+                translator={props.translator}
+            />
+        </>
+    );
+}

components/inbox-mail/InboxMailNavigator.tsx

@@ -0,0 +1,73 @@
+import { MemoIconMail } from "@/submodules/react-components/components/kern-icons/icons";
+import { useRouter } from "next/router";
+import tinycolor from 'tinycolor2'
+import { useNewMailCount } from "./helper";
+import { useCallback, useMemo } from "react";
+
+type InboxMailNavigatorProps = {
+    forChatArea?: boolean;
+    project?: { customerColorPrimary: string; id: string; };
+    chatId?: string;
+    refreshToken?: any;
+}
+
+export default function InboxMailNavigator(props: InboxMailNavigatorProps) {
+    const router = useRouter();
+
+    const navigateToMailPage = useCallback(() => {
+        const chatIdParam = props.chatId ? `?chatId=${props.chatId}` : '';
+        const projectIdParam = props.project ? props.chatId ? `&projectId=${props.project.id}` : `?projectId=${props.project.id}` : '';
+        router.push(`/inbox-mail${chatIdParam}${projectIdParam}`);
+    }, [props.chatId, props.project]);
+
+    const isLightDesign = useMemo(() => tinycolor(props.project?.customerColorPrimary).isLight(), [props.project?.customerColorPrimary]);
+
+    const buttonClasses = useMemo(() => {
+        if (props.forChatArea) {
+            const classes = "items-center justify-center w-8 h-8 border group flex -x-3 rounded-md p-1 text-sm leading-6 font-semibold"
+            if (isLightDesign) return 'bg-gray-100 text-gray-700 border-gray-300 ' + classes;
+            else return 'bg-zinc-900 text-zinc-100 border-zinc-700 ' + classes;
+        }
+        return "text-gray-400 hover:text-green-600 hover:bg-zinc-800 border-gray-700 items-center justify-center w-10 h-10 border group flex -x-3 rounded-md p-2 text-sm leading-6 font-semibold"
+    }, [props.forChatArea, isLightDesign]);
+
+    return <div className="relative">
+        <button className={buttonClasses} onClick={navigateToMailPage}>
+            <MemoIconMail />
+            <InboxMailBadge forChatArea={props.forChatArea} refreshToken={props.refreshToken} />
+        </button>
+    </div>
+}
+
+
+
+interface NewMailBadgeProps {
+    forChatArea?: boolean;
+    refreshInterval?: number; // optional, default to 60000ms
+    refreshToken?: any; // optional, to trigger refresh when changed
+}
+
+export function InboxMailBadge(props: NewMailBadgeProps) {
+    const newMailCount = useNewMailCount(props.refreshInterval, props.refreshToken);
+
+    if (newMailCount === 0) return;
+
+    const badgeClasses = props.forChatArea
+        ? 'top-0 right-0'
+        : 'top-1 right-1';
+
+    return (
+        <div className={`absolute flex items-center justify-center w-3 h-3 bg-red-500 rounded-full text-white text-[0.625rem] font-bold pointer-events-none ${badgeClasses}`}>
+            {newMailCount}
+        </div>
+    );
+}
+
+export function InboxMailTitleBadge(props: { newMailCount?: number, refreshToken?: any }) {
+    return (
+        <div className="relative inline-flex items-center pr-5">
+            <span >Inbox Mail</span>
+            <InboxMailBadge forChatArea={false} refreshToken={props.refreshToken} />
+        </div>
+    );
+}