90 lines
3.0 KiB
TypeScript
90 lines
3.0 KiB
TypeScript
/*
|
|
* 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 React from 'react';
|
|
|
|
import { type IntelligenceData } from '@coze-arch/idl/intelligence_api';
|
|
import { I18n } from '@coze-arch/i18n';
|
|
import { Typography } from '@coze-arch/coze-design';
|
|
import { formatDate, getFormatDateType } from '@coze-arch/bot-utils';
|
|
|
|
import { highlightService } from '../services/use-case-services/highlight-text.service';
|
|
|
|
interface IntelligenceItemProps {
|
|
intelligence: IntelligenceData;
|
|
searchValue: string;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export const IntelligenceItem: React.FC<IntelligenceItemProps> = ({
|
|
intelligence,
|
|
searchValue,
|
|
onClick,
|
|
}) => {
|
|
const { basic_info } = intelligence;
|
|
|
|
return (
|
|
<div
|
|
className="rounded-lg hover:coz-mg-secondary-hovered cursor-pointer h-[80px] box-border"
|
|
onClick={onClick}
|
|
>
|
|
<div className="flex items-center gap-[14px] px-3 h-full">
|
|
<img
|
|
src={basic_info?.icon_url}
|
|
className="flex-shrink-0 w-[52px] h-[52px] rounded-lg"
|
|
alt={basic_info?.name}
|
|
/>
|
|
<div className="w-full overflow-hidden flex flex-col gap-1 justify-center border-b-[0.6px] border-solid border-0 coz-stroke-primary pb-3 pt-2 h-full">
|
|
<div className="font-medium text-sm">
|
|
<Typography.Text className="text-[16px] !font-medium w-full">
|
|
{highlightService.highlightText(
|
|
basic_info?.name || '',
|
|
searchValue,
|
|
)}
|
|
</Typography.Text>
|
|
</div>
|
|
{basic_info?.description ? (
|
|
<div className="text-sm leading-4 coz-fg-secondary">
|
|
<Typography.Text
|
|
className="text-sm w-full"
|
|
ellipsis={{
|
|
rows: 1,
|
|
}}
|
|
>
|
|
{highlightService.highlightText(
|
|
basic_info?.description || '',
|
|
searchValue,
|
|
)}
|
|
</Typography.Text>
|
|
</div>
|
|
) : null}
|
|
<div className="text-xs coz-fg-secondary flex items-center gap-1">
|
|
<div className="text-xs coz-fg-secondary">
|
|
{I18n.t('bot_list_rank_tag_edited')}
|
|
</div>
|
|
<div className="text-xs coz-fg-secondary">
|
|
{formatDate(
|
|
Number(basic_info?.update_time),
|
|
getFormatDateType(Number(basic_info?.update_time)),
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|