@recogito/metaphor-annotation-plugin 0.0.0-stage → 0.0.11-beta.0

package/dist/pages/_components/TeiMetaphorView/utils.d.ts

@@ -0,0 +1,15 @@
+import { AnnotationBody, TEIAnnotation } from '@recogito/react-text-annotator';
+import { AnnotationType } from '../shared/types';
+export declare const getAnnotationType: (annotation: TEIAnnotation) => AnnotationType;
+export declare const getQuote: (annotation: TEIAnnotation) => string;
+export declare const setAnnotationType: (annotation: TEIAnnotation, type: AnnotationType) => TEIAnnotation;
+export declare const getStartOffset: (a: TEIAnnotation) => string;
+export declare const sortAnnotationsByCharPosition: (annotations: TEIAnnotation[]) => TEIAnnotation[];
+export declare const interleaveLinkedAnnotations: (metaphor: TEIAnnotation, words: TEIAnnotation[]) => {
+    value: string;
+    type: "metaphor" | "word";
+}[];
+export declare const isMRWTypeBody: (b: AnnotationBody) => string | false | undefined;
+export declare const getMRWType: (a: TEIAnnotation) => string | undefined;
+export declare function timeAgo(date: Date | string | number, locale?: string): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/pages/_components/TeiMetaphorView/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/pages/_components/TeiMetaphorView/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EAEd,aAAa,EAEd,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAYjD,eAAO,MAAM,iBAAiB,GAAI,YAAY,aAAa,KAAG,cAEjC,CAAC;AAE9B,eAAO,MAAM,QAAQ,GAAI,YAAY,aAAa,KAAG,MACK,CAAC;AAE3D,eAAO,MAAM,iBAAiB,GAC5B,YAAY,aAAa,EACzB,MAAM,cAAc,KACnB,aAaF,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,GAAG,aAAa,KAAG,MAM1C,CAAC;AAET,eAAO,MAAM,6BAA6B,GAAI,aAAa,aAAa,EAAE,oBAGvE,CAAC;AAEJ,eAAO,MAAM,2BAA2B,GACtC,UAAU,aAAa,EACvB,OAAO,aAAa,EAAE;WA2DC,MAAM;UAAQ,UAAU,GAAG,MAAM;GAiEzD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,GAAG,cAAc,+BAItC,CAAC;AAEV,eAAO,MAAM,UAAU,GAAI,GAAG,aAAa,uBACN,CAAC;AAEtC,wBAAgB,OAAO,CACrB,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,EAC5B,MAAM,GAAE,MAAa,GACpB,MAAM,CAkCR"}

package/dist/pages/_components/TeiMetaphorView/utils.js

