tycho-components 0.19.17 → 0.21.1

package/dist/features/SentenceSplit/SentenceSplitAudio/SentenceSplitAudioStep.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import AppPlaceholder from '../../../common/AppPlaceholder/AppPlaceholder';
+import { Button } from 'tycho-storybook';
+import { WaveForm, WaveSurfer } from 'wavesurfer-react';
+const WaveFormTyped = WaveForm;
+import './style.scss';
+export default function SentenceSplitAudioStep({ sound, request, onChange, }) {
+    const { t } = useTranslation('sentenceSplit');
+    const [simple, setSimple] = useState();
+    const [playing, setPlaying] = useState(false);
+    const requestRef = useRef(request);
+    requestRef.current = request;
+    const handlePlayPause = () => {
+        setPlaying(!playing);
+        simple?.playPause();
+    };
+    const handleWSMount = useCallback((waveSurfer) => {
+        setSimple(waveSurfer);
+        if (waveSurfer.markers) {
+            waveSurfer.clearMarkers();
+        }
+        waveSurfer.load(sound);
+        const handleSeek = (progress) => {
+            const duration = waveSurfer.getDuration();
+            if (!duration || !Number.isFinite(duration))
+                return;
+            onChange({
+                ...requestRef.current,
+                soundSplit: progress * duration,
+            });
+        };
+        waveSurfer.on('finish', handlePlayPause);
+        waveSurfer.on('seek', handleSeek);
+    }, [sound, onChange]);
+    return (_jsxs("div", { className: "step-content sentence-split-step-audio", children: [_jsxs("div", { className: "header", children: [_jsx("div", { className: "title", children: t('split.audio.title') }), _jsx("div", { className: "subtitle", children: t('split.audio.description') })] }), _jsxs("div", { className: "step-body", children: [!sound && (_jsx(AppPlaceholder, { text: t('split.audio.empty'), icon: "music_cast" })), sound && (_jsxs("div", { className: "sentence-split-audio-wrap", children: [_jsx(WaveSurfer, { onMount: handleWSMount, children: _jsx(WaveFormTyped, { id: "waveform-sentence-split", waveColor: "violet", progressColor: "purple" }) }), _jsxs("div", { className: "buttons", children: [_jsx(Button, { text: playing ? t('split.audio.pause') : t('split.audio.play'), icon: playing ? 'pause' : 'play_arrow', onClick: handlePlayPause, size: "medium" }), _jsxs("span", { className: "time", children: [t('split.audio.cutPoint'), ":", ' ', request.soundSplit?.toFixed(2) || '0.00'] })] })] }))] })] }));
+}

package/dist/features/SentenceSplit/SentenceSplitAudio/index.d.ts

@@ -0,0 +1,2 @@
+import SentenceSplitAudioStep from './SentenceSplitAudioStep';
+export default SentenceSplitAudioStep;

package/dist/features/SentenceSplit/SentenceSplitAudio/index.js

@@ -0,0 +1,2 @@
+import SentenceSplitAudioStep from './SentenceSplitAudioStep';
+export default SentenceSplitAudioStep;

package/dist/features/SentenceSplit/SentenceSplitAudio/style.scss

@@ -0,0 +1,29 @@
+.sentence-split-step-audio {
+  .sentence-split-audio-wrap {
+    margin-top: 24px;
+
+    #waveform-sentence-split {
+      border: 1px solid var(--border-subtle-1);
+
+      > wave {
+        overflow: hidden !important;
+      }
+    }
+
+    > .buttons {
+      display: flex;
+      justify-content: center;
+      margin-top: 16px;
+
+      .ds-icon-button {
+        margin-left: auto;
+      }
+
+      .time {
+        @include helper-large-1;
+        color: var(--text-secondary);
+        margin-left: auto;
+      }
+    }
+  }
+}

package/dist/features/SentenceSplit/SentenceSplitChoose/SentenceSplitChoose.d.ts

