feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/common/chat-area/chat-uikit/__tests__/hooks/use-observe-card-container.test.tsx

@@ -0,0 +1,80 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import mitt from 'mitt';
+import {
+  renderHook,
+  type WrapperComponent,
+} from '@testing-library/react-hooks';
+import {
+  UIKitEvents,
+  UIKitEventContext,
+  type UIKitEventMap,
+} from '@coze-common/chat-uikit-shared';
+
+import { useObserveCardContainer } from '../../src/hooks/use-observe-card-container';
+
+const disconnectFn = vi.fn();
+const initFn = vi.fn();
+const observeFn = vi.fn();
+
+const ResizeObserverMock = vi.fn((fn: any) => {
+  initFn();
+  fn();
+
+  return {
+    disconnect: disconnectFn,
+    observe: observeFn,
+    takeRecords: vi.fn(),
+    unobserve: vi.fn(),
+  };
+});
+
+vi.stubGlobal('ResizeObserver', ResizeObserverMock);
+vi.useFakeTimers();
+
+describe('use-observe-card', () => {
+  it('should call correctly', () => {
+    const eventCenter = mitt<UIKitEventMap>();
+    const onResize = vi.fn();
+    const wrapper: WrapperComponent<{
+      children: any;
+    }> = ({ children }) => (
+      <UIKitEventContext.Provider value={eventCenter}>
+        {children}
+      </UIKitEventContext.Provider>
+    );
+
+    renderHook(
+      () =>
+        useObserveCardContainer({
+          messageId: '123',
+          onResize,
+          cardContainerRef: { current: 12313 } as any,
+        }),
+      {
+        wrapper,
+      },
+    );
+    eventCenter.emit(UIKitEvents.AFTER_CARD_RENDER, { messageId: '123' });
+    vi.runAllTimers();
+    expect(observeFn).toHaveBeenCalledOnce();
+
+    expect(onResize).toHaveBeenCalledOnce();
+    expect(disconnectFn).toHaveBeenCalledOnce();
+    expect(initFn).toHaveBeenCalledOnce();
+  });
+});

frontend/packages/common/chat-area/chat-uikit/__tests__/utils/file-name.test.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { it, expect } from 'vitest';
+
+import { getFileExtensionAndName } from '../../src/utils/file-name';
+
+it('should get file extension by xxx.extension case', () => {
+  const fileName = '《史蒂夫·乔布斯传》官方正式中文版电子书.pdf';
+  const { nameWithoutExtension, extension } = getFileExtensionAndName(fileName);
+  expect(extension).toBe('.pdf');
+  expect(nameWithoutExtension).toBe('《史蒂夫·乔布斯传》官方正式中文版电子书');
+});
+
+it('not get file extension by xxx case', () => {
+  const fileName = 'Visual Studio Code';
+  const { nameWithoutExtension, extension } = getFileExtensionAndName(fileName);
+  expect(extension).toBe('');
+  expect(nameWithoutExtension).toBe('Visual Studio Code');
+});

frontend/packages/common/chat-area/chat-uikit/__tests__/utils/get-image-display-attribute.test.ts

@@ -0,0 +1,77 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { getImageDisplayAttribute } from '../../src/utils/image/get-image-display-attribute';
+
+// 测试套件
+describe('getImageDisplayAttribute', () => {
+  // 测试用例：长横图
+  it('should return cover attributes for a wide image', () => {
+    const contentWidth = 500;
+    const result = getImageDisplayAttribute(600, 100, contentWidth);
+    expect(result).toEqual({
+      displayHeight: 120,
+      displayWidth: contentWidth,
+      isCover: true,
+    });
+  });
+
+  // 测试用例：长竖图
+  it('should return cover attributes for a tall image', () => {
+    const contentWidth = 500;
+    const result = getImageDisplayAttribute(100, 600, contentWidth);
+    expect(result).toEqual({
+      displayHeight: 240,
+      displayWidth: 120,
+      isCover: true,
+    });
+  });
+
+  // 测试用例：等比展示图
+  it('should return proportional attributes for an image', () => {
+    const contentWidth = 500;
+    const result = getImageDisplayAttribute(240, 240, contentWidth);
+    expect(result).toEqual({
+      displayHeight: 240,
+      displayWidth: 240,
+      isCover: false,
+    });
+  });
+
+  // 测试用例：中长横图
+  it('should return proportional attributes for a medium-wide image', () => {
+    const contentWidth = 500;
+    const result = getImageDisplayAttribute(500, 250, contentWidth);
+    expect(result).toEqual({
+      displayWidth: 480,
+      displayHeight: 240,
+      isCover: false,
+    });
+  });
+
+  // 测试用例：小尺寸图
+  it('should return actual dimensions for a small image', () => {
+    const contentWidth = 500;
+    const result = getImageDisplayAttribute(200, 150, contentWidth);
+    expect(result).toEqual({
+      displayHeight: 150,
+      displayWidth: 200,
+      isCover: false,
+    });
+  });
+
+  // ...更多测试用例
+});