@@ -0,0 +1,146 @@
+import { createBody, } from '@recogito/react-text-annotator';
+export const getAnnotationType = (annotation) => (annotation.bodies || []).find((b) => b.purpose === 'classifying')
+    ?.value;
+export const getQuote = (annotation) => annotation.target.selector.map((s) => s.quote).join(' ');
+export const setAnnotationType = (annotation, type) => {
+    const body = createBody(annotation, {
+        purpose: 'classifying',
+        value: type,
+    });
+    return {
+        ...annotation,
+        bodies: [
+            ...(annotation.bodies || []).filter((b) => b.purpose !== 'classifying'),
+            body,
+        ],
+    };
+};
+export const getStartOffset = (a) => (a.target.selector || []).reduce((lowest, selector) => {
+    // position property can be missing if a selector wasn't fully revived
+    const position = selector?.position;
+    if (!position)
+        return lowest;
+    return !lowest || position < lowest ? position : lowest;
+}, '');
+export const sortAnnotationsByCharPosition = (annotations) => [...annotations].sort((a, b) => getStartOffset(a).localeCompare(getStartOffset(b)));
+export const interleaveLinkedAnnotations = (metaphor, words) => {
+    const metaphorSelectors = metaphor.target.selector || [];
+    const wordSelectors = words
+        .reduce((all, word) => [
+        ...all,
+        ...(word.target.selector || []),
+    ], [])
+        // limit to selectors with a DOM Range
+        .filter((s) => Boolean(s.range));
+    // Shorthand: deflate XML indentation
+    const d = (str) => str.replace(/\s+/g, ' ');
+    // char offset relative to the start of the DOM Range
+    const offsetFromStart = (range, node, offset) => {
+        const r = document.createRange();
+        r.setStart(range.startContainer, range.startOffset);
+        r.setEnd(node, offset);
+        // 0 if it is at or before the start
+        return r.collapsed ? 0 : r.toString().length;
+    };
+    // offsets relative to the start of the metaphor, using start/end from
+    // RevivedTextSelector when available
+    const relativeOffsets = (metaphor, word) => {
+        if (metaphor.start !== undefined &&
+            word.start !== undefined &&
+            word.end !== undefined) {
+            return {
+                start: word.start - metaphor.start,
+                end: word.end - metaphor.start,
+            };
+        }
+        return {
+            start: offsetFromStart(metaphor.range, word.range.startContainer, word.range.startOffset),
+            end: offsetFromStart(metaphor.range, word.range.endContainer, word.range.endOffset),
+        };
+    };
+    const tokens = [];
+    for (const metaphor of metaphorSelectors) {
+        const metaphorRange = metaphor.range;
+        if (!metaphorRange) {
+            if (metaphor.quote)
+                tokens.push({ value: d(metaphor.quote), type: 'metaphor' });
+            continue;
+        }
+        const metaphorText = metaphorRange.toString();
+        const len = metaphorText.length;
+        // MRWs whose range overlaps this metaphor, as offsets in the metaphor's
+        // DOM range, ordered by start position
+        const intersectingWords = wordSelectors
+            .map((w) => ({
+            quote: w.quote,
+            ...relativeOffsets(metaphor, w),
+        }))
+            .filter((w) => w.end > 0 && w.start < len)
+            .map((w) => ({
+            quote: w.quote,
+            start: Math.max(0, Math.min(w.start, len)),
+            end: Math.max(0, Math.min(w.end, len)),
+        }))
+            .sort((a, b) => a.start - b.start);
+        if (intersectingWords.length === 0) {
+            // Nothing to interleave
+            tokens.push({ value: d(metaphor.quote), type: 'metaphor' });
+            continue;
+        }
+        // Head (metaphor) token, if any
+        const head = d(metaphorText.substring(0, intersectingWords[0].start));
+        if (head.trim().length > 0)
+            // Don't add if just whitespace
+            tokens.push({ value: head, type: 'metaphor' });
+        // Loop through intersecting words
+        intersectingWords.forEach((word, idx) => {
+            tokens.push({ value: d(word.quote), type: 'word' });
+            if (idx + 1 < intersectingWords.length) {
+                // If there's another word, compute interim metaphor token
+                const interim = d(metaphorText.substring(word.end, intersectingWords[idx + 1].start));
+                if (interim.trim().length > 0)
+                    // Don't add if just whitespace
+                    tokens.push({ value: interim, type: 'metaphor' });
+            }
+        });
+        // Append tail, if any
+        const tail = d(metaphorText.substring(intersectingWords[intersectingWords.length - 1].end));
+        if (tail.trim().length > 0)
+            tokens.push({ value: tail, type: 'metaphor' });
+    }
+    return tokens;
+};
+export const isMRWTypeBody = (b) => b.purpose === 'classifying' &&
+    'conformsTo' in b &&
+    b.conformsTo === 'mrw_type' &&
+    b.value;
+export const getMRWType = (a) => a.bodies.find(isMRWTypeBody)?.value;
+export function timeAgo(date, locale = 'en') {
+    const timeMs = typeof date === 'number' ? date : new Date(date).getTime();
+    const deltaSeconds = Math.round((timeMs - Date.now()) / 1000);
+    // Cutoffs for different time units in seconds
+    const cutoffs = [
+        60,
+        3600,
+        86400,
+        86400 * 7,
+        86400 * 30,
+        86400 * 365,
+        Infinity,
+    ];
+    const units = [
+        'second',
+        'minute',
+        'hour',
+        'day',
+        'week',
+        'month',
+        'year',
+    ];
+    // Find the ideal unit
+    const unitIndex = cutoffs.findIndex((cutoff) => cutoff > Math.abs(deltaSeconds));
+    const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;
+    // Use the native browser API
+    const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+    return rtf.format(Math.floor(deltaSeconds / divisor), units[unitIndex]);
+}

package/dist/pages/_components/shared/components/Accordion/Accordion.css

