iod/page-assist
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(components): 新增图标组件并优化历史记录功能

Browse Source 
- 新增 Bell、Collect 和 NotCollect 图标组件
- 优化 History 组件，添加隐藏 logo 功能
- 调整 Message 组件样式，移除不必要的代码
- 更新 Scene 组件 Header 颜色
- 注释掉 tailwind.css 中的 arimo 字体权重
This commit is contained in:
zhaoweijie
2025-08-23 20:11:11 +08:00
parent e640b1254d
commit e0e41d7e21
24 changed files with 331 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/Common/Playground/History.tsx
View File

@@ -1,12 +1,11 @@
import { Sidebar } from "@/components/Option/Sidebar.tsx"
import React, { useContext, useMemo, useState } from "react"
import React, { useContext, useMemo } from "react"
import { useMessageOption } from "@/hooks/useMessageOption.tsx"
import { useStoreChatModelSettings } from "@/store/model.tsx"
import {
Button,
Card,
Divider,
List,
Menu,
MenuProps,
Popover,
@@ -22,8 +21,7 @@ import { PlusOutlined, RightOutlined } from "@ant-design/icons"
import { qaPrompt } from "@/libs/playground.tsx"
import { ProviderIcons } from "@/components/Common/ProviderIcon.tsx"
import { fetchChatModels } from "@/services/ollama.ts"
import logo from '@/assets/logo.png'
import logo from "@/assets/logo.png"
const ModelIcon = () => {
return (
@@ -74,10 +72,14 @@ export const PlaygroundHistory = () => {
children: qaPrompt.map((item) => {
return {
key: item.id,
label: <div className="flex items-center gap-2">
<p className="w-5 h-5 [&_.ant-avatar]:!w-full [&_.ant-avatar]:!h-full [&_.ant-avatar]:relative [&_.ant-avatar]:-top-3">{item.icon}</p>
<span title={item.title}>{item.title}</span>
</div>,
label: (
<div className="flex items-center gap-2">
<p className="w-5 h-5 [&_.ant-avatar]:!w-full [&_.ant-avatar]:!h-full [&_.ant-avatar]:relative [&_.ant-avatar]:-top-3">
{item.icon}
</p>
<span title={item.title}>{item.title}</span>
</div>
)
}
})
}
@@ -101,25 +103,26 @@ export const PlaygroundHistory = () => {
}
// 大模型
const {
data: models,
isLoading: isModelsLoading,
refetch
} = useQuery({
const { data: models, isLoading: isModelsLoading } = useQuery({
queryKey: ["fetchModel"],
queryFn: () => fetchChatModels({ returnEmpty: true }),
refetchIntervalInBackground: false,
placeholderData: (prev) => prev
})
// 是否隐藏logo
const hideLogo = useMemo(() => {
return localStorage.getItem("hideLogo") === "true"
}, [])
return (
<Card
className={`flex flex-col [&_.ant-card-body]:h-full w-[300px] overflow-hidden h-full pb-5 transition-all duration-300 ease-in-out !bg-[#f3f4f6]`}
className={`flex flex-col [&_.ant-card-body]:h-full w-[300px] overflow-hidden h-full pb-5 transition-all duration-300 ease-in-out backdrop-blur-lg !bg-[#f3f4f6]`}
style={{ width: show ? "300px" : "0" }}>
{/*Header*/}
<div className="flex flex-col overflow-y-hidden h-full">
<div className="flex items-center justify-between transition-all duration-300 ease-in-out w-[250px]">
<img src={logo} alt="logo" className="w-8" />
{!hideLogo && <img src={logo} alt="logo" className="w-8" />}
<h2 className="text-xl font-bold text-zinc-700 dark:text-zinc-300 mr-3">
<span className="text-[#d30100]">数联网</span>科创智能体
</h2>

2
src/components/Common/Playground/IodRelevant.tsx
View File

@@ -350,7 +350,7 @@ export const PlaygroundIodRelevant: React.FC<Props> = ({ className }) => {
<Card
hoverable
variant="outlined"
className={`${className} translate-y-[-2px] !bg-[#d0e6ff] shadow-[#d0e6ff]/30`}>
className={`${className} translate-y-[-2px] !bg-[#d0e6ff] !shadow-md`}>
<div className="h-full flex flex-col relative">
{/* 花瓣效果 */}
<div

98
src/components/Common/Playground/Message.tsx
View File

@@ -63,22 +63,7 @@ export const PlaygroundMessage = (props: Props) => {
{/* <div className="text-base md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full"> */}
<div
className={`flex flex-row gap-1 md:gap-1 my-2 m-auto w-full ${props.isBot ? "" : "flex-row-reverse"}`}>
<div className="w-8 flex flex-col relative items-center justify-center bottom-[8px]">
<div className="relative h-7 w-7 p-1 rounded-sm text-white flex items-center justify-center text-opacity-100r">
{props.isBot ? (
!props.botAvatar ? (
<div className="absolute h-8 w-8 rounded-full bg-gradient-to-r from-green-300 to-purple-400 hidden"></div>
) : (
props.botAvatar
)
) : !props.userAvatar ? (
<div className="absolute h-8 w-8 rounded-full from-blue-400 to-blue-600 bg-gradient-to-r"></div>
) : (
props.userAvatar
)}
</div>
</div>
<div className="flex w-[calc(100%-50px)] flex-col gap-2 lg:w-[calc(100%-115px)]">
<div className="flex flex-col gap-2">
<span className="text-xs font-bold text-gray-800 dark:text-white"></span>
{props.isBot &&
@@ -102,7 +87,7 @@ export const PlaygroundMessage = (props: Props) => {
return (
<Collapse
key={i}
defaultActiveKey={['reasoning']}
defaultActiveKey={["reasoning"]}
className="border-none !mb-3"
items={[
{
@@ -132,12 +117,18 @@ export const PlaygroundMessage = (props: Props) => {
})}
</>
) : (
// <p
// className={`bg-[#f1f3f4] font-normal text-[#000000d9] px-4 py-2.5 rounded-2xl prose-lg dark:prose-invert whitespace-pre-line prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark ${
// props.message_type && "italic dark:text-gray-400"
// } flex flex-row-reverse`}>
// {props.message}
// </p>
<p
className={`prose-lg dark:prose-invert whitespace-pre-line prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark ${
props.message_type && "italic dark:text-gray-400"
} flex flex-row-reverse`}>
className={`bg-[#2563eb] font-normal rounded-tr-none
text-white px-4 py-2.5 rounded-2xl prose-lg dark:prose-invert whitespace-pre-line prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark ${
props.message_type && "italic dark:text-gray-400"
} flex flex-row-reverse`}>
{props.message}
{/*<span className="bg-[#0000000a] inline-block py-[9px] text-[#000000d9] rounded-xl px-4 font-light text-sm">{props.message}</span>*/}
</p>
)
) : (
@@ -196,35 +187,42 @@ export const PlaygroundMessage = (props: Props) => {
]}
/>
)}
{props.isBot && props?.iodSources && Object.values(props?.iodSources).map(item => item.data).flat().length > 0 && (
<Collapse
className="mt-6"
ghost
// defaultActiveKey={['iod']}
items={[
{
key: "iod",
label: (
<div className="italic text-gray-500 dark:text-gray-400">
{t("iodCitations")}
</div>
),
children: (
<div className="mb-3 flex flex-wrap gap-2">
{Object.values(props?.iodSources).map(item => item.data).flat()?.map((source, index) => (
<MessageSource
onSourceClick={props.onSourceClick}
key={index}
index={index}
source={source}
/>
))}
</div>
)
}
]}
/>
)}
{props.isBot &&
props?.iodSources &&
Object.values(props?.iodSources)
.map((item) => item.data)
.flat().length > 0 && (
<Collapse
className="mt-6"
ghost
// defaultActiveKey={['iod']}
items={[
{
key: "iod",
label: (
<div className="italic text-gray-500 dark:text-gray-400">
{t("iodCitations")}
</div>
),
children: (
<div className="mb-3 flex flex-wrap gap-2">
{Object.values(props?.iodSources)
.map((item) => item.data)
.flat()
?.map((source, index) => (
<MessageSource
onSourceClick={props.onSourceClick}
key={index}
index={index}
source={source}
/>
))}
</div>
)
}
]}
/>
)}
{!props.isProcessing && !editMode ? (
<div
className={`space-x-2 gap-2 flex ${

4
src/components/Common/Playground/Scene.tsx
View File

@@ -36,7 +36,7 @@ type HeaderProps = {
const Header: React.FC<HeaderProps> = ({ title, showButton = true, onClick }) => (
<DataNavigation
Header={
<div className="flex items-center text-[#54c41d] gap-1">
<div className="flex items-center text-[#4ab01a] gap-1">
<svg
className="icon"
viewBox="0 0 1025 1024"
@@ -47,7 +47,7 @@ const Header: React.FC<HeaderProps> = ({ title, showButton = true, onClick }) =>
height="18">
<path
d="M980.34571 1.143792c-4.850903 0-9.824354 0.888481-14.797806 2.930966L229.773215 299.724504H20.428686c-11.233669 0-20.424853 9.446494-20.424853 21.180572V702.584302c0 11.74429 9.191184 21.180572 20.424853 21.180573h129.820365c-4.728353 14.808018-7.271248 30.51473-7.271248 46.46654 0 84.119757 68.678568 152.543014 153.176184 152.543014 70.721053 0 130.330986-47.998404 147.93721-112.847312l521.569043 209.59984c4.983664 1.919936 9.957116 2.930966 14.808019 2.930967 21.568645 0 40.839493-18.127057 40.839493-42.371358V43.525362C1021.195415 19.270849 1002.047116 1.143792 980.34571 1.143792zM296.153987 831.250663c-33.833769 0-61.274559-27.308028-61.274558-61.009035 0-14.297397 4.983664-27.951411 14.042086-38.807221l108.374269 43.525362c-2.553107 31.403211-28.972654 56.290895-61.141797 56.290894z m633.12959 74.550713L263.984844 638.501326l-16.462431-6.638077H91.915671V391.626129h155.606742l16.462431-6.638077 665.298733-267.30005v788.113374z m0 0"
fill="#54c41d"
fill="#4ab01a"
p-id="6236"></path>
</svg>
{title}