@@ -0,0 +1,10 @@
+import { Struct } from '../../../configs/types/Struct';
+import { SentenceSplitRequest } from '../types/SentenceSplitRequest';
+import './style.scss';
+type Props = {
+    struct: Struct;
+    request: SentenceSplitRequest;
+    onChange: (request: SentenceSplitRequest) => void;
+};
+export default function SentenceSplitChoose({ struct, request, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/SentenceSplit/SentenceSplitChoose/SentenceSplitChoose.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import { useTranslation } from 'react-i18next';
+import SentenceUtils from '../../../functions/SentenceUtils';
+import SentenceSplitUtils from '../SentenceSplitUtils';
+import './style.scss';
+export default function SentenceSplitChoose({ struct, request, onChange, }) {
+    const { t } = useTranslation('sentenceSplit');
+    const sorted = SentenceUtils.sort(struct);
+    const wordTokens = sorted.filter((tok) => SentenceUtils.isVisible(tok) && !SentenceSplitUtils.skipToken(tok));
+    const handleSelect = (tokenP) => {
+        onChange({ ...request, token: tokenP });
+    };
+    return (_jsxs("div", { className: "step-content", children: [_jsxs("div", { className: "header", children: [_jsx("div", { className: "title", children: t('split.words.title') }), _jsx("div", { className: "subtitle", children: t('split.words.description') })] }), _jsx("div", { className: "step-body", children: _jsx("div", { className: "sentence-split-word-pick", children: wordTokens.map((tok, idx) => {
+                        const label = SentenceSplitUtils.getOriginalValue(tok);
+                        const selected = request.token === tok.p;
+                        const isLastWord = idx === wordTokens.length - 1;
+                        return (_jsx("button", { type: "button", disabled: isLastWord, title: isLastWord ? t('split.words.cannotSplitAfterLast') : undefined, className: cx('sentence-split-word-chip', {
+                                selected,
+                                disabled: isLastWord,
+                            }), onClick: () => !isLastWord && handleSelect(tok.p), children: label }, tok.p));
+                    }) }) })] }));
+}

package/dist/features/SentenceSplit/SentenceSplitChoose/index.d.ts

@@ -0,0 +1,2 @@
+import SentenceSplitChoose from './SentenceSplitChoose';
+export default SentenceSplitChoose;

package/dist/features/SentenceSplit/SentenceSplitChoose/index.js

@@ -0,0 +1,2 @@
+import SentenceSplitChoose from './SentenceSplitChoose';
+export default SentenceSplitChoose;

package/dist/features/SentenceSplit/SentenceSplitChoose/style.scss

@@ -0,0 +1,25 @@
+.sentence-split-word-pick {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 24px;
+
+  .sentence-split-word-chip {
+    cursor: pointer;
+    border-radius: var(--radius-200);
+    padding: 0px 8px;
+    background-color: var(--background-default);
+    border: 1px dashed var(--border-accent-2);
+
+    &.selected,
+    &:hover {
+      background-color: var(--button-secondary-hover);
+    }
+
+    &.disabled,
+    &:disabled {
+      opacity: 0.45;
+      cursor: not-allowed;
+    }
+  }
+}

package/dist/features/SentenceSplit/SentenceSplitCommentUtils.d.ts

@@ -0,0 +1,21 @@
+import { Struct } from '../../configs/types/Struct';
+import type { Comment } from '../Comments/types/Comment';
+import type { SplitComment } from './types/SentenceSplitRequest';
+declare const SentenceSplitCommentUtils: {
+    collectTokenCidsByHalf: (struct: Struct, splitAfterToken: number) => {
+        first: Set<string>;
+        second: Set<string>;
+    };
+    buildCidToWordMap: (struct: Struct) => Record<string, string>;
+    commentsWithoutCid: (comments: Comment[]) => SplitComment[];
+    commentsWithCidForHalf: (all: Comment[], half: "first" | "second", cids: {
+        first: Set<string>;
+        second: Set<string>;
+    }) => Comment[];
+    commentsWithCidForHalfAsSplit: (all: Comment[], half: "first" | "second", cids: {
+        first: Set<string>;
+        second: Set<string>;
+    }) => SplitComment[];
+    initialCommentDispositions: (sentenceComments: Comment[], wordsFirst: SplitComment[], wordsSecond: SplitComment[]) => Record<string, string>;
+};
+export default SentenceSplitCommentUtils;

package/dist/features/SentenceSplit/SentenceSplitCommentUtils.js

@@ -0,0 +1,77 @@
+import SentenceUtils from '../../functions/SentenceUtils';
+import SentenceSplitUtils from './SentenceSplitUtils';
+const collectTokenCidsByHalf = (struct, splitAfterToken) => {
+    const sorted = SentenceUtils.sort(struct);
+    const visible = sorted.filter((tok) => SentenceUtils.isVisible(tok) && !SentenceSplitUtils.skipToken(tok));
+    const first = new Set();
+    const second = new Set();
+    for (const tok of visible) {
+        if (!tok.cid)
+            continue;
+        if (tok.p <= splitAfterToken)
+            first.add(tok.cid);
+        else
+            second.add(tok.cid);
+    }
+    return { first, second };
+};
+const buildCidToWordMap = (struct) => {
+    const sorted = SentenceUtils.sort(struct);
+    const visible = sorted.filter((tok) => SentenceUtils.isVisible(tok) && !SentenceSplitUtils.skipToken(tok));
+    const map = {};
+    for (const tok of visible) {
+        if (tok.cid)
+            map[tok.cid] = tok.v;
+    }
+    return map;
+};
+const commentsWithoutCid = (comments) => {
+    return comments
+        .filter((root) => !root.cid)
+        .map((c) => ({ ...c, action: 'first' }));
+};
+const commentsWithCidForHalf = (all, half, cids) => {
+    const roots = all.filter((c) => !c.reply);
+    const rootsInHalf = roots.filter((root) => {
+        if (!root.cid)
+            return false;
+        if (cids.first.has(root.cid))
+            return half === 'first';
+        if (cids.second.has(root.cid))
+            return half === 'second';
+        return half === 'first';
+    });
+    const rootIds = new Set(rootsInHalf.map((r) => r.id));
+    return all.filter((c) => {
+        if (!c.reply)
+            return rootIds.has(c.id);
+        return rootIds.has(c.reply);
+    });
+};
+const commentsWithCidForHalfAsSplit = (all, half, cids) => {
+    const action = half === 'first' ? 'first' : 'second';
+    return commentsWithCidForHalf(all, half, cids).map((c) => ({ ...c, action }));
+};
+const initialCommentDispositions = (sentenceComments, wordsFirst, wordsSecond) => {
+    const out = {};
+    for (const root of sentenceComments.filter((c) => !c.reply)) {
+        if (!root.cid)
+            out[root.id] = 'first';
+    }
+    for (const root of wordsFirst.filter((c) => !c.reply)) {
+        out[root.id] = 'first';
+    }
+    for (const root of wordsSecond.filter((c) => !c.reply)) {
+        out[root.id] = 'second';
+    }
+    return out;
+};
+const SentenceSplitCommentUtils = {
+    collectTokenCidsByHalf,
+    buildCidToWordMap,
+    commentsWithoutCid,
+    commentsWithCidForHalf,
+    commentsWithCidForHalfAsSplit,
+    initialCommentDispositions,
+};
+export default SentenceSplitCommentUtils;

package/dist/features/SentenceSplit/SentenceSplitComments/SentenceSplitCommentBlock.d.ts

@@ -0,0 +1,7 @@
+import type { Comment } from '../../Comments/types/Comment';
+import './style.scss';
+type Props = {
+    comment: Comment;
+};
+export default function SentenceSplitCommentBlock({ comment }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/SentenceSplit/SentenceSplitComments/SentenceSplitCommentBlock.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DateUtils from '../../../functions/DateUtils';
+import './style.scss';
+export default function SentenceSplitCommentBlock({ comment }) {
+    return (_jsxs("div", { className: "comment-block", children: [_jsxs("div", { className: "comment-top", children: [_jsx("div", { className: "comment-date", children: DateUtils.formatDateTime(comment.edited ? comment.edited : comment.date, 'MM/dd/yyyy - HH:mm') }), _jsx("span", { className: "comment-name", children: comment.name })] }), _jsxs("div", { className: "comment-content", children: [comment.title && (_jsxs("div", { className: "comment-title", children: [comment.title, " - "] })), _jsx("div", { className: "comment-text", children: comment.value })] })] }));
+}

package/dist/features/SentenceSplit/SentenceSplitComments/SentenceSplitComments.d.ts

@@ -0,0 +1,8 @@
+import { type SentenceSplitCommentAction, type SplitComment } from '../types/SentenceSplitRequest';
+import './style.scss';
+type Props = {
+    comments: SplitComment[];
+    onChange: (root: SplitComment, action: SentenceSplitCommentAction) => void;
+};
+export default function SentenceSplitComments({ comments, onChange }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/SentenceSplit/SentenceSplitComments/SentenceSplitComments.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MenuItem, Select } from '@mui/material';
+import { ThemeProvider, useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+import { selectFieldTheme } from 'tycho-storybook';
+import { isSentenceSplitCommentAction, SENTENCE_SPLIT_COMMENT_ACTIONS, } from '../types/SentenceSplitRequest';
+import SentenceSplitCommentBlock from './SentenceSplitCommentBlock';
+import './style.scss';
+function CommentDispositionSelect({ options, value, onChange, }) {
+    const outerTheme = useTheme();
+    return (_jsx("div", { className: "ds-select-text", children: _jsx(ThemeProvider, { theme: selectFieldTheme(outerTheme), children: _jsx(Select, { variant: "filled", color: "primary", displayEmpty: false, value: value, size: "small", onChange: (e) => {
+                    const val = String(e.target.value);
+                    if (isSentenceSplitCommentAction(val)) {
+                        onChange(val);
+                    }
+                }, MenuProps: {
+                    PaperProps: {
+                        style: { maxHeight: 400 },
+                    },
+                }, children: options.map((opt) => (_jsx(MenuItem, { value: opt.value, children: opt.label }, opt.value))) }) }) }));
+}
+export default function SentenceSplitComments({ comments, onChange }) {
+    const { t } = useTranslation('sentenceSplit');
+    const roots = comments.filter((c) => !c.reply);
+    const dispositionLabelKeys = {
+        first: 'split.comments.disposition.first',
+        second: 'split.comments.disposition.moveSecond',
+        duplicate: 'split.comments.disposition.duplicateSecond',
+    };
+    const dispositionOptions = SENTENCE_SPLIT_COMMENT_ACTIONS.map((value) => ({
+        label: t(dispositionLabelKeys[value]),
+        value,
+    }));
+    return (_jsx("div", { className: "comments-list", children: roots.map((root) => (_jsxs("div", { className: "comment-thread", children: [_jsxs("div", { className: "comment-wrapper", children: [_jsx(SentenceSplitCommentBlock, { comment: root }), comments
+                            .filter((c) => c.reply === root.id)
+                            .map((reply) => (_jsx("div", { className: "comment-replies", children: _jsx(SentenceSplitCommentBlock, { comment: reply }) }, reply.id)))] }), _jsx(CommentDispositionSelect, { options: dispositionOptions, value: root.action, onChange: (action) => onChange(root, action) })] }, root.id))) }));
+}

package/dist/features/SentenceSplit/SentenceSplitComments/SentenceSplitCommentsStep.d.ts

@@ -0,0 +1,11 @@
+import { Struct } from '../../../configs/types/Struct';
+import type { SentenceSplitRequest } from '../types/SentenceSplitRequest';
+import './style.scss';
+type Props = {
+    struct: Struct;
+    documentUid: string;
+    request: SentenceSplitRequest;
+    onChange: (request: SentenceSplitRequest) => void;
+};
+export default function SentenceSplitCommentsStep({ struct, documentUid, request, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/SentenceSplit/SentenceSplitComments/SentenceSplitCommentsStep.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import AppLoading from '../../../common/AppLoading/AppLoading';
+import AppPlaceholder from '../../../common/AppPlaceholder/AppPlaceholder';
+import { useCorpusUtils } from '../../../configs/useCorpusUtils';
+import { useMessageUtils } from '../../../configs/useMessageUtils';
+import SentenceSplitCommentUtils from '../SentenceSplitCommentUtils';
+import SentenceSplitService from '../SentenceSplitService';
+import SentenceSplitComments from './SentenceSplitComments';
+import SentenceSplitCommentsWords from './SentenceSplitCommentsWords';
+import './style.scss';
+export default function SentenceSplitCommentsStep({ struct, documentUid, request, onChange, }) {
+    const { t } = useTranslation('sentenceSplit');
+    const { getCorpus } = useCorpusUtils();
+    const { dispatchError } = useMessageUtils();
+    const { collectTokenCidsByHalf, buildCidToWordMap, commentsWithoutCid, initialCommentDispositions, commentsWithCidForHalfAsSplit, } = SentenceSplitCommentUtils;
+    const [comments, setComments] = useState(null);
+    const [commentsSentence, setCommentsSentence] = useState([]);
+    const [commentsWordsFirst, setCommentsWordsFirst] = useState([]);
+    const [commentsWordsSecond, setCommentsWordsSecond] = useState([]);
+    const cidsByHalf = collectTokenCidsByHalf(struct, request.token);
+    const wordByCid = buildCidToWordMap(struct);
+    const handleChangeSentence = (root, action) => {
+        setCommentsSentence(commentsSentence.map((c) => (c.id === root.id ? { ...c, action } : c)));
+        onChange({
+            ...request,
+            comments: {
+                ...request.comments,
+                [root.id]: action,
+            },
+        });
+    };
+    useEffect(() => {
+        let cancelled = false;
+        const references = {
+            sentence: struct.uid,
+            document: documentUid,
+            page: struct.page,
+        };
+        SentenceSplitService.findComments(getCorpus().uid, references)
+            .then((r) => {
+            if (cancelled)
+                return;
+            setComments(r.data);
+            const theseCommentsSentence = commentsWithoutCid(r.data);
+            const theseCommentsWordsFirst = commentsWithCidForHalfAsSplit(r.data, 'first', cidsByHalf);
+            const theseCommentsWordsSecond = commentsWithCidForHalfAsSplit(r.data, 'second', cidsByHalf);
+            const initialComments = initialCommentDispositions(theseCommentsSentence, theseCommentsWordsFirst, theseCommentsWordsSecond);
+            onChange({
+                ...request,
+                comments: { ...initialComments },
+            });
+            setCommentsSentence(theseCommentsSentence);
+            setCommentsWordsFirst(theseCommentsWordsFirst);
+            setCommentsWordsSecond(theseCommentsWordsSecond);
+        })
+            .catch((err) => {
+            if (cancelled)
+                return;
+            dispatchError({ err, t });
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [struct.uid, documentUid, struct.page]);
+    if (comments === null) {
+        return _jsx(AppLoading, {});
+    }
+    const hasWordComments = comments.find((c) => c.cid) !== undefined;
+    return (_jsxs("div", { className: "step-content sentence-split-comments-container", children: [_jsxs("div", { className: "header", children: [_jsx("div", { className: "title", children: t('split.comments.title') }), _jsx("div", { className: "subtitle", children: t('split.comments.description') })] }), _jsxs("div", { className: "step-body", children: [comments.length === 0 && (_jsx(AppPlaceholder, { text: t('split.comments.empty'), useMarginTop: true })), commentsSentence != null && commentsSentence.length > 0 && (_jsxs("section", { className: "comments-section", children: [_jsx("h6", { className: "section-title", children: t('split.comments.sentenceLevel') }), _jsx("div", { className: "section-body", children: _jsx(SentenceSplitComments, { comments: commentsSentence, onChange: handleChangeSentence }) })] })), hasWordComments && (_jsxs("section", { className: "comments-section", children: [_jsx("h6", { className: "sentence-split-comments-section-title", children: t('split.comments.wordLevel') }), _jsxs("div", { className: "sentence-split-pair", children: [_jsxs("div", { children: [_jsx("h6", { children: t('split.label.first') }), _jsx("div", { className: "sentence-split-box", children: _jsx(SentenceSplitCommentsWords, { comments: commentsWordsFirst, emptyText: t('split.comments.empty'), wordByCid: wordByCid }) })] }), _jsxs("div", { children: [_jsx("h6", { children: t('split.label.second') }), _jsx("div", { className: "sentence-split-box", children: _jsx(SentenceSplitCommentsWords, { comments: commentsWordsSecond, emptyText: t('split.comments.empty'), wordByCid: wordByCid }) })] })] })] }))] })] }));
+}

package/dist/features/SentenceSplit/SentenceSplitComments/SentenceSplitCommentsWords.d.ts

@@ -0,0 +1,9 @@
+import type { SplitComment } from '../types/SentenceSplitRequest';
+import './style.scss';
+type Props = {
+    comments: SplitComment[];
+    emptyText: string;
+    wordByCid: Record<string, string>;
+};
+export default function SentenceSplitCommentsWords({ comments, emptyText, wordByCid, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/SentenceSplit/SentenceSplitComments/SentenceSplitCommentsWords.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import AppPlaceholder from '../../../common/AppPlaceholder/AppPlaceholder';
+import SentenceSplitCommentBlock from './SentenceSplitCommentBlock';
+import './style.scss';
+export default function SentenceSplitCommentsWords({ comments, emptyText, wordByCid, }) {
+    const { t } = useTranslation('sentenceSplit');
+    if (comments.length === 0) {
+        return _jsx(AppPlaceholder, { text: emptyText });
+    }
+    const roots = comments.filter((c) => !c.reply);
+    return (_jsx("div", { className: "comments-list", children: roots.map((root) => (_jsx("div", { className: "comment-thread", children: _jsxs("div", { className: "comment-wrapper", children: [root.cid && (_jsxs("div", { className: "comment-target-word", title: root.cid, children: [t('label.word'), wordByCid[root.cid] ?? t('split.comments.wordMissing')] })), _jsx(SentenceSplitCommentBlock, { comment: root }), comments
+                        .filter((c) => c.reply === root.id)
+                        .map((reply) => (_jsx("div", { className: "comment-replies", children: _jsx(SentenceSplitCommentBlock, { comment: reply }) }, reply.id)))] }) }, root.id))) }));
+}

package/dist/features/SentenceSplit/SentenceSplitComments/index.d.ts

@@ -0,0 +1,2 @@
+import SentenceSplitCommentsStep from './SentenceSplitCommentsStep';
+export default SentenceSplitCommentsStep;

package/dist/features/SentenceSplit/SentenceSplitComments/index.js

@@ -0,0 +1,2 @@
+import SentenceSplitCommentsStep from './SentenceSplitCommentsStep';
+export default SentenceSplitCommentsStep;

package/dist/features/SentenceSplit/SentenceSplitComments/style.scss

@@ -0,0 +1,126 @@
+.sentence-split-comments-container {
+  .comments-section {
+    margin-top: 24px;
+    border-top: 1px solid var(--border-subtle-1);
+    padding-top: 16px;
+    max-height: 30vh;
+    overflow-y: auto;
+
+    &:first-of-type {
+      margin-top: 16px;
+    }
+
+    .section-title {
+      @include body-medium-2;
+      color: var(--text-primary);
+      margin: 0 0 8px;
+    }
+  }
+
+  > .ds-placeholder {
+    margin-top: 16px;
+  }
+
+  .sentence-split-box {
+    > .ds-placeholder {
+      .ds-icon {
+        font-size: 32px;
+      }
+
+      .title {
+        @include body-medium-2;
+        color: var(--text-primary);
+      }
+    }
+  }
+
+  .comments-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+
+    .comment-thread {
+      display: flex;
+      flex-direction: row;
+      border-bottom: 1px solid var(--border-subtle-1, #e8e8e8);
+      padding: 8px 0;
+
+      &:first-child {
+        padding-top: 0;
+      }
+
+      &:last-child {
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+
+      .ds-select-text {
+        margin-left: auto;
+        width: fit-content;
+
+        .MuiSelect-select {
+          padding: 4px 24px 4px 8px !important;
+          @include body-small-1;
+        }
+
+        .MuiSelect-icon {
+          font-size: 20px;
+          right: 0px;
+        }
+      }
+
+      .comment-target-word {
+        @include tag-medium-1;
+        color: var(--text-accent);
+        margin-bottom: 6px;
+        display: inline-block;
+        max-width: 100%;
+        word-break: break-word;
+      }
+
+      .comment-replies {
+        margin-left: 16px;
+        margin-top: 4px;
+      }
+
+      .comment-block {
+        display: flex;
+        flex-direction: column;
+        gap: 0px;
+
+        .comment-top {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          .comment-name {
+            @include body-small-2;
+            color: var(--text-primary);
+          }
+
+          .comment-date {
+            @include helper-small-1;
+            color: var(--text-tertiary);
+          }
+        }
+
+        .comment-content {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+
+          .comment-title {
+            @include body-small-1;
+            color: var(--text-accent);
+          }
+
+          .comment-text {
+            @include body-small-1;
+            color: var(--text-primary);
+            white-space: pre-wrap;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/features/SentenceSplit/SentenceSplitPreview/SentenceSplitPreview.d.ts

@@ -0,0 +1,10 @@
+import { Parameter } from '../../../configs/types/Parameter';
+import { Token } from '../../../configs/types/Struct';
+import './style.scss';
+type Props = {
+    title: string;
+    tokens: Token[];
+    wordTiers: Parameter[];
+};
+export default function SentenceSplitPreview({ title, tokens, wordTiers, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/SentenceSplit/SentenceSplitPreview/SentenceSplitPreview.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import SentenceUtils from '../../../functions/SentenceUtils';
+import SentenceSplitUtils from '../SentenceSplitUtils';
+import './style.scss';
+export default function SentenceSplitPreview({ title, tokens, wordTiers, }) {
+    const { t } = useTranslation(['sentenceSplit', 'sentence']);
+    return (_jsxs("div", { className: "sentence-split-preview-block", children: [_jsx("h6", { children: title }), _jsx("table", { className: "table table-striped sentence-split-preview-table", children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: t('sentence:label.word') }), tokens.map((tok) => (_jsx("td", { children: SentenceSplitUtils.getOriginalValue(tok) }, tok.p)))] }), _jsxs("tr", { children: [_jsx("td", { children: t('sentence:label.pos.tag') }), tokens.map((tok) => (_jsx("td", { children: SentenceUtils.getTag(tok) || t('sentence:label.empty') }, tok.p)))] }), wordTiers?.map((tier) => (_jsxs("tr", { children: [_jsx("td", { children: tier.name }), tokens.map((tok) => (_jsx("td", { children: (tok.attributes && tok.attributes[tier.symbol]) ||
+                                        t('sentence:label.empty') }, tok.p)))] }, tier.symbol)))] }) })] }));
+}

package/dist/features/SentenceSplit/SentenceSplitPreview/SentenceSplitPreviewStep.d.ts

@@ -0,0 +1,11 @@
+import { Parameter } from '../../../configs/types/Parameter';
+import { Struct } from '../../../configs/types/Struct';
+import { SentenceSplitRequest } from '../types/SentenceSplitRequest';
+import './style.scss';
+type Props = {
+    struct: Struct;
+    request: SentenceSplitRequest;
+    wordTiers: Parameter[];
+};
+export default function SentenceSplitPreviewStep({ struct, request, wordTiers, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/SentenceSplit/SentenceSplitPreview/SentenceSplitPreviewStep.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import SentenceUtils from '../../../functions/SentenceUtils';
+import SentenceSplitUtils from '../SentenceSplitUtils';
+import SentenceSplitPreview from './SentenceSplitPreview';
+import './style.scss';
+function partitionVisibleTokens(struct, splitAfterToken) {
+    const sorted = SentenceUtils.sort(struct);
+    const visible = sorted.filter((tok) => SentenceUtils.isVisible(tok) && !SentenceSplitUtils.skipToken(tok));
+    const first = [];
+    const second = [];
+    visible.forEach((tok) => {
+        if (tok.p <= splitAfterToken)
+            first.push(tok);
+        else
+            second.push(tok);
+    });
+    return [first, second];
+}
+export default function SentenceSplitPreviewStep({ struct, request, wordTiers, }) {
+    const { t } = useTranslation('sentenceSplit');
+    const [first, second] = partitionVisibleTokens(struct, request.token);
+    return (_jsxs("div", { className: "step-content", children: [_jsxs("div", { className: "header", children: [_jsx("div", { className: "title", children: t('split.preview.title') }), _jsx("div", { className: "subtitle", children: t('split.preview.description') })] }), _jsx("div", { className: "step-body", children: _jsxs("div", { className: "sentence-split-preview-container", children: [_jsx(SentenceSplitPreview, { title: t('split.label.first'), tokens: first, wordTiers: wordTiers }), _jsx(SentenceSplitPreview, { title: t('split.label.second'), tokens: second, wordTiers: wordTiers })] }) })] }));
+}

package/dist/features/SentenceSplit/SentenceSplitPreview/index.d.ts

@@ -0,0 +1,2 @@
+import SentenceSplitPreviewStep from './SentenceSplitPreviewStep';
+export default SentenceSplitPreviewStep;

package/dist/features/SentenceSplit/SentenceSplitPreview/index.js

@@ -0,0 +1,2 @@
+import SentenceSplitPreviewStep from './SentenceSplitPreviewStep';
+export default SentenceSplitPreviewStep;