Feat: Support re-segmentation (#114)

Co-authored-by: John Wang <takatost@gmail.com> Co-authored-by: Jyong <718720800@qq.com> Co-authored-by: 金伟强 <iamjoel007@gmail.com>
2025-12-11 03:46:52 +08:00 · 2023-06-01 23:19:36 +08:00
parent f65a3ad1cc
commit c67f626b66
61 changed files with 1166 additions and 759 deletions
--- a/web/app/components/base/app-icon/index.tsx
+++ b/web/app/components/base/app-icon/index.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react'
 import classNames from 'classnames'
-import style from './style.module.css'

 import data from '@emoji-mart/data'
 import { init } from 'emoji-mart'
+import style from './style.module.css'

 init({ data })

@@ -39,7 +39,7 @@ const AppIcon: FC<AppIconProps> = ({
      }}
      onClick={onClick}
    >
-      {innerIcon ? innerIcon : icon && icon !== '' ? <em-emoji id={icon} /> : <em-emoji id='🤖' />}
+      {innerIcon || ((icon && icon !== '') ? <em-emoji id={icon} /> : <em-emoji id='🤖' />)}
    </span>
  )
 }
--- a/web/app/components/base/block-input/index.tsx
+++ b/web/app/components/base/block-input/index.tsx
@@ -3,11 +3,11 @@
 import type { ChangeEvent, FC } from 'react'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import classNames from 'classnames'
-import { checkKeys } from '@/utils/var'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Toast from '../toast'
 import { varHighlightHTML } from '../../app/configuration/base/var-highlight'
+import Button from '@/app/components/base/button'
+import { checkKeys } from '@/utils/var'

 // regex to match the {{}} and replace it with a span
 const regex = /\{\{([^}]+)\}\}/g
@@ -55,9 +55,9 @@ const BlockInput: FC<IBlockInputProps> = ({
  useEffect(() => {
    if (isEditing && contentEditableRef.current) {
      // TODO: Focus at the click positon
-      if (currentValue) {
+      if (currentValue)
        contentEditableRef.current.setSelectionRange(currentValue.length, currentValue.length)
-      }
+
      contentEditableRef.current.focus()
    }
  }, [isEditing])
@@ -72,7 +72,6 @@ const BlockInput: FC<IBlockInputProps> = ({
    .replace(/>/g, '&gt;')
    .replace(regex, varHighlightHTML({ name: '$1' })) // `<span class="${highLightClassName}">{{$1}}</span>`
    .replace(/\n/g, '<br />')
-    

  // Not use useCallback. That will cause out callback get old data.
  const handleSubmit = () => {
@@ -83,7 +82,7 @@ const BlockInput: FC<IBlockInputProps> = ({
      if (!isValid) {
        Toast.notify({
          type: 'error',
-          message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey })
+          message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey }),
        })
        return
      }
@@ -125,9 +124,9 @@ const BlockInput: FC<IBlockInputProps> = ({
            value={currentValue}
            onBlur={() => {
              blur()
-              if (!isContentChanged) {
+              if (!isContentChanged)
                setIsEditing(false)
-              }
+
              // click confirm also make blur. Then outter value is change. So below code has problem.
              // setTimeout(() => {
              //   handleCancel()
@@ -143,31 +142,33 @@ const BlockInput: FC<IBlockInputProps> = ({
      {textAreaContent}
      {/* footer */}
      <div className='flex item-center h-14 px-4'>
-        {isContentChanged ? (
-          <div className='flex items-center justify-between w-full'>
-            <div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{currentValue.length}</div>
-            <div className='flex space-x-2'>
-              <Button
-                onClick={handleCancel}
-                className='w-20 !h-8 !text-[13px]'
-              >
-                {t('common.operation.cancel')}
-              </Button>
-              <Button
-                onClick={handleSubmit}
-                type="primary"
-                className='w-20 !h-8 !text-[13px]'
-              >
-                {t('common.operation.confirm')}
-              </Button>
-            </div>
+        {isContentChanged
+          ? (
+            <div className='flex items-center justify-between w-full'>
+              <div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{currentValue.length}</div>
+              <div className='flex space-x-2'>
+                <Button
+                  onClick={handleCancel}
+                  className='w-20 !h-8 !text-[13px]'
+                >
+                  {t('common.operation.cancel')}
+                </Button>
+                <Button
+                  onClick={handleSubmit}
+                  type="primary"
+                  className='w-20 !h-8 !text-[13px]'
+                >
+                  {t('common.operation.confirm')}
+                </Button>
+              </div>

-          </div>
-        ) : (
-          <p className="leading-5 text-xs text-gray-500">
-            {t('appDebug.promptTip')}
-          </p>
-        )}
+            </div>
+          )
+          : (
+            <p className="leading-5 text-xs text-gray-500">
+              {t('appDebug.promptTip')}
+            </p>
+          )}
      </div>

    </div>
--- a/web/app/components/base/emoji-picker/index.tsx
+++ b/web/app/components/base/emoji-picker/index.tsx
@@ -1,26 +1,28 @@
+/* eslint-disable multiline-ternary */
 'use client'
-import React from 'react'
-import { useState, FC, ChangeEvent } from 'react'
+import type { ChangeEvent, FC } from 'react'
+import React, { useState } from 'react'
 import data from '@emoji-mart/data'
-import { init, SearchIndex } from 'emoji-mart'
+import { SearchIndex, init } from 'emoji-mart'
 import cn from 'classnames'
+import {
+  MagnifyingGlassIcon,
+} from '@heroicons/react/24/outline'
+import { useTranslation } from 'react-i18next'
+import s from './style.module.css'
 import Divider from '@/app/components/base/divider'
 import Button from '@/app/components/base/button'
-import s from './style.module.css'
-import {
-  MagnifyingGlassIcon
-} from '@heroicons/react/24/outline'

 import Modal from '@/app/components/base/modal'
-import { useTranslation } from 'react-i18next'

 declare global {
  namespace JSX {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
    interface IntrinsicElements {
      'em-emoji': React.DetailedHTMLProps<
-        React.HTMLAttributes<HTMLElement>,
-        HTMLElement
-      >;
+      React.HTMLAttributes<HTMLElement>,
+      HTMLElement
+      >
    }
  }
 }
@@ -57,7 +59,7 @@ const backgroundColors = [
  '#ECE9FE',
  '#FFE4E8',
 ]
-interface IEmojiPickerProps {
+type IEmojiPickerProps = {
  isModal?: boolean
  onSelect?: (emoji: string, background: string) => void
  onClose?: () => void
@@ -66,7 +68,7 @@ interface IEmojiPickerProps {
 const EmojiPicker: FC<IEmojiPickerProps> = ({
  isModal = true,
  onSelect,
-  onClose
+  onClose,

 }) => {
  const { t } = useTranslation()
@@ -97,8 +99,8 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
          onChange={async (e: ChangeEvent<HTMLInputElement>) => {
            if (e.target.value === '') {
              setIsSearching(false)
-              return
-            } else {
+            }
+            else {
              setIsSearching(true)
              const emojis = await search(e.target.value)
              setSearchedEmojis(emojis)
@@ -111,7 +113,7 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({

    <div className="w-full max-h-[200px] overflow-x-hidden overflow-y-auto px-3">
      {isSearching && <>
-        <div key={`category-search`} className='flex flex-col'>
+        <div key={'category-search'} className='flex flex-col'>
          <p className='font-medium uppercase text-xs text-[#101828] mb-1'>Search</p>
          <div className='w-full h-full grid grid-cols-8 gap-1'>
            {searchedEmojis.map((emoji: string, index: number) => {
@@ -131,7 +133,6 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
        </div>
      </>}

-
      {categories.map((category: any, index: number) => {
        return <div key={`category-${index}`} className='flex flex-col'>
          <p className='font-medium uppercase text-xs text-[#101828] mb-1'>{category.id}</p>
@@ -156,7 +157,7 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
    </div>

    {/* Color Select */}
-    <div className={cn('p-3 ', selectedEmoji == '' ? 'opacity-25' : '')}>
+    <div className={cn('p-3 ', selectedEmoji === '' ? 'opacity-25' : '')}>
      <p className='font-medium uppercase text-xs text-[#101828] mb-2'>Choose Style</p>
      <div className='w-full h-full grid grid-cols-8 gap-1'>
        {backgroundColors.map((color) => {
@@ -165,9 +166,9 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
            className={
              cn(
                'cursor-pointer',
-                `hover:ring-1 ring-offset-1`,
+                'hover:ring-1 ring-offset-1',
                'inline-flex w-10 h-10 rounded-lg items-center justify-center',
-                color === selectedBackground ? `ring-1 ring-gray-300` : '',
+                color === selectedBackground ? 'ring-1 ring-gray-300' : '',
              )}
            onClick={() => {
              setSelectedBackground(color)
@@ -191,7 +192,7 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
        {t('app.emoji.cancel')}
      </Button>
      <Button
-        disabled={selectedEmoji == ''}
+        disabled={selectedEmoji === ''}
        type="primary"
        className='w-full'
        onClick={() => {