chore: replace all cn comments of fe to en version by volc api (#320)
This commit is contained in:
tecvan
GitHub
@@ -206,7 +206,7 @@ const FileCard: FC<IFileCardProps> = props => {
|
||||
<div
|
||||
// chat-uikit-file-card__progress-wrap
|
||||
className={classNames(
|
||||
// TODO: ui 补充进度条颜色
|
||||
// TODO: ui supplement progress bar color
|
||||
'coz-fg-hglt-dim absolute top-0 left-0 w-[280px] h-[72px]',
|
||||
'chat-uikit-file-card-progress-animation',
|
||||
)}
|
||||
|
||||
@@ -24,27 +24,27 @@ import {
|
||||
export interface IFileCardProps {
|
||||
file: IFileInfo;
|
||||
/**
|
||||
* 用于识别成功 / 失败状态的key
|
||||
* Key used to identify success/failure status
|
||||
*/
|
||||
attributeKeys: IFileAttributeKeys;
|
||||
/**
|
||||
* 文案配置
|
||||
* copywriting configuration
|
||||
*/
|
||||
tooltipsCopywriting?: IFileCardTooltipsCopyWritingConfig;
|
||||
/**
|
||||
* 是否只读
|
||||
* Is it read-only?
|
||||
*/
|
||||
readonly?: boolean;
|
||||
/**
|
||||
* 取消上传事件回调
|
||||
* Cancel upload event callback
|
||||
*/
|
||||
onCancel: () => void;
|
||||
/**
|
||||
* 重试上传事件回调
|
||||
* Retry upload event callback
|
||||
*/
|
||||
onRetry: () => void;
|
||||
/**
|
||||
* 拷贝url事件回调
|
||||
* Copy URL event callback
|
||||
*/
|
||||
onCopy: () => void;
|
||||
className?: string;
|
||||
|
||||
@@ -57,7 +57,7 @@ export const FileContent: FC<IProps> = props => {
|
||||
const { content_obj = safeJSONParse(message.content) } = message;
|
||||
|
||||
/**
|
||||
* 判断是否为文件类型的卡片 或者 没有配置file属性config则拒绝使用该卡片
|
||||
* Determine whether it is a card of file type, or refuse to use the card without configuring the file attribute config
|
||||
*/
|
||||
if (
|
||||
!isFile(content_obj) ||
|
||||
@@ -68,21 +68,21 @@ export const FileContent: FC<IProps> = props => {
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理点击取消上传的事件
|
||||
* Handle the event of clicking Cancel Upload
|
||||
*/
|
||||
const handleCancel = () => {
|
||||
onCancel?.({ message, extra: {} });
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理重试上传的事件
|
||||
* Handling events that retry uploads
|
||||
*/
|
||||
const handleRetry = () => {
|
||||
onRetry?.({ message, extra: {} });
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理拷贝文件地址的事件
|
||||
* Handling events that copy file addresses
|
||||
*/
|
||||
const handleCopy = (fileIndex?: number) => {
|
||||
onCopy?.({ message, extra: { fileIndex } });
|
||||
|
||||
@@ -44,7 +44,7 @@ export interface ContentBoxEvents {
|
||||
}
|
||||
|
||||
export interface BaseContentBoxProps {
|
||||
/** 是否在浏览器视窗内，true：在，false：不在，undefined：未检测 */
|
||||
/** Whether in the browser window, true: in, false: not, undefined: not detected */
|
||||
inView?: boolean;
|
||||
contentBoxEvents?: ContentBoxEvents;
|
||||
}
|
||||
|
||||
@@ -56,21 +56,21 @@ export const FileItemList: FC<FileItemListProps> = ({
|
||||
showBackground,
|
||||
}) => {
|
||||
/**
|
||||
* 处理点击取消上传的事件
|
||||
* Handle the event of clicking Cancel Upload
|
||||
*/
|
||||
const handleCancel = () => {
|
||||
onCancel?.({ message, extra: {} });
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理重试上传的事件
|
||||
* Handling events that retry uploads
|
||||
*/
|
||||
const handleRetry = () => {
|
||||
onRetry?.({ message, extra: {} });
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理拷贝文件地址的事件
|
||||
* Handling events that copy file addresses
|
||||
*/
|
||||
const handleCopy = () => {
|
||||
onCopy?.({ message, extra: {} });
|
||||
|
||||
@@ -60,7 +60,7 @@ export const ImageItemList: FC<ImageItemListProps> = ({
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
// 这里借用了 messageBoxInner 的样式风格
|
||||
// Here we borrow the style of messageBoxInner
|
||||
className={typeSafeMessageBoxInnerVariants({
|
||||
color: 'whiteness',
|
||||
border: null,
|
||||
|
||||
@@ -45,10 +45,10 @@ export type MultimodalContentProps = IImageMessageContentProps &
|
||||
};
|
||||
|
||||
/**
|
||||
* 这个组件并不单纯 实际上并不应该叫 Content
|
||||
* This component is not simple and should not actually be called Content.
|
||||
*/
|
||||
|
||||
// TODO: @liushuoyan 提供开关啊～～
|
||||
// TODO: @liushuoyan provides the switch~~
|
||||
export const MultimodalContent: React.FC<MultimodalContentProps> = ({
|
||||
renderTextContentAddonTop,
|
||||
message,
|
||||
@@ -66,7 +66,7 @@ export const MultimodalContent: React.FC<MultimodalContentProps> = ({
|
||||
}) => {
|
||||
const { content_obj } = message;
|
||||
if (!isMultimodalContentListLike(content_obj)) {
|
||||
// TODO: broke 的消息应该需要加一个统一的兜底和上报
|
||||
// TODO: Broke news should need to add a unified bottom line and report
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
@@ -53,8 +53,8 @@ export const TextItemList: FC<TextItemListProps> = ({
|
||||
|
||||
return (
|
||||
/**
|
||||
* TODO: 由于目前设计不支持一条 message 渲染多个 content 这里需要借用一下发送消息的文字气泡背景色
|
||||
* 目前只有用户才能发送 multimodal 消息
|
||||
* TODO: Since the current design does not support one message to render multiple content, you need to borrow the text bubble background color of the sent message.
|
||||
* Currently only users can send multimodal messages
|
||||
*/
|
||||
<div
|
||||
className={typeSafeMessageBoxInnerVariants({
|
||||
|
||||
@@ -61,7 +61,7 @@ const getMentionBotContent = ({
|
||||
mentioned,
|
||||
getBotInfo,
|
||||
}: IPlainTextMessageContentProps) => {
|
||||
// 接口真不一定返回了 mention_list
|
||||
// The interface does not necessarily return mention_list
|
||||
if (!mentioned) {
|
||||
return '';
|
||||
}
|
||||
|
||||
@@ -64,7 +64,7 @@ export const SingleImageContentWithAutoSize: FC<
|
||||
Boolean(sth && 'image_list' in { ...sth }),
|
||||
}),
|
||||
} = message;
|
||||
// 类型守卫，一般情况也不影响hooks的顺序问题
|
||||
// Type guards generally do not affect the order of hooks
|
||||
if (!isImage(content_obj)) {
|
||||
return null;
|
||||
}
|
||||
@@ -74,10 +74,10 @@ export const SingleImageContentWithAutoSize: FC<
|
||||
};
|
||||
|
||||
/**
|
||||
* 这里这么做是有原因的
|
||||
* 前端计算groupId是通过replyId分组（服务端未ack前是localMessageId）
|
||||
* 因此服务端ack后会导致循环的key发生变化，导致组件unmount -> mount（销毁重建）
|
||||
* 因此需要用比较trick的方式来实现图片展示优化的问题
|
||||
* There's a reason for this.
|
||||
* The front-end compute groupId is grouped by replyId (localMessageId before server level is not ack)
|
||||
* Therefore, after the server level ack, the key of the loop will change, causing the component to unmount - > mount (destroy and rebuild).
|
||||
* Therefore, it is necessary to use a more trick way to achieve the problem of picture display optimization
|
||||
*/
|
||||
const blobImageMap: IBlobImageMap = {};
|
||||
const isBlob = (url: string) => url?.startsWith('blob:');
|
||||
@@ -89,7 +89,7 @@ const SingleImageContentWithAutoSizeImpl: FC<
|
||||
const { imageAutoSizeContainerWidth = 0 } = useUiKitMessageBoxContext();
|
||||
const localMessageId = message.extra_info.local_message_id;
|
||||
|
||||
// 目前服务端下发的图片 ori = thumb 因此目前用一个就行
|
||||
// The picture sent by the current server level ori = thumb, so just use one for now.
|
||||
const currentImageUrl = content_obj?.image_list?.at(0)?.image_ori?.url ?? '';
|
||||
|
||||
const { displayHeight, displayWidth, isCover } = getImageDisplayAttribute(
|
||||
|
||||
@@ -26,26 +26,26 @@ import './index.less';
|
||||
type IBlobImageMap = Record<string, string>;
|
||||
|
||||
/**
|
||||
* 这里这么做是有原因的
|
||||
* 前端计算groupId是通过replyId分组（服务端未ack前是localMessageId）
|
||||
* 因此服务端ack后会导致循环的key发生变化，导致组件unmount -> mount（销毁重建）
|
||||
* 因此需要用比较trick的方式来实现图片展示优化的问题
|
||||
* There's a reason for this.
|
||||
* The front-end compute groupId is grouped by replyId (localMessageId before server level is not ack)
|
||||
* Therefore, after the server level ack, the key of the loop will change, causing the component to unmount - > mount (destroy and rebuild).
|
||||
* Therefore, it is necessary to use a more trick way to achieve the problem of picture display optimization
|
||||
*/
|
||||
const blobImageMap: IBlobImageMap = {};
|
||||
const isBlob = (url: string) => url?.startsWith('blob:');
|
||||
|
||||
/**
|
||||
* @deprecated 废弃不再维护，请尽快迁移至 SingleImageContentWithAutoSize 组件
|
||||
* @Deprecated is no longer maintained, please migrate to SingleImageContentWithAutoSize component as soon as possible
|
||||
*/
|
||||
export const SingleImageContent: FC<IImageMessageContentProps> = props => {
|
||||
const { message, onImageClick } = props;
|
||||
|
||||
// @liushuoyan 这里类型大溃败，引入了 any
|
||||
// @Liushuoyan here type rout, introduced any
|
||||
const { content_obj = safeJSONParse(message.content) } = message;
|
||||
|
||||
const localMessageId = message.extra_info.local_message_id;
|
||||
|
||||
// 目前服务端下发的图片 ori = thumb 因此目前用一个就行
|
||||
// The picture sent by the current server level ori = thumb, so just use one for now.
|
||||
const currentImageUrl = content_obj?.image_list?.at(0)?.image_ori?.url ?? '';
|
||||
|
||||
if (isBlob(currentImageUrl)) {
|
||||
|
||||
@@ -42,7 +42,7 @@ export const SingleImageContentUI: React.FC<SingleImageContentUIProps> = ({
|
||||
src={thumbUrl || EmptyImage}
|
||||
className="chat-uikit-single-image-content__image"
|
||||
/**
|
||||
* 这里不采用 semi Image 组件自带的 preview 功能。传入的 onImageClick 回调中有副作用会拉起 preview 组件
|
||||
* The preview function that comes with the semi Image component is not used here. There are side effects in the incoming onImageClick callback that will pull the preview component
|
||||
*/
|
||||
preview={false}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user