test: add unit tests for base components (#32818)

Co-authored-by: CodingOnStar <hanxujiang@dify.com>

web/app/components/base/__tests__/alert.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import Alert from './alert'
+import Alert from '../alert'
 
 describe('Alert', () => {
   const defaultProps = {

web/app/components/base/__tests__/app-unavailable.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import AppUnavailable from './app-unavailable'
+import AppUnavailable from '../app-unavailable'
 
 describe('AppUnavailable', () => {
   beforeEach(() => {

web/app/components/base/__tests__/badge.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import Badge from './badge'
+import Badge from '../badge'
 
 describe('Badge', () => {
   describe('Rendering', () => {

web/app/components/base/__tests__/theme-selector.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import ThemeSelector from './theme-selector'
+import ThemeSelector from '../theme-selector'
 
 // Mock next-themes with controllable state
 let mockTheme = 'system'

web/app/components/base/__tests__/theme-switcher.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import ThemeSwitcher from './theme-switcher'
+import ThemeSwitcher from '../theme-switcher'
 
 let mockTheme = 'system'
 const mockSetTheme = vi.fn()

web/app/components/base/action-button/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import { ActionButton, ActionButtonState } from './index'
+import { ActionButton, ActionButtonState } from '../index'
 
 describe('ActionButton', () => {
   it('renders button with default props', () => {

web/app/components/base/agent-log-modal/__tests__/detail.spec.tsx

@@ -4,7 +4,7 @@ import type { AgentLogDetailResponse } from '@/models/log'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { ToastContext } from '@/app/components/base/toast'
 import { fetchAgentLogDetail } from '@/service/log'
-import AgentLogDetail from './detail'
+import AgentLogDetail from '../detail'
 
 vi.mock('@/service/log', () => ({
   fetchAgentLogDetail: vi.fn(),

web/app/components/base/agent-log-modal/__tests__/index.spec.tsx

@@ -3,7 +3,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { useClickAway } from 'ahooks'
 import { ToastContext } from '@/app/components/base/toast'
 import { fetchAgentLogDetail } from '@/service/log'
-import AgentLogModal from './index'
+import AgentLogModal from '../index'
 
 vi.mock('@/service/log', () => ({
   fetchAgentLogDetail: vi.fn(),

web/app/components/base/agent-log-modal/__tests__/iteration.spec.tsx

@@ -1,6 +1,6 @@
 import type { AgentIteration } from '@/models/log'
 import { render, screen } from '@testing-library/react'
-import Iteration from './iteration'
+import Iteration from '../iteration'
 
 vi.mock('@/app/components/workflow/nodes/_base/components/editor/code-editor', () => ({
   default: ({ title, value }: { title: React.ReactNode, value: string | object }) => (

web/app/components/base/agent-log-modal/__tests__/result.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import * as React from 'react'
-import ResultPanel from './result'
+import ResultPanel from '../result'
 
 vi.mock('@/app/components/workflow/nodes/_base/components/editor/code-editor', () => ({
   default: ({ title, value }: { title: React.ReactNode, value: string | object }) => (

web/app/components/base/agent-log-modal/__tests__/tool-call.spec.tsx

@@ -2,7 +2,7 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
 import { describe, expect, it, vi } from 'vitest'
 import { BlockEnum } from '@/app/components/workflow/types'
-import ToolCallItem from './tool-call'
+import ToolCallItem from '../tool-call'
 
 vi.mock('@/app/components/workflow/nodes/_base/components/editor/code-editor', () => ({
   default: ({ title, value }: { title: React.ReactNode, value: string | object }) => (

web/app/components/base/agent-log-modal/__tests__/tracing.spec.tsx

@@ -1,7 +1,7 @@
 import type { AgentIteration } from '@/models/log'
 import { render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
-import TracingPanel from './tracing'
+import TracingPanel from '../tracing'
 
 vi.mock('@/app/components/workflow/block-icon', () => ({
   default: () => <div data-testid="block-icon" />,

web/app/components/base/answer-icon/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import AnswerIcon from '.'
+import AnswerIcon from '..'
 
 describe('AnswerIcon', () => {
   it('renders default emoji when no icon or image is provided', () => {

web/app/components/base/app-icon-picker/__tests__/ImageInput.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import ImageInput from './ImageInput'
+import ImageInput from '../ImageInput'
 
 const createObjectURLMock = vi.fn(() => 'blob:mock-url')
 const revokeObjectURLMock = vi.fn()

web/app/components/base/app-icon-picker/__tests__/hooks.spec.tsx

@@ -1,5 +1,5 @@
 import { act, renderHook } from '@testing-library/react'
-import { useDraggableUploader } from './hooks'
+import { useDraggableUploader } from '../hooks'
 
 type MockDragEventOverrides = {
   dataTransfer?: { files: File[] }

web/app/components/base/app-icon-picker/__tests__/index.spec.tsx

@@ -3,7 +3,7 @@ import type { ImageFile } from '@/types/app'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { TransferMethod } from '@/types/app'
-import AppIconPicker from './index'
+import AppIconPicker from '../index'
 import 'vitest-canvas-mock'
 
 type LocalFileUploaderOptions = {
@@ -93,7 +93,7 @@ vi.mock('react-easy-crop', () => ({
   ),
 }))
 
-vi.mock('../image-uploader/hooks', () => ({
+vi.mock('../../image-uploader/hooks', () => ({
   useLocalFileUploader: (options: LocalFileUploaderOptions) => {
     mocks.onUpload = options.onUpload
     return { handleLocalFileUpload: mocks.handleLocalFileUpload }

web/app/components/base/app-icon-picker/__tests__/utils.spec.ts

@@ -1,4 +1,4 @@
-import getCroppedImg, { checkIsAnimatedImage, createImage, getMimeType, getRadianAngle, rotateSize } from './utils'
+import getCroppedImg, { checkIsAnimatedImage, createImage, getMimeType, getRadianAngle, rotateSize } from '../utils'
 
 type ImageLoadEventType = 'load' | 'error'
 

web/app/components/base/app-icon/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import AppIcon from './index'
+import AppIcon from '../index'
 
 // Mock emoji-mart initialization
 vi.mock('emoji-mart', () => ({

web/app/components/base/audio-btn/__tests__/index.spec.tsx

@@ -2,7 +2,7 @@ import { act, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import i18next from 'i18next'
 import { useParams, usePathname } from 'next/navigation'
-import AudioBtn from './index'
+import AudioBtn from '../index'
 
 const mockPlayAudio = vi.fn()
 const mockPauseAudio = vi.fn()

web/app/components/base/audio-gallery/__tests__/AudioPlayer.spec.tsx

@@ -4,7 +4,7 @@ import { vi } from 'vitest'
 import useThemeMock from '@/hooks/use-theme'
 
 import { Theme } from '@/types/app'
-import AudioPlayer from './AudioPlayer'
+import AudioPlayer from '../AudioPlayer'
 
 vi.mock('@/hooks/use-theme', () => ({
   default: vi.fn(() => ({ theme: 'light' })),

web/app/components/base/audio-gallery/__tests__/index.spec.tsx

@@ -3,12 +3,12 @@ import * as React from 'react'
 // AudioGallery.spec.tsx
 import { describe, expect, it, vi } from 'vitest'
 
-import AudioGallery from './index'
+import AudioGallery from '../index'
 
 // Mock AudioPlayer so we only assert prop forwarding
 const audioPlayerMock = vi.fn()
 
-vi.mock('./AudioPlayer', () => ({
+vi.mock('../AudioPlayer', () => ({
   default: (props: { srcs: string[] }) => {
     audioPlayerMock(props)
     return <div data-testid="audio-player" />

web/app/components/base/auto-height-textarea/__tests__/index.spec.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { sleep } from '@/utils'
-import AutoHeightTextarea from './index'
+import AutoHeightTextarea from '../index'
 
 vi.mock('@/utils', async () => {
   const actual = await vi.importActual('@/utils')

web/app/components/base/avatar/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import Avatar from './index'
+import Avatar from '../index'
 
 describe('Avatar', () => {
   beforeEach(() => {

web/app/components/base/badge/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import Badge, { BadgeState, BadgeVariants } from './index'
+import Badge, { BadgeState, BadgeVariants } from '../index'
 
 describe('Badge', () => {
   describe('Rendering', () => {

web/app/components/base/block-input/__tests__/index.spec.tsx

@@ -1,7 +1,7 @@
 import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import Toast from '@/app/components/base/toast'
-import BlockInput, { getInputKeys } from './index'
+import BlockInput, { getInputKeys } from '../index'
 
 vi.mock('@/utils/var', () => ({
   checkKeys: vi.fn((_keys: string[]) => ({

web/app/components/base/button/__tests__/add-button.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import AddButton from './add-button'
+import AddButton from '../add-button'
 
 describe('AddButton', () => {
   describe('Rendering', () => {

web/app/components/base/button/__tests__/index.spec.tsx

@@ -1,6 +1,6 @@
 import { cleanup, fireEvent, render } from '@testing-library/react'
 import * as React from 'react'
-import Button from './index'
+import Button from '../index'
 
 afterEach(cleanup)
 // https://testing-library.com/docs/queries/about

web/app/components/base/button/__tests__/sync-button.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import SyncButton from './sync-button'
+import SyncButton from '../sync-button'
 
 describe('SyncButton', () => {
   describe('Rendering', () => {

web/app/components/base/carousel/__tests__/index.spec.tsx

@@ -1,7 +1,7 @@
 import type { Mock } from 'vitest'
 import { act, fireEvent, render, screen } from '@testing-library/react'
 import useEmblaCarousel from 'embla-carousel-react'
-import { Carousel, useCarousel } from './index'
+import { Carousel, useCarousel } from '../index'
 
 vi.mock('embla-carousel-react', () => ({
   default: vi.fn(),

web/app/components/base/chat/chat-with-history/__tests__/chat-wrapper.spec.tsx

@@ -1,5 +1,5 @@
-import type { ChatConfig, ChatItemInTree } from '../types'
-import type { ChatWithHistoryContextValue } from './context'
+import type { ChatConfig, ChatItemInTree } from '../../types'
+import type { ChatWithHistoryContextValue } from '../context'
 import type { FileEntity } from '@/app/components/base/file-uploader/types'
 import type { AppData, AppMeta, ConversationItem } from '@/models/share'
 import type { HumanInputFormData } from '@/types/workflow'
@@ -12,17 +12,17 @@ import {
   stopChatMessageResponding,
 } from '@/service/share'
 import { TransferMethod } from '@/types/app'
-import { useChat } from '../chat/hooks'
+import { useChat } from '../../chat/hooks'
 
-import { isValidGeneratedAnswer } from '../utils'
-import ChatWrapper from './chat-wrapper'
-import { useChatWithHistoryContext } from './context'
+import { isValidGeneratedAnswer } from '../../utils'
+import ChatWrapper from '../chat-wrapper'
+import { useChatWithHistoryContext } from '../context'
 
-vi.mock('../chat/hooks', () => ({
+vi.mock('../../chat/hooks', () => ({
   useChat: vi.fn(),
 }))
 
-vi.mock('./context', () => ({
+vi.mock('../context', () => ({
   useChatWithHistoryContext: vi.fn(),
 }))
 
@@ -37,7 +37,7 @@ vi.mock('next/navigation', () => ({
   useParams: vi.fn(() => ({ token: 'test-token' })),
 }))
 
-vi.mock('../utils', () => ({
+vi.mock('../../utils', () => ({
   isValidGeneratedAnswer: vi.fn(),
   getLastAnswer: vi.fn(),
 }))

web/app/components/base/chat/chat-with-history/__tests__/header-in-mobile.spec.tsx

@@ -1,12 +1,12 @@
-import type { ChatConfig } from '../types'
-import type { ChatWithHistoryContextValue } from './context'
+import type { ChatConfig } from '../../types'
+import type { ChatWithHistoryContextValue } from '../context'
 import type { AppData, AppMeta, ConversationItem } from '@/models/share'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-import { useChatWithHistoryContext } from './context'
-import HeaderInMobile from './header-in-mobile'
+import { useChatWithHistoryContext } from '../context'
+import HeaderInMobile from '../header-in-mobile'
 
 vi.mock('@/hooks/use-breakpoints', () => ({
   default: vi.fn(),
@@ -17,7 +17,7 @@ vi.mock('@/hooks/use-breakpoints', () => ({
   },
 }))
 
-vi.mock('./context', () => ({
+vi.mock('../context', () => ({
   useChatWithHistoryContext: vi.fn(),
   ChatWithHistoryContext: { Provider: ({ children }: { children: React.ReactNode }) => <div>{children}</div> },
 }))
@@ -33,7 +33,7 @@ vi.mock('next/navigation', () => ({
   useParams: vi.fn(() => ({})),
 }))
 
-vi.mock('../embedded-chatbot/theme/theme-context', () => ({
+vi.mock('../../embedded-chatbot/theme/theme-context', () => ({
   useThemeContext: vi.fn(() => ({
     buildTheme: vi.fn(),
   })),

web/app/components/base/chat/chat-with-history/__tests__/hooks.spec.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react'
-import type { ChatConfig } from '../types'
+import type { ChatConfig } from '../../types'
 import type { AppConversationData, AppData, AppMeta, ConversationItem } from '@/models/share'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { act, renderHook, waitFor } from '@testing-library/react'
@@ -11,8 +11,8 @@ import {
   generationConversationName,
 } from '@/service/share'
 import { shareQueryKeys } from '@/service/use-share'
-import { CONVERSATION_ID_INFO } from '../constants'
-import { useChatWithHistory } from './hooks'
+import { CONVERSATION_ID_INFO } from '../../constants'
+import { useChatWithHistory } from '../hooks'
 
 vi.mock('@/hooks/use-app-favicon', () => ({
   useAppFavicon: vi.fn(),
@@ -40,8 +40,8 @@ vi.mock('@/context/web-app-context', () => ({
   useWebAppStore: (selector?: (state: typeof mockStoreState) => unknown) => useWebAppStoreMock(selector),
 }))
 
-vi.mock('../utils', async () => {
-  const actual = await vi.importActual<typeof import('../utils')>('../utils')
+vi.mock('../../utils', async () => {
+  const actual = await vi.importActual<typeof import('../../utils')>('../../utils')
   return {
     ...actual,
     getProcessedSystemVariablesFromUrlParams: vi.fn().mockResolvedValue({ user_id: 'user-1' }),

web/app/components/base/chat/chat-with-history/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import type { RefObject } from 'react'
-import type { ChatConfig } from '../types'
+import type { ChatConfig } from '../../types'
 import type { InstalledApp } from '@/models/explore'
 import type { AppConversationData, AppData, AppMeta, ConversationItem } from '@/models/share'
 import { fireEvent, render, screen } from '@testing-library/react'
@@ -7,11 +7,11 @@ import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useDocumentTitle from '@/hooks/use-document-title'
-import { useChatWithHistory } from './hooks'
-import ChatWithHistory from './index'
+import { useChatWithHistory } from '../hooks'
+import ChatWithHistory from '../index'
 
 // --- Mocks ---
-vi.mock('./hooks', () => ({
+vi.mock('../hooks', () => ({
   useChatWithHistory: vi.fn(),
 }))
 
@@ -40,7 +40,7 @@ vi.mock('next/navigation', () => ({
 }))
 
 const mockBuildTheme = vi.fn()
-vi.mock('../embedded-chatbot/theme/theme-context', () => ({
+vi.mock('../../embedded-chatbot/theme/theme-context', () => ({
   useThemeContext: vi.fn(() => ({
     buildTheme: mockBuildTheme,
   })),

web/app/components/base/chat/chat-with-history/header/__tests__/index.spec.tsx

@@ -1,13 +1,13 @@
-import type { ChatWithHistoryContextValue } from '../context'
+import type { ChatWithHistoryContextValue } from '../../context'
 import type { AppData, ConversationItem } from '@/models/share'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { useChatWithHistoryContext } from '../context'
-import Header from './index'
+import { useChatWithHistoryContext } from '../../context'
+import Header from '../index'
 
 // Mock context module
-vi.mock('../context', () => ({
+vi.mock('../../context', () => ({
   useChatWithHistoryContext: vi.fn(),
 }))
 

web/app/components/base/chat/chat-with-history/header/__tests__/mobile-operation-dropdown.spec.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import MobileOperationDropdown from './mobile-operation-dropdown'
+import MobileOperationDropdown from '../mobile-operation-dropdown'
 
 describe('MobileOperationDropdown Component', () => {
   const defaultProps = {

web/app/components/base/chat/chat-with-history/header/__tests__/operation.spec.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import Operation from './operation'
+import Operation from '../operation'
 
 describe('Operation Component', () => {
   const defaultProps = {

web/app/components/base/chat/chat-with-history/inputs-form/__tests__/content.spec.tsx

@@ -1,10 +1,10 @@
-import type { ChatWithHistoryContextValue } from '../context'
+import type { ChatWithHistoryContextValue } from '../../context'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { InputVarType } from '@/app/components/workflow/types'
-import InputsFormContent from './content'
+import InputsFormContent from '../content'
 
 // Keep lightweight mocks for non-base project components
 vi.mock('@/app/components/workflow/nodes/_base/components/before-run-form/bool-input', () => ({
@@ -90,7 +90,7 @@ const createMockContext = (overrides: Partial<ChatWithHistoryContextValue> = {})
 // Create a real context for testing to support controlled component behavior
 const MockContext = React.createContext<ChatWithHistoryContextValue>(createMockContext())
 
-vi.mock('../context', () => ({
+vi.mock('../../context', () => ({
   useChatWithHistoryContext: () => React.useContext(MockContext),
 }))
 

web/app/components/base/chat/chat-with-history/inputs-form/__tests__/index.spec.tsx

@@ -1,11 +1,11 @@
-import type { ChatWithHistoryContextValue } from '../context'
+import type { ChatWithHistoryContextValue } from '../../context'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { InputVarType } from '@/app/components/workflow/types'
-import { useChatWithHistoryContext } from '../context'
-import InputsFormNode from './index'
+import { useChatWithHistoryContext } from '../../context'
+import InputsFormNode from '../index'
 
 // Mocks for components used by InputsFormContent (the real sibling)
 vi.mock('@/app/components/workflow/nodes/_base/components/before-run-form/bool-input', () => ({
@@ -31,7 +31,7 @@ vi.mock('@/app/components/base/file-uploader', () => ({
   ),
 }))
 
-vi.mock('../context', () => ({
+vi.mock('../../context', () => ({
   useChatWithHistoryContext: vi.fn(),
 }))
 

web/app/components/base/chat/chat-with-history/inputs-form/__tests__/view-form-dropdown.spec.tsx

@@ -1,11 +1,11 @@
-import type { ChatWithHistoryContextValue } from '../context'
+import type { ChatWithHistoryContextValue } from '../../context'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { InputVarType } from '@/app/components/workflow/types'
-import { useChatWithHistoryContext } from '../context'
-import ViewFormDropdown from './view-form-dropdown'
+import { useChatWithHistoryContext } from '../../context'
+import ViewFormDropdown from '../view-form-dropdown'
 
 // Mocks for components used by InputsFormContent (the real sibling)
 vi.mock('@/app/components/workflow/nodes/_base/components/before-run-form/bool-input', () => ({
@@ -31,7 +31,7 @@ vi.mock('@/app/components/base/file-uploader', () => ({
   ),
 }))
 
-vi.mock('../context', () => ({
+vi.mock('../../context', () => ({
   useChatWithHistoryContext: vi.fn(),
 }))
 

web/app/components/base/chat/chat-with-history/sidebar/__tests__/index.spec.tsx

@@ -1,13 +1,13 @@
-import type { ChatWithHistoryContextValue } from '../context'
+import type { ChatWithHistoryContextValue } from '../../context'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { useChatWithHistoryContext } from '../context'
-import Sidebar from './index'
+import { useChatWithHistoryContext } from '../../context'
+import Sidebar from '../index'
 
 // Mock List to allow us to trigger operations
-vi.mock('./list', () => ({
+vi.mock('../list', () => ({
   default: ({ list, onOperate, title }: { list: Array<{ id: string, name: string }>, onOperate: (type: string, item: { id: string, name: string }) => void, title?: string }) => (
     <div>
       {title && <div>{title}</div>}
@@ -25,7 +25,7 @@ vi.mock('./list', () => ({
 }))
 
 // Mock context hook
-vi.mock('../context', () => ({
+vi.mock('../../context', () => ({
   useChatWithHistoryContext: vi.fn(),
 }))
 

web/app/components/base/chat/chat-with-history/sidebar/__tests__/item.spec.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import Item from './item'
+import Item from '../item'
 
 // Mock Operation to verify its usage
 vi.mock('@/app/components/base/chat/chat-with-history/sidebar/operation', () => ({

web/app/components/base/chat/chat-with-history/sidebar/__tests__/list.spec.tsx

@@ -1,10 +1,10 @@
 import { render, screen } from '@testing-library/react'
 import * as React from 'react'
 import { describe, expect, it, vi } from 'vitest'
-import List from './list'
+import List from '../list'
 
 // Mock Item to verify its usage
-vi.mock('./item', () => ({
+vi.mock('../item', () => ({
   default: ({ item }: { item: { name: string } }) => (
     <div data-testid="mock-item">
       {item.name}

web/app/components/base/chat/chat-with-history/sidebar/__tests__/operation.spec.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import Operation from './operation'
+import Operation from '../operation'
 
 // Mock PortalToFollowElem components to render children in place
 vi.mock('@/app/components/base/portal-to-follow-elem', () => ({

web/app/components/base/chat/chat-with-history/sidebar/__tests__/rename-modal.spec.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import RenameModal from './rename-modal'
+import RenameModal from '../rename-modal'
 
 describe('RenameModal', () => {
   const defaultProps = {

web/app/components/base/chat/chat/__tests__/content-switch.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
-import ContentSwitch from './content-switch'
+import ContentSwitch from '../content-switch'
 
 describe('ContentSwitch', () => {
   const defaultProps = {

web/app/components/base/chat/chat/__tests__/context.spec.tsx

@@ -1,9 +1,9 @@
-import type { ChatItem } from '../types'
-import type { ChatContextValue } from './context'
+import type { ChatItem } from '../../types'
+import type { ChatContextValue } from '../context'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { vi } from 'vitest'
-import { ChatContextProvider, useChatContext } from './context'
+import { ChatContextProvider, useChatContext } from '../context'
 
 const TestConsumer = () => {
   const context = useChatContext()

web/app/components/base/chat/chat/__tests__/index.spec.tsx

@@ -1,10 +1,10 @@
-import type { ChatConfig, ChatItem, OnSend } from '../types'
-import type { ChatProps } from './index'
+import type { ChatConfig, ChatItem, OnSend } from '../../types'
+import type { ChatProps } from '../index'
 import { act, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import Chat from './index'
+import Chat from '../index'
 
 // ─── Why each mock exists ─────────────────────────────────────────────────────
 //
@@ -24,7 +24,7 @@ import Chat from './index'
 //   TryToAsk            – only uses Button (base), Divider (base), i18n (global mock).
 // ─────────────────────────────────────────────────────────────────────────────
 
-vi.mock('./answer', () => ({
+vi.mock('../answer', () => ({
   default: ({ item, responding }: { item: ChatItem, responding?: boolean }) => (
     <div
       data-testid="answer-item"
@@ -36,13 +36,13 @@ vi.mock('./answer', () => ({
   ),
 }))
 
-vi.mock('./question', () => ({
+vi.mock('../question', () => ({
   default: ({ item }: { item: ChatItem }) => (
     <div data-testid="question-item" data-id={item.id}>{item.content}</div>
   ),
 }))
 
-vi.mock('./chat-input-area', () => ({
+vi.mock('../chat-input-area', () => ({
   default: ({ disabled, readonly }: { disabled?: boolean, readonly?: boolean }) => (
     <div
       data-testid="chat-input-area"

web/app/components/base/chat/chat/__tests__/question.spec.tsx

@@ -1,5 +1,5 @@
-import type { Theme } from '../embedded-chatbot/theme/theme-context'
-import type { ChatConfig, ChatItem, OnRegenerate } from '../types'
+import type { Theme } from '../../embedded-chatbot/theme/theme-context'
+import type { ChatConfig, ChatItem, OnRegenerate } from '../../types'
 import type { FileEntity } from '@/app/components/base/file-uploader/types'
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
@@ -7,10 +7,10 @@ import copy from 'copy-to-clipboard'
 import * as React from 'react'
 import { vi } from 'vitest'
 
-import Toast from '../../toast'
-import { ThemeBuilder } from '../embedded-chatbot/theme/theme-context'
-import { ChatContextProvider } from './context'
-import Question from './question'
+import Toast from '../../../toast'
+import { ThemeBuilder } from '../../embedded-chatbot/theme/theme-context'
+import { ChatContextProvider } from '../context'
+import Question from '../question'
 
 // Global Mocks
 vi.mock('@react-aria/interactions', () => ({

web/app/components/base/chat/chat/__tests__/try-to-ask.spec.tsx

@@ -1,7 +1,7 @@
-import type { OnSend } from '../types'
+import type { OnSend } from '../../types'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import TryToAsk from './try-to-ask'
+import TryToAsk from '../try-to-ask'
 
 describe('TryToAsk', () => {
   const mockOnSend: OnSend = vi.fn()

web/app/components/base/chat/chat/answer/__tests__/agent-content.spec.tsx

@@ -1,9 +1,9 @@
-import type { ChatItem } from '../../types'
+import type { ChatItem } from '../../../types'
 import type { IThoughtProps } from '@/app/components/base/chat/chat/thought'
 import type { FileEntity } from '@/app/components/base/file-uploader/types'
 import type { MarkdownProps } from '@/app/components/base/markdown'
 import { render, screen } from '@testing-library/react'
-import AgentContent from './agent-content'
+import AgentContent from '../agent-content'
 
 // Mock Markdown component used only in tests
 vi.mock('@/app/components/base/markdown', () => ({

web/app/components/base/chat/chat/answer/__tests__/basic-content.spec.tsx

@@ -1,7 +1,7 @@
-import type { ChatItem } from '../../types'
+import type { ChatItem } from '../../../types'
 import type { MarkdownProps } from '@/app/components/base/markdown'
 import { render, screen } from '@testing-library/react'
-import BasicContent from './basic-content'
+import BasicContent from '../basic-content'
 
 // Mock Markdown component used only in tests
 vi.mock('@/app/components/base/markdown', () => ({

web/app/components/base/chat/chat/answer/__tests__/human-input-filled-form-list.spec.tsx

@@ -1,7 +1,7 @@
 import type { HumanInputFilledFormData } from '@/types/workflow'
 import { render, screen } from '@testing-library/react'
 import { describe, expect, it } from 'vitest'
-import HumanInputFilledFormList from './human-input-filled-form-list'
+import HumanInputFilledFormList from '../human-input-filled-form-list'
 
 /**
  * Type-safe factory.

web/app/components/base/chat/chat/answer/__tests__/human-input-form-list.spec.tsx

@@ -1,10 +1,10 @@
 import type { HumanInputFormData } from '@/types/workflow'
 import { render, screen } from '@testing-library/react'
 import { DeliveryMethodType } from '@/app/components/workflow/nodes/human-input/types'
-import HumanInputFormList from './human-input-form-list'
+import HumanInputFormList from '../human-input-form-list'
 
 // Mock child components
-vi.mock('./human-input-content/content-wrapper', () => ({
+vi.mock('../human-input-content/content-wrapper', () => ({
   default: ({ children, nodeTitle }: { children: React.ReactNode, nodeTitle: string }) => (
     <div data-testid="content-wrapper" data-nodetitle={nodeTitle}>
       {children}
@@ -12,7 +12,7 @@ vi.mock('./human-input-content/content-wrapper', () => ({
   ),
 }))
 
-vi.mock('./human-input-content/unsubmitted', () => ({
+vi.mock('../human-input-content/unsubmitted', () => ({
   UnsubmittedHumanInputContent: ({ showEmailTip, isEmailDebugMode, showDebugModeTip }: { showEmailTip: boolean, isEmailDebugMode: boolean, showDebugModeTip: boolean }) => (
     <div data-testid="unsubmitted-content">
       <span data-testid="email-tip">{showEmailTip ? 'true' : 'false'}</span>

web/app/components/base/chat/chat/answer/__tests__/more.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import More from './more'
+import More from '../more'
 
 describe('More', () => {
   const mockMoreData = {

web/app/components/base/chat/chat/answer/__tests__/operation.spec.tsx

@@ -1,5 +1,5 @@
-import type { ChatConfig, ChatItem } from '../../types'
-import type { ChatContextValue } from '../context'
+import type { ChatConfig, ChatItem } from '../../../types'
+import type { ChatContextValue } from '../../context'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import copy from 'copy-to-clipboard'
@@ -7,7 +7,7 @@ import * as React from 'react'
 import { vi } from 'vitest'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
-import Operation from './operation'
+import Operation from '../operation'
 
 const {
   mockSetShowAnnotationFullModal,
@@ -158,7 +158,7 @@ const mockContextValue: ChatContextValue = {
   onAnnotationRemoved: vi.fn(),
 }
 
-vi.mock('../context', () => ({
+vi.mock('../../context', () => ({
   useChatContext: () => mockContextValue,
 }))
 

web/app/components/base/chat/chat/answer/__tests__/suggested-questions.spec.tsx

@@ -1,12 +1,12 @@
 import type { Mock } from 'vitest' // Or 'jest' if using Jest
-import type { IChatItem } from '../type'
+import type { IChatItem } from '../../type'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { useChatContext } from '../context'
-import SuggestedQuestions from './suggested-questions'
+import { useChatContext } from '../../context'
+import SuggestedQuestions from '../suggested-questions'
 
 // Mock the chat context
-vi.mock('../context', () => ({
+vi.mock('../../context', () => ({
   useChatContext: vi.fn(),
 }))
 

web/app/components/base/chat/chat/answer/__tests__/tool-detail.spec.tsx

@@ -1,7 +1,7 @@
-import type { ToolInfoInThought } from '../type'
+import type { ToolInfoInThought } from '../../type'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import ToolDetail from './tool-detail'
+import ToolDetail from '../tool-detail'
 
 describe('ToolDetail', () => {
   const mockPayload: ToolInfoInThought = {

web/app/components/base/chat/chat/answer/__tests__/workflow-process.spec.tsx

@@ -1,8 +1,8 @@
-import type { WorkflowProcess } from '../../types'
+import type { WorkflowProcess } from '../../../types'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
-import WorkflowProcessItem from './workflow-process'
+import WorkflowProcessItem from '../workflow-process'
 
 // Mock TracingPanel as it's a complex child component
 vi.mock('@/app/components/workflow/run/tracing-panel', () => ({

web/app/components/base/chat/chat/answer/human-input-content/__tests__/content-item.spec.tsx

@@ -2,7 +2,7 @@ import type { FormInputItem } from '@/app/components/workflow/nodes/human-input/
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
-import ContentItem from './content-item'
+import ContentItem from '../content-item'
 
 vi.mock('@/app/components/base/markdown', () => ({
   Markdown: ({ content }: { content: string }) => <div data-testid="mock-markdown">{content}</div>,

web/app/components/base/chat/chat/answer/human-input-content/__tests__/content-wrapper.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { describe, expect, it } from 'vitest'
-import ContentWrapper from './content-wrapper'
+import ContentWrapper from '../content-wrapper'
 
 describe('ContentWrapper', () => {
   const defaultProps = {

web/app/components/base/chat/chat/answer/human-input-content/__tests__/executed-action.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import { describe, expect, it } from 'vitest'
-import ExecutedAction from './executed-action'
+import ExecutedAction from '../executed-action'
 
 describe('ExecutedAction', () => {
   it('should render the triggered action information', () => {

web/app/components/base/chat/chat/answer/human-input-content/__tests__/expiration-time.spec.tsx

@@ -1,11 +1,11 @@
 import { render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
-import ExpirationTime from './expiration-time'
-import * as utils from './utils'
+import ExpirationTime from '../expiration-time'
+import * as utils from '../utils'
 
 // Mock utils to control time-based logic
-vi.mock('./utils', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('./utils')>()
+vi.mock('../utils', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../utils')>()
   return {
     ...actual,
     getRelativeTime: vi.fn(),

web/app/components/base/chat/chat/answer/human-input-content/__tests__/human-input-form.spec.tsx

@@ -4,9 +4,9 @@ import { act, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
 import { UserActionButtonType } from '@/app/components/workflow/nodes/human-input/types'
-import HumanInputForm from './human-input-form'
+import HumanInputForm from '../human-input-form'
 
-vi.mock('./content-item', () => ({
+vi.mock('../content-item', () => ({
   default: ({ content, onInputChange }: { content: string, onInputChange: (name: string, value: string) => void }) => (
     <div data-testid="mock-content-item">
       {content}

web/app/components/base/chat/chat/answer/human-input-content/__tests__/submitted-content.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
-import SubmittedContent from './submitted-content'
+import SubmittedContent from '../submitted-content'
 
 vi.mock('@/app/components/base/markdown', () => ({
   Markdown: ({ content }: { content: string }) => <div data-testid="mock-markdown">{content}</div>,

web/app/components/base/chat/chat/answer/human-input-content/__tests__/submitted.spec.tsx

@@ -1,7 +1,7 @@
 import type { HumanInputFilledFormData } from '@/types/workflow'
 import { render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
-import { SubmittedHumanInputContent } from './submitted'
+import { SubmittedHumanInputContent } from '../submitted'
 
 vi.mock('@/app/components/base/markdown', () => ({
   Markdown: ({ content }: { content: string }) => <div data-testid="mock-markdown">{content}</div>,

web/app/components/base/chat/chat/answer/human-input-content/__tests__/tips.spec.tsx

@@ -2,7 +2,7 @@ import type { AppContextValue } from '@/context/app-context'
 import { render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import { useSelector } from '@/context/app-context'
-import Tips from './tips'
+import Tips from '../tips'
 
 // Mock AppContext's useSelector to control user profile data
 vi.mock('@/context/app-context', async (importOriginal) => {

web/app/components/base/chat/chat/answer/human-input-content/__tests__/unsubmitted.spec.tsx

@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
 import { UserActionButtonType } from '@/app/components/workflow/nodes/human-input/types'
 import { useSelector } from '@/context/app-context'
-import { UnsubmittedHumanInputContent } from './unsubmitted'
+import { UnsubmittedHumanInputContent } from '../unsubmitted'
 
 // Mock AppContext's useSelector to control user profile data
 vi.mock('@/context/app-context', async (importOriginal) => {

web/app/components/base/chat/chat/chat-input-area/__tests__/index.spec.tsx

@@ -5,7 +5,7 @@ import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { vi } from 'vitest'
-import ChatInputArea from './index'
+import ChatInputArea from '../index'
 
 // ---------------------------------------------------------------------------
 // Hoist shared mock references so they are available inside vi.mock factories
@@ -106,7 +106,7 @@ vi.mock('@/app/components/base/toast', async () => {
 // ---------------------------------------------------------------------------
 let mockIsMultipleLine = false
 
-vi.mock('./hooks', () => ({
+vi.mock('../hooks', () => ({
   useTextAreaHeight: () => ({
     wrapperRef: { current: document.createElement('div') },
     textareaRef: { current: document.createElement('textarea') },
@@ -122,7 +122,7 @@ vi.mock('./hooks', () => ({
 // ---------------------------------------------------------------------------
 // Input-forms validation hook – always passes by default
 // ---------------------------------------------------------------------------
-vi.mock('../check-input-forms-hooks', () => ({
+vi.mock('../../check-input-forms-hooks', () => ({
   useCheckInputsForms: () => ({
     checkInputsForm: vi.fn().mockReturnValue(true),
   }),

web/app/components/base/chat/chat/chat-input-area/__tests__/operation.spec.tsx

@@ -1,9 +1,9 @@
-import type { EnableType } from '../../types'
+import type { EnableType } from '../../../types'
 import type { FileUpload } from '@/app/components/base/features/types'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { Theme } from '../../embedded-chatbot/theme/theme-context'
-import Operation from './operation'
+import { Theme } from '../../../embedded-chatbot/theme/theme-context'
+import Operation from '../operation'
 
 vi.mock('@/app/components/base/file-uploader', () => ({
   FileUploaderInChatInput: ({ readonly }: { readonly?: boolean }) => (

web/app/components/base/chat/chat/citation/__tests__/index.spec.tsx

@@ -1,10 +1,10 @@
-import type { CitationItem } from '../type'
+import type { CitationItem } from '../../type'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
-import Citation from './index'
+import Citation from '../index'
 
-vi.mock('./popup', () => ({
+vi.mock('../popup', () => ({
   default: ({ data, showHitInfo }: { data: { documentName: string }, showHitInfo?: boolean }) => (
     <div data-testid="popup" data-show-hit-info={String(!!showHitInfo)}>
       {data.documentName}

web/app/components/base/chat/chat/citation/__tests__/popup.spec.tsx

@@ -1,11 +1,11 @@
-import type { Resources } from './index'
+import type { Resources } from '../index'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { useDocumentDownload } from '@/service/knowledge/use-document'
 
 import { downloadUrl } from '@/utils/download'
-import Popup from './popup'
+import Popup from '../popup'
 
 vi.mock('@/service/knowledge/use-document', () => ({
   useDocumentDownload: vi.fn(),
@@ -19,11 +19,11 @@ vi.mock('@/app/components/base/file-icon', () => ({
   default: ({ type }: { type: string }) => <div data-testid="file-icon" data-type={type} />,
 }))
 
-vi.mock('./progress-tooltip', () => ({
+vi.mock('../progress-tooltip', () => ({
   default: ({ data }: { data: number }) => <div data-testid="progress-tooltip">{data}</div>,
 }))
 
-vi.mock('./tooltip', () => ({
+vi.mock('../tooltip', () => ({
   default: ({ text, data }: { text: string, data: number | string }) => (
     <div data-testid="citation-tooltip" data-text={text}>{data}</div>
   ),

web/app/components/base/chat/chat/citation/__tests__/progress-tooltip.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
-import ProgressTooltip from './progress-tooltip'
+import ProgressTooltip from '../progress-tooltip'
 
 describe('ProgressTooltip', () => {
   describe('Rendering', () => {

web/app/components/base/chat/chat/citation/__tests__/tooltip.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { describe, expect, it } from 'vitest'
-import Tooltip from './tooltip'
+import Tooltip from '../tooltip'
 
 const renderTooltip = (data: number | string = 42, text = 'Characters', icon = <span data-testid="mock-icon">icon</span>) =>
   render(<Tooltip data={data} text={text} icon={icon} />)

web/app/components/base/chat/chat/loading-anim/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react'
-import LoadingAnim from './index'
+import LoadingAnim from '../index'
 
 describe('LoadingAnim', () => {
   it('should render correctly with text type', () => {

web/app/components/base/chat/chat/log/__tests__/index.spec.tsx

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { vi } from 'vitest'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import Log from './index'
+import Log from '../index'
 
 vi.mock('@/app/components/app/store', () => ({
   useStore: vi.fn(),

web/app/components/base/chat/chat/thought/__tests__/index.spec.tsx

@@ -1,7 +1,7 @@
-import type { ThoughtItem } from '../type'
+import type { ThoughtItem } from '../../type'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import Thought from './index'
+import Thought from '../index'
 
 describe('Thought', () => {
   const createThought = (overrides?: Partial<ThoughtItem>): ThoughtItem => ({

web/app/components/base/chat/embedded-chatbot/__tests__/chat-wrapper.spec.tsx

@@ -1,5 +1,5 @@
-import type { ChatConfig, ChatItem, ChatItemInTree } from '../types'
-import type { EmbeddedChatbotContextValue } from './context'
+import type { ChatConfig, ChatItem, ChatItemInTree } from '../../types'
+import type { EmbeddedChatbotContextValue } from '../context'
 import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { vi } from 'vitest'
 import { InputVarType } from '@/app/components/workflow/types'
@@ -9,24 +9,24 @@ import {
   submitHumanInputForm,
 } from '@/service/share'
 import { submitHumanInputForm as submitHumanInputFormService } from '@/service/workflow'
-import { useChat } from '../chat/hooks'
-import ChatWrapper from './chat-wrapper'
-import { useEmbeddedChatbotContext } from './context'
+import { useChat } from '../../chat/hooks'
+import ChatWrapper from '../chat-wrapper'
+import { useEmbeddedChatbotContext } from '../context'
 
-vi.mock('./context', () => ({
+vi.mock('../context', () => ({
   useEmbeddedChatbotContext: vi.fn(),
 }))
 
-vi.mock('../chat/hooks', () => ({
+vi.mock('../../chat/hooks', () => ({
   useChat: vi.fn(),
 }))
 
-vi.mock('./inputs-form', () => ({
+vi.mock('../inputs-form', () => ({
   __esModule: true,
   default: () => <div>inputs form</div>,
 }))
 
-vi.mock('../chat', () => ({
+vi.mock('../../chat', () => ({
   __esModule: true,
   default: ({
     chatNode,
@@ -87,7 +87,7 @@ vi.mock('@/service/workflow', () => ({
 }))
 
 const mockIsDify = vi.fn(() => false)
-vi.mock('./utils', () => ({
+vi.mock('../utils', () => ({
   isDify: () => mockIsDify(),
 }))
 

web/app/components/base/chat/embedded-chatbot/__tests__/hooks.spec.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react'
-import type { ChatConfig } from '../types'
+import type { ChatConfig } from '../../types'
 import type { AppConversationData, AppData, AppMeta, ConversationItem } from '@/models/share'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { act, renderHook, waitFor } from '@testing-library/react'
@@ -11,8 +11,8 @@ import {
   generationConversationName,
 } from '@/service/share'
 import { shareQueryKeys } from '@/service/use-share'
-import { CONVERSATION_ID_INFO } from '../constants'
-import { useEmbeddedChatbot } from './hooks'
+import { CONVERSATION_ID_INFO } from '../../constants'
+import { useEmbeddedChatbot } from '../hooks'
 
 vi.mock('@/i18n-config/client', () => ({
   changeLanguage: vi.fn().mockResolvedValue(undefined),
@@ -40,8 +40,8 @@ vi.mock('@/context/web-app-context', () => ({
   useWebAppStore: (selector?: (state: typeof mockStoreState) => unknown) => useWebAppStoreMock(selector),
 }))
 
-vi.mock('../utils', async () => {
-  const actual = await vi.importActual<typeof import('../utils')>('../utils')
+vi.mock('../../utils', async () => {
+  const actual = await vi.importActual<typeof import('../../utils')>('../../utils')
   return {
     ...actual,
     getProcessedInputsFromUrlParams: vi.fn().mockResolvedValue({}),

web/app/components/base/chat/embedded-chatbot/__tests__/index.spec.tsx

@@ -1,15 +1,15 @@
 import type { RefObject } from 'react'
-import type { ChatConfig } from '../types'
+import type { ChatConfig } from '../../types'
 import type { AppData, AppMeta, ConversationItem } from '@/models/share'
 import { render, screen } from '@testing-library/react'
 import { vi } from 'vitest'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { defaultSystemFeatures } from '@/types/feature'
-import { useEmbeddedChatbot } from './hooks'
-import EmbeddedChatbot from './index'
+import { useEmbeddedChatbot } from '../hooks'
+import EmbeddedChatbot from '../index'
 
-vi.mock('./hooks', () => ({
+vi.mock('../hooks', () => ({
   useEmbeddedChatbot: vi.fn(),
 }))
 
@@ -30,17 +30,17 @@ vi.mock('@/context/global-public-context', () => ({
   useGlobalPublicStore: vi.fn(),
 }))
 
-vi.mock('./chat-wrapper', () => ({
+vi.mock('../chat-wrapper', () => ({
   __esModule: true,
   default: () => <div>chat area</div>,
 }))
 
-vi.mock('./header', () => ({
+vi.mock('../header', () => ({
   __esModule: true,
   default: () => <div>chat header</div>,
 }))
 
-vi.mock('./theme/theme-context', () => ({
+vi.mock('../theme/theme-context', () => ({
   useThemeContext: vi.fn(() => ({
     buildTheme: vi.fn(),
     theme: {
@@ -50,7 +50,7 @@ vi.mock('./theme/theme-context', () => ({
 }))
 
 const mockIsDify = vi.fn(() => false)
-vi.mock('./utils', () => ({
+vi.mock('../utils', () => ({
   isDify: () => mockIsDify(),
 }))
 

web/app/components/base/chat/embedded-chatbot/header/__tests__/index.spec.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable next/no-img-element */
 import type { ImgHTMLAttributes } from 'react'
-import type { EmbeddedChatbotContextValue } from '../context'
+import type { EmbeddedChatbotContextValue } from '../../context'
 import type { AppData } from '@/models/share'
 import type { SystemFeatures } from '@/types/feature'
 import { render, screen, waitFor } from '@testing-library/react'
@@ -8,10 +8,10 @@ import userEvent from '@testing-library/user-event'
 import { vi } from 'vitest'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { InstallationScope, LicenseStatus } from '@/types/feature'
-import { useEmbeddedChatbotContext } from '../context'
-import Header from './index'
+import { useEmbeddedChatbotContext } from '../../context'
+import Header from '../index'
 
-vi.mock('../context', () => ({
+vi.mock('../../context', () => ({
   useEmbeddedChatbotContext: vi.fn(),
 }))
 

web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/content.spec.tsx

@@ -2,10 +2,10 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { InputVarType } from '@/app/components/workflow/types'
-import { useEmbeddedChatbotContext } from '../context'
-import InputsFormContent from './content'
+import { useEmbeddedChatbotContext } from '../../context'
+import InputsFormContent from '../content'
 
-vi.mock('../context', () => ({
+vi.mock('../../context', () => ({
   useEmbeddedChatbotContext: vi.fn(),
 }))
 

web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/index.spec.tsx

@@ -2,15 +2,15 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { AppSourceType } from '@/service/share'
-import { useEmbeddedChatbotContext } from '../context'
-import InputsFormNode from './index'
+import { useEmbeddedChatbotContext } from '../../context'
+import InputsFormNode from '../index'
 
-vi.mock('../context', () => ({
+vi.mock('../../context', () => ({
   useEmbeddedChatbotContext: vi.fn(),
 }))
 
 // Mock InputsFormContent to avoid complex integration in this test
-vi.mock('./content', () => ({
+vi.mock('../content', () => ({
   default: () => <div data-testid="mock-inputs-form-content" />,
 }))
 

web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/view-form-dropdown.spec.tsx

@@ -1,9 +1,9 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import ViewFormDropdown from './view-form-dropdown'
+import ViewFormDropdown from '../view-form-dropdown'
 
 // Mock InputsFormContent to avoid complex integration in this test
-vi.mock('./content', () => ({
+vi.mock('../content', () => ({
   default: () => <div data-testid="mock-inputs-form-content" />,
 }))
 

web/app/components/base/checkbox-list/__tests__/index.spec.tsx

@@ -2,7 +2,7 @@
 import type { ImgHTMLAttributes } from 'react'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import CheckboxList from '.'
+import CheckboxList from '..'
 
 vi.mock('next/image', () => ({
   default: (props: ImgHTMLAttributes<HTMLImageElement>) => <img {...props} />,

web/app/components/base/checkbox/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import Checkbox from './index'
+import Checkbox from '../index'
 
 describe('Checkbox Component', () => {
   const mockProps = {

web/app/components/base/checkbox/assets/__tests__/indeterminate-icon.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import IndeterminateIcon from './indeterminate-icon'
+import IndeterminateIcon from '../indeterminate-icon'
 
 describe('IndeterminateIcon', () => {
   describe('Rendering', () => {

web/app/components/base/chip/__tests__/index.spec.tsx

@@ -1,7 +1,7 @@
-import type { Item } from './index'
+import type { Item } from '../index'
 import { cleanup, fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
-import Chip from './index'
+import Chip from '../index'
 
 afterEach(cleanup)
 

web/app/components/base/confirm/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import { act, fireEvent, render, screen } from '@testing-library/react'
-import Confirm from '.'
+import Confirm from '..'
 
 vi.mock('react-dom', async () => {
   const actual = await vi.importActual<typeof import('react-dom')>('react-dom')

web/app/components/base/content-dialog/__tests__/index.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import ContentDialog from './index'
+import ContentDialog from '../index'
 
 describe('ContentDialog', () => {
   it('renders children when show is true', async () => {

web/app/components/base/copy-feedback/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import CopyFeedback, { CopyFeedbackNew } from '.'
+import CopyFeedback, { CopyFeedbackNew } from '..'
 
 const mockCopy = vi.fn()
 const mockReset = vi.fn()

web/app/components/base/copy-icon/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render } from '@testing-library/react'
-import CopyIcon from '.'
+import CopyIcon from '..'
 
 const copy = vi.fn()
 const reset = vi.fn()

web/app/components/base/corner-label/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import CornerLabel from '.'
+import CornerLabel from '..'
 
 describe('CornerLabel', () => {
   it('renders the label correctly', () => {

web/app/components/base/date-and-time-picker/__tests__/hooks.spec.ts

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react'
-import { useDaysOfWeek, useMonths, useTimeOptions, useYearOptions } from './hooks'
-import { Period } from './types'
-import dayjs from './utils/dayjs'
+import { useDaysOfWeek, useMonths, useTimeOptions, useYearOptions } from '../hooks'
+import { Period } from '../types'
+import dayjs from '../utils/dayjs'
 
 describe('date-and-time-picker hooks', () => {
   // Tests for useDaysOfWeek hook

web/app/components/base/date-and-time-picker/calendar/__tests__/days-of-week.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import { DaysOfWeek } from './days-of-week'
+import { DaysOfWeek } from '../days-of-week'
 
 describe('DaysOfWeek', () => {
   // Rendering test

web/app/components/base/date-and-time-picker/calendar/__tests__/index.spec.tsx

@@ -1,7 +1,7 @@
-import type { CalendarProps, Day } from '../types'
+import type { CalendarProps, Day } from '../../types'
 import { fireEvent, render, screen } from '@testing-library/react'
-import dayjs from '../utils/dayjs'
-import Calendar from './index'
+import dayjs from '../../utils/dayjs'
+import Calendar from '../index'
 
 // Mock scrollIntoView since jsdom doesn't implement it
 beforeAll(() => {

web/app/components/base/date-and-time-picker/calendar/__tests__/item.spec.tsx

@@ -1,7 +1,7 @@
-import type { CalendarItemProps, Day } from '../types'
+import type { CalendarItemProps, Day } from '../../types'
 import { fireEvent, render, screen } from '@testing-library/react'
-import dayjs from '../utils/dayjs'
-import Item from './item'
+import dayjs from '../../utils/dayjs'
+import Item from '../item'
 
 const createMockDay = (overrides: Partial<Day> = {}): Day => ({
   date: dayjs('2024-06-15'),

web/app/components/base/date-and-time-picker/common/__tests__/option-list-item.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import OptionListItem from './option-list-item'
+import OptionListItem from '../option-list-item'
 
 describe('OptionListItem', () => {
   let originalScrollIntoView: Element['scrollIntoView']

web/app/components/base/date-and-time-picker/date-picker/__tests__/footer.spec.tsx

@@ -1,7 +1,7 @@
-import type { DatePickerFooterProps } from '../types'
+import type { DatePickerFooterProps } from '../../types'
 import { fireEvent, render, screen } from '@testing-library/react'
-import { ViewType } from '../types'
-import Footer from './footer'
+import { ViewType } from '../../types'
+import Footer from '../footer'
 
 // Factory for Footer props
 const createFooterProps = (overrides: Partial<DatePickerFooterProps> = {}): DatePickerFooterProps => ({

web/app/components/base/date-and-time-picker/date-picker/__tests__/header.spec.tsx

@@ -1,7 +1,7 @@
-import type { DatePickerHeaderProps } from '../types'
+import type { DatePickerHeaderProps } from '../../types'
 import { fireEvent, render, screen } from '@testing-library/react'
-import dayjs from '../utils/dayjs'
-import Header from './header'
+import dayjs from '../../utils/dayjs'
+import Header from '../header'
 
 // Factory for Header props
 const createHeaderProps = (overrides: Partial<DatePickerHeaderProps> = {}): DatePickerHeaderProps => ({