@@ -0,0 +1,55 @@
+.accordion-header {
+  display: flex;
+}
+
+.accordion-header[data-state='open'] {
+  border-bottom: none;
+}
+
+button.accordion-trigger {
+  width: 100%;
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  background: transparent;
+  border: none;
+  color: var(--gray-900);
+  outline: none;
+  padding: 0;
+  box-shadow: none;
+}
+
+button.accordion-trigger:hover {
+  box-shadow: none;
+  text-decoration: underline;
+}
+
+button.accordion-trigger:focus-visible {
+  outline: 1px solid var(--bright-blue);
+}
+
+.accordion-chevron {
+  flex-shrink: 0;
+  color: var(--gray-500);
+  transition: transform 0.2s cubic-bezier(0.87, 0, 0.13, 1);
+}
+
+button.accordion-trigger[data-state='open'] .accordion-chevron {
+  transform: rotate(180deg);
+}
+
+.accordion-content {
+  overflow: hidden;
+  font-size: 14px;
+}
+
+div.accordion-item:not(:last-of-type) {
+  border-bottom: 1px solid var(--border-light-color);
+}

package/dist/pages/_components/shared/components/Accordion/Accordion.d.ts

@@ -0,0 +1,6 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+export declare const Accordion: import("react").ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AccordionItem: (props: AccordionPrimitive.AccordionItemProps) => import("react").JSX.Element;
+export declare const AccordionTrigger: (props: AccordionPrimitive.AccordionTriggerProps) => import("react").JSX.Element;
+export declare const AccordionContent: (props: AccordionPrimitive.AccordionContentProps) => import("react").JSX.Element;
+//# sourceMappingURL=Accordion.d.ts.map

package/dist/pages/_components/shared/components/Accordion/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/shared/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAGhE,eAAO,MAAM,SAAS,kLAA0B,CAAC;AAEjD,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,CAAC,kBAAkB,gCAKzE,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,OAAO,kBAAkB,CAAC,qBAAqB,gCAehD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,OAAO,kBAAkB,CAAC,qBAAqB,gCAQhD,CAAC"}

package/dist/pages/_components/shared/components/Accordion/Accordion.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { CaretDownIcon } from '@phosphor-icons/react';
+export const Accordion = AccordionPrimitive.Root;
+export const AccordionItem = (props) => (_jsx(AccordionPrimitive.Item, { ...props, className: `accordion-item ${props.className || ''}` }));
+export const AccordionTrigger = (props) => (_jsx(AccordionPrimitive.Header, { className: 'accordion-header', children: _jsxs(AccordionPrimitive.Trigger, { ...props, className: `accordion-trigger ${props.className || ''}`, children: [props.children, _jsx(CaretDownIcon, { className: 'accordion-chevron', weight: 'bold', "aria-hidden": 'true' })] }) }));
+export const AccordionContent = (props) => (_jsx(AccordionPrimitive.Content, { ...props, className: `accordion-content ${props.className || ''}`, children: _jsx("div", { className: 'accordion-content-inner', children: props.children }) }));

package/dist/pages/_components/shared/components/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Accordion';
+//# sourceMappingURL=index.d.ts.map

package/dist/pages/_components/shared/components/Accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/shared/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/pages/_components/shared/components/Accordion/index.js

@@ -0,0 +1 @@
+export * from './Accordion';

package/dist/pages/_components/shared/components/AccountActions/AccountActions.css

@@ -0,0 +1,49 @@
+.account-actions-trigger.unstyled {
+  border-radius: 50%;
+  margin-left: 0;
+  padding: 0;
+  cursor: pointer;
+}
+
+.account-actions-trigger.unstyled .avatar {
+  height: 30px;
+  width: 30px;
+}
+
+.dropdown-content .account-actions-meta {
+  border-bottom: 1px solid var(--gray-100);
+  margin-bottom: 5px;
+  padding: 3px 10px 8px 10px;
+}
+
+.dropdown-content .account-actions-meta p {
+  margin: 0;
+  line-height: 160%;
+}
+
+.dropdown-content .account-actions-meta .account-actions-nickname {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.dropdown-content .account-actions-meta .account-actions-real-name {
+  color: var(--font-light);
+  font-size: 0.675em;
+  font-weight: 400;
+}
+
+.dropdown-content .account-actions-meta .role-badge {
+  background-color: var(--orange-500);
+  border-radius: 4px;
+  display: block;
+  font-size: 0.675em;
+  line-height: 200%;
+  margin-top: 0.3em;
+  text-align: center;
+}
+
+.dropdown-separator {
+  border-top: 1px solid var(--gray-200);
+  margin: 0.25rem 0.5rem;
+}
+

package/dist/pages/_components/shared/components/AccountActions/AccountActions.d.ts

@@ -0,0 +1,2 @@
+export declare const AccountActions: () => import("react").JSX.Element | null;
+//# sourceMappingURL=AccountActions.d.ts.map

package/dist/pages/_components/shared/components/AccountActions/AccountActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountActions.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/shared/components/AccountActions/AccountActions.tsx"],"names":[],"mappings":"AAyBA,eAAO,MAAM,cAAc,0CA6H1B,CAAC"}

package/dist/pages/_components/shared/components/AccountActions/AccountActions.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import * as Dropdown from '@radix-ui/react-dropdown-menu';
+import { FolderIcon, ListChecksIcon, SignOutIcon, SlidersIcon, UsersIcon, } from '@phosphor-icons/react';
+import { useTranslation } from 'react-i18next';
+import { Avatar, getInitials } from '@recogito/studio-sdk/components';
+import { sdk } from '../../../shared/supabase';
+const { Content, Item, Portal, Root, Trigger } = Dropdown;
+const getRealName = (profile) => [profile.first_name, profile.last_name].filter(Boolean).join(' ');
+const getProfileInitials = (profile) => {
+    if (profile.nickname)
+        return getInitials(profile.nickname);
+    const realname = getRealName(profile);
+    return realname ? getInitials(realname) : '';
+};
+export const AccountActions = () => {
+    const { i18n, t } = useTranslation();
+    const [profile, setProfile] = useState();
+    useEffect(() => {
+        sdk.profile.getMyProfile().then(({ error, data }) => {
+            if (error)
+                console.error(error);
+            else
+                setProfile(data);
+        });
+    }, []);
+    const realname = useMemo(() => (profile ? getRealName(profile) : ''), [profile]);
+    const initials = useMemo(() => (profile ? getProfileInitials(profile) : ''), [profile]);
+    if (!profile)
+        return null;
+    const goto = (url) => () => (window.location.href = url);
+    return (_jsxs(Root, { children: [_jsx(Trigger, { asChild: true, children: _jsx("button", { className: 'unstyled account-actions-trigger', style: { border: 'none' }, "aria-label": t('Account'), children: _jsx(Avatar, { id: profile.id, initials: initials, avatar: profile.avatar_url }) }) }), _jsx(Portal, { children: _jsxs(Content, { className: 'dropdown-content', align: 'end', alignOffset: -10, sideOffset: 8, children: [(Boolean(profile.nickname) || Boolean(realname)) && (_jsxs("section", { className: 'account-actions-meta', children: [profile.nickname && realname ? (_jsxs(_Fragment, { children: [_jsx("p", { className: 'account-actions-nickname', children: profile.nickname }), _jsx("p", { className: 'account-actions-real-name', children: realname })] })) : profile.nickname ? (_jsx("p", { className: 'account-actions-nickname', children: profile.nickname })) : (_jsx("p", { className: 'account-actions-real-name', children: realname })), profile.isOrgAdmin && (_jsx("div", { className: 'role-badge', children: t('Organization Admin') }))] })), _jsxs("section", { children: [_jsxs(Item, { className: 'dropdown-item', onSelect: goto(`/${i18n.language}/account/me`), children: [_jsx(SlidersIcon, { size: 16 }), _jsx("a", { href: `/${i18n.language}/account/me`, children: t('Profile Settings') })] }), _jsxs(Item, { className: 'dropdown-item', onSelect: goto(`/${i18n.language}/sign-out`), children: [_jsx(SignOutIcon, { size: 16 }), _jsx("a", { href: `/${i18n.language}/sign-out`, children: t('Sign out') })] }), profile.isOrgAdmin && (_jsxs(_Fragment, { children: [_jsx("div", { className: 'dropdown-separator' }), _jsx("div", { className: 'dropdown-label', children: t('Site Administration') }), _jsxs(Item, { className: 'dropdown-item', onSelect: goto(`/${i18n.language}/users`), children: [_jsx(UsersIcon, { size: 16 }), _jsx("a", { href: `/${i18n.language}/users`, children: t('Users') })] }), _jsxs(Item, { className: 'dropdown-item', onSelect: goto(`/${i18n.language}/collections`), children: [_jsx(FolderIcon, { size: 16 }), _jsx("a", { href: `/${i18n.language}/collections`, children: t('Collections') })] }), _jsxs(Item, { className: 'dropdown-item', onSelect: goto(`/${i18n.language}/jobs`), children: [_jsx(ListChecksIcon, { size: 16 }), _jsx("a", { href: `/${i18n.language}/jobs`, children: t('Jobs') })] })] }))] })] }) })] }));
+};

package/dist/pages/_components/shared/components/AccountActions/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AccountActions';
+//# sourceMappingURL=index.d.ts.map

package/dist/pages/_components/shared/components/AccountActions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/shared/components/AccountActions/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/pages/_components/shared/components/AccountActions/index.js

@@ -0,0 +1 @@
+export * from './AccountActions';

package/dist/pages/_components/shared/components/Conversation/Comment.d.ts

@@ -0,0 +1,6 @@
+interface CommentProps {
+    children: string;
+}
+export declare const Comment: (props: CommentProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Comment.d.ts.map

package/dist/pages/_components/shared/components/Conversation/Comment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Comment.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/shared/components/Conversation/Comment.tsx"],"names":[],"mappings":"AAGA,UAAU,YAAY;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAID,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,gCA0B1C,CAAC"}

package/dist/pages/_components/shared/components/Conversation/Comment.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const CHAR_LIMIT = 140;
+export const Comment = (props) => {
+    const { t } = useTranslation();
+    const [isExpanded, setIsExpanded] = useState(false);
+    const text = props.children || '';
+    const shouldTruncate = text.length > CHAR_LIMIT;
+    const truncatedText = text.slice(0, CHAR_LIMIT);
+    return (_jsxs("div", { className: 'comment-container', children: [_jsx("p", { className: 'comment-text', children: isExpanded ? text : shouldTruncate ? `${truncatedText}...` : text }), !isExpanded && shouldTruncate && _jsx("div", { className: 'comment-fade' }), shouldTruncate && (_jsx("button", { className: 'comment-toggle-btn', onClick: () => setIsExpanded(!isExpanded), children: isExpanded ? t('Read less') : t('Read more') }))] }));
+};

package/dist/pages/_components/shared/components/Conversation/Conversation.css

@@ -0,0 +1,93 @@
+/* Conversation */
+.conversation-section {
+  padding: 12px 8px;
+  border-bottom: 1px solid var(--border-light-color);
+}
+
+.conversation-meta {
+  font-size: 12px;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.conversation-meta .author {
+  font-weight: 500;
+}
+
+.conversation-meta .date {
+  color: var(--font-light);
+}
+
+.conversation-reply-area {
+  padding: 12px 8px;
+}
+
+.conversation-reply-wrapper {
+  position: relative;
+}
+
+.conversation-reply-input {
+  width: 100%;
+  background-color: var(--gray-50);
+  border: 1px solid var(--input-border-color);
+  border-radius: 6px;
+  padding: 8px 40px 8px 12px;
+  min-height: 40px;
+  resize: none;
+  font-size: 13px;
+  font-family: Inter, sans-serif;
+}
+
+.conversation-reply-submit {
+  position: absolute;
+  right: 6px;
+  bottom: 6px;
+  background: transparent;
+  color: var(--font-dark);
+  padding: 4px;
+}
+
+.conversation-reply-submit:hover {
+  color: var(--primary);
+}
+
+.comment-container {
+  position: relative;
+}
+
+.comment-text {
+  font-weight: 300;
+  padding: 4px 0;
+  line-height: 1.6;
+  font-size: 13px;
+}
+
+.comment-fade {
+  position: absolute;
+  bottom: 24px;
+  left: 0;
+  right: 0;
+  height: 24px;
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0),
+    rgba(255, 255, 255, 1)
+  );
+  pointer-events: none;
+}
+
+.comment-toggle-btn {
+  background: transparent;
+  border: none;
+  padding: 0;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  color: var(--gray-600);
+}
+
+.comment-toggle-btn:hover {
+  text-decoration: underline;
+  color: var(--gray-900);
+}

package/dist/pages/_components/shared/components/Conversation/Conversation.d.ts

@@ -0,0 +1,8 @@
+import { type Annotation } from '@annotorious/react';
+interface ConversationProps {
+    annotation: Annotation;
+    isLocked?: boolean;
+}
+export declare const Conversation: (props: ConversationProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Conversation.d.ts.map

package/dist/pages/_components/shared/components/Conversation/Conversation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Conversation.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/shared/components/Conversation/Conversation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAC;AAO5B,UAAU,iBAAiB;IACzB,UAAU,EAAE,UAAU,CAAC;IAGvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,gCAsGpD,CAAC"}

package/dist/pages/_components/shared/components/Conversation/Conversation.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { ArrowRightIcon } from '@phosphor-icons/react';
+import { createBody, useAnnotationStore, useAnnotatorUser, } from '@annotorious/react';
+import { Avatar, Button } from '@recogito/studio-sdk/components';
+import { Comment } from './Comment';
+import { useTranslation } from 'react-i18next';
+export const Conversation = (props) => {
+    const { t } = useTranslation();
+    const store = useAnnotationStore();
+    const currentUser = useAnnotatorUser();
+    const [replyText, setReplyText] = useState('');
+    const comments = useMemo(() => {
+        return (props.annotation.bodies || [])
+            .filter((b) => b.purpose === 'commenting' || b.purpose === 'replying')
+            .sort((a, b) => {
+            if (!a.created || !b.created)
+                return 0;
+            return a.created.getTime() - b.created.getTime();
+        });
+    }, [props.annotation]);
+    const onReplySubmit = () => {
+        if (!replyText.trim() || !store)
+            return;
+        const updated = {
+            ...props.annotation,
+            bodies: [
+                ...(props.annotation.bodies || []),
+                createBody(props.annotation, {
+                    purpose: 'replying',
+                    value: replyText.trim(),
+                    creator: currentUser,
+                }),
+            ],
+        };
+        store.updateAnnotation(updated);
+        setReplyText('');
+    };
+    const onKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            onReplySubmit();
+        }
+    };
+    return (_jsxs("div", { className: 'annotation', children: [comments.map((comment) => {
+                const authorName = comment.creator?.name || t('Unknown');
+                const dateStr = comment.created
+                    ? new Intl.DateTimeFormat('en-US', {
+                        month: 'short',
+                        day: 'numeric',
+                    }).format(comment.created)
+                    : t('Unknown date');
+                return (_jsxs("div", { className: 'annotation-section conversation-section', children: [_jsx("div", { className: 'annotation-header', children: _jsx("div", { className: 'annotation-header-left', children: _jsxs("div", { className: 'conversation-meta', children: [_jsx(Avatar, { id: comment.creator?.id || 'default', name: authorName, avatar: comment.creator?.avatar, size: 'sm' }), _jsx("span", { className: 'author', children: authorName }), _jsxs("span", { className: 'date', children: ["\u00B7 ", dateStr] })] }) }) }), _jsx(Comment, { children: comment.value })] }, comment.id));
+            }), !props.isLocked && (_jsx("div", { className: 'conversation-reply-area', children: _jsxs("div", { className: 'conversation-reply-wrapper', children: [_jsx("textarea", { id: 'conversation-reply', className: 'conversation-reply-input', placeholder: t('Add a reply...'), "aria-label": t('Add a reply...'), value: replyText, onChange: (e) => setReplyText(e.target.value), onKeyDown: onKeyDown }), _jsx(Button, { className: 'unstyled conversation-reply-submit', onClick: onReplySubmit, disabled: !replyText.trim(), "aria-label": t('Save reply'), children: _jsx(ArrowRightIcon, { size: 18, "aria-hidden": 'true' }) })] }) }))] }));
+};

package/dist/pages/_components/shared/components/Conversation/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Conversation';
+//# sourceMappingURL=index.d.ts.map

package/dist/pages/_components/shared/components/Conversation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/shared/components/Conversation/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/pages/_components/shared/components/Conversation/index.js

@@ -0,0 +1 @@
+export * from './Conversation';