539b467141
* feat: adding create bot functionality Signed-off-by: James <james@jan.ai> * update the temperature progress bar Signed-off-by: James <james@jan.ai> * WIP baselayout * Mapping plugins with available preferences * Added loader component * WIP working another screen * Cleanup types and avoid import one by one * Prepare bottom bar * Add css variables colors to enable user select the accent * Enable change accent color * Seperate css variable * Fix conflict * Add blank state of my model empty * Restyle explore models page * Enable user config left sidebar * Restyle my models page * WIP styling chat page * Restyling chat message * Fix conflict * Adde form preferences setting plugins * Fixed form bot info * Sidebar bot chat * Showing rightbar for both setting when user created bot * Fix style bot info * Using overflow auto intead of scroll * Remove script built UI from root package * Fix missig import * Resolve error linter * fix e2e tests Signed-off-by: James <james@jan.ai> --------- Signed-off-by: James <james@jan.ai> Co-authored-by: James <james@jan.ai>
73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
import Image from 'next/image'
|
|
import JanImage from '../../../containers/JanImage'
|
|
import { displayDate } from '@utils/datetime'
|
|
import Link from 'next/link'
|
|
|
|
type Props = {
|
|
avatarUrl?: string
|
|
senderName: string
|
|
text?: string
|
|
createdAt: number
|
|
imageUrls: string[]
|
|
}
|
|
|
|
const SimpleImageMessage: React.FC<Props> = ({
|
|
avatarUrl = '',
|
|
senderName,
|
|
imageUrls,
|
|
text,
|
|
createdAt,
|
|
}) => {
|
|
// TODO handle regenerate image case
|
|
return (
|
|
<div className="flex items-start gap-2">
|
|
<img
|
|
className="rounded-full"
|
|
src={avatarUrl}
|
|
width={32}
|
|
height={32}
|
|
alt=""
|
|
/>
|
|
<div className="flex flex-col gap-1">
|
|
<div className="flex items-baseline justify-start gap-1">
|
|
<div className="text-sm font-extrabold leading-[15.2px] text-[#1B1B1B]">
|
|
{senderName}
|
|
</div>
|
|
<div className="ml-2 text-xs font-medium leading-[13.2px] text-gray-400">
|
|
{displayDate(createdAt)}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-3">
|
|
<JanImage
|
|
imageUrl={imageUrls[0]}
|
|
className="aspect-square w-72 rounded-lg"
|
|
/>
|
|
<div className="flex w-full flex-row items-start justify-start gap-2">
|
|
<Link
|
|
href={imageUrls[0] || '#'}
|
|
target="_blank_"
|
|
className="flex items-center gap-1 rounded-xl bg-[#F3F4F6] px-2 py-1"
|
|
>
|
|
<Image src="icons/download.svg" width={16} height={16} alt="" />
|
|
<span className="text-sm leading-[20px] text-[#111928]">
|
|
Download
|
|
</span>
|
|
</Link>
|
|
<button
|
|
className="flex items-center gap-1 rounded-xl bg-[#F3F4F6] px-2 py-1"
|
|
// onClick={() => sendChatMessage()}
|
|
>
|
|
<Image src="icons/refresh.svg" width={16} height={16} alt="" />
|
|
<span className="text-sm leading-[20px] text-[#111928]">
|
|
Re-generate
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SimpleImageMessage
|