Skip to content

Commit 7645b3e

Browse files
ayangwebayangweb
authored
feat: add AI summary component (#518)
* feat: add AI summary component * docs: update changelog * refactor: update
1 parent ac21074 commit 7645b3e

6 files changed

Lines changed: 110 additions & 12 deletions

File tree

‎docs/content.en/docs/release-notes/_index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ Information about release notes of Coco Server is provided here.
2424
- feat: the search input box supports multi-line input #501
2525
- feat: websocket support self-signed TLS #504
2626
- feat: add option to allow self-signed certificates #509
27+
- feat: add AI summary component #518
2728

2829
### 🐛 Bug fix
2930

‎src/components/Common/Icons/AiSummaryIcon.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { FC } from "react";
2+
3+
interface AiSummaryIconProps {
4+
size?: number;
5+
color?: string;
6+
}
7+
8+
const AiSummaryIcon: FC<AiSummaryIconProps> = (props) => {
9+
const { size = 16, color } = props;
10+
11+
return (
12+
<svg
13+
width={size}
14+
height={size}
15+
viewBox="0 0 16 16"
16+
version="1.1"
17+
xmlns="http://www.w3.org/2000/svg"
18+
xmlnsXlink="http://www.w3.org/1999/xlink"
19+
>
20+
<title>编组 3</title>
21+
<g
22+
id="AI-搜索"
23+
stroke="none"
24+
stroke-width="1"
25+
fill="none"
26+
fill-rule="evenodd"
27+
>
28+
<g id="ai--总结-回答2" transform="translate(-15, -63)">
29+
<g id="编组-3" transform="translate(15, 63)">
30+
<g
31+
id="aimofabang"
32+
transform="translate(1, 0)"
33+
fill={color}
34+
fill-rule="nonzero"
35+
>
36+
<path
37+
d="M3.08348835,0.285085421 C3.00233182,-0.0950284736 2.440033,-0.0950284736 2.35887647,0.285085421 C2.18061805,1.12428797 1.50051915,1.78010315 0.630242361,1.95199665 C0.236053497,2.03025539 0.236053497,2.57359466 0.630242361,2.65073542 C1.49977662,2.82290466 2.18149148,3.47916012 2.35887647,4.31876463 C2.440033,4.69887852 3.0034912,4.69887852 3.08348835,4.31876463 C3.26150444,3.47881148 3.94222666,2.82239524 4.81328184,2.65073542 C5.20747071,2.57247668 5.20747071,2.03025539 4.81328184,1.95199665 C3.94288543,1.78066611 3.26233034,1.12529073 3.08348835,0.286203403 L3.08348835,0.285085421 Z M11.9295502,2.98277609 C11.326033,2.40089874 10.347638,2.40089874 9.74412078,2.98277609 L8.37953169,4.30087692 L8.35054721,4.32882647 L10.5359766,6.4373406 L10.5649611,6.40827307 L11.931869,5.09129022 C12.5347461,4.50993956 12.5347461,3.56524473 11.931869,2.98277609 L11.9295502,2.98277609 Z M9.71513631,7.2277539 L7.52854749,5.11923977 L0.452857372,11.9422842 C-0.150952457,12.5245343 -0.150952457,13.4685482 0.452857372,14.0507983 C1.0566672,14.6330484 2.03563636,14.6330484 2.63944619,14.0507983 L9.71513631,7.2277539 Z M11.5875334,10.9808196 C11.5933303,10.957342 11.6281117,10.957342 11.6339086,10.9808196 C11.8982395,12.228618 12.9092096,13.2039302 14.2030925,13.4593858 C14.2285988,13.4649757 14.2285988,13.4985152 14.2030925,13.5041051 C12.9095391,13.7593961 11.8986526,14.7341878 11.6339086,15.9815533 C11.6281117,16.0061489 11.5933303,16.0061489 11.5875334,15.9815533 C11.3226187,14.73387 10.3111924,13.7589978 9.01719014,13.5041051 C8.99284318,13.4985152 8.99284318,13.4649757 9.01719014,13.4593858 C10.3115219,13.2043286 11.3230319,12.2289358 11.5875334,10.9808196 L11.5875334,10.9808196 Z"
38+
id="形状"
39+
></path>
40+
</g>
41+
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
42+
</g>
43+
</g>
44+
</g>
45+
</svg>
46+
);
47+
};
48+
49+
export default AiSummaryIcon;

‎src/components/Search/AiSummary.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { ChevronUp, Copy, SquareArrowOutUpRight, Volume2 } from "lucide-react";
2+
import { useState } from "react";
3+
import AiSummaryIcon from "../Common/Icons/AiSummaryIcon";
4+
import clsx from "clsx";
5+
import Markdown from "../ChatMessage/Markdown";
6+
7+
const AiSummary = () => {
8+
const [expand, setExpand] = useState(true);
9+
10+
return (
11+
<div className="flex flex-col gap-2 relative max-h-[210px] px-4 py-3 rounded-[4px] text-[#333] dark:text-[#D8D8D8] bg-white dark:bg-[#141414] shadow-[0_4px_8px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_20px_rgba(255,255,255,0.2)]">
12+
<div
13+
className="absolute top-2 right-2 flex items-center justify-center size-[20px] border rounded-md cursor-pointer dark:border-[#282828]"
14+
onClick={() => {
15+
setExpand(!expand);
16+
}}
17+
>
18+
<ChevronUp className="size-4" />
19+
</div>
20+
21+
<div className="flex item-center gap-1">
22+
<AiSummaryIcon color="#881c94" />
23+
<span className="text-xs font-semibold">AI Summarize</span>
24+
</div>
25+
26+
<div
27+
className={clsx("flex-1 overflow-auto text-sm", {
28+
hidden: !expand,
29+
})}
30+
>
31+
<Markdown content={"AI Summarize"} />
32+
</div>
33+
34+
<div
35+
className={clsx("flex gap-3", {
36+
hidden: !expand,
37+
})}
38+
>
39+
<Copy className="size-3 cursor-pointer" />
40+
41+
<Volume2 className="size-3 cursor-pointer" />
42+
43+
<SquareArrowOutUpRight className="size-3 cursor-pointer" />
44+
</div>
45+
</div>
46+
);
47+
};
48+
49+
export default AiSummary;

‎src/components/Search/Calculator.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { ChevronsRight } from "lucide-react";
22
import { FC } from "react";
3-
import clsx from "clsx";
43
import { useTranslation } from "react-i18next";
54
import { copyToClipboard } from "@/utils";
65

@@ -10,7 +9,7 @@ interface CalculatorProps {
109
}
1110

1211
const Calculator: FC<CalculatorProps> = (props) => {
13-
const { item, isSelected } = props;
12+
const { item } = props;
1413
const {
1514
payload: { query, result },
1615
} = item;
@@ -31,12 +30,7 @@ const Calculator: FC<CalculatorProps> = (props) => {
3130

3231
return (
3332
<div
34-
className={clsx(
35-
"flex items-center gap-1 p-2 w-full rounded-lg transition",
36-
{
37-
"bg-[#EDEDED] dark:bg-[#202126]": isSelected,
38-
}
39-
)}
33+
className="flex items-center gap-1"
4034
onDoubleClick={() => {
4135
copyToClipboard(result.value);
4236
}}

‎src/components/Search/DropdownList.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ import VisibleKey from "@/components/Common/VisibleKey";
2222
import Calculator from "./Calculator";
2323
import { useShortcutsStore } from "@/stores/shortcutsStore";
2424
import ErrorSearch from "@/components/Common/ErrorNotification/ErrorSearch";
25+
// import AiSummary from "./AiSummary";
26+
import clsx from "clsx";
2527

2628
type ISearchData = Record<string, any[]>;
2729

@@ -276,6 +278,9 @@ function DropdownList({
276278
role="option"
277279
aria-selected={isSelected}
278280
id={`search-item-${currentIndex}`}
281+
className={clsx("p-2 transition rounded-lg", {
282+
"bg-[#EDEDED] dark:bg-[#202126]": isSelected,
283+
})}
279284
>
280285
<Calculator item={item} isSelected={isSelected} />
281286
</div>

‎src/components/Search/InputBox.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import VisibleKey from "@/components/Common/VisibleKey";
2222
import ConnectionError from "./ConnectionError";
2323
import SearchIcons from "./SearchIcons";
2424
import ChatIcons from "./ChatIcons";
25+
import AiSummaryIcon from "../Common/Icons/AiSummaryIcon";
2526

2627
interface ChatInputProps {
2728
onSend: (message: string) => void;
@@ -446,10 +447,9 @@ export default function ChatInput({
446447
) : null}
447448
</div>
448449
) : (
449-
<div
450-
data-tauri-drag-region
451-
className="w-28 flex gap-2 relative"
452-
></div>
450+
<div data-tauri-drag-region className="w-28 flex gap-2 relative">
451+
{/* <AiSummaryIcon color={"#881c94"} /> */}
452+
</div>
453453
)}
454454

455455
{isChatPage || hasModules?.length !== 2 ? null : (

0 commit comments

Comments
 (0)