@stokelp/ui 2.106.0 → 2.106.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/chat/ChatScoreBreakdown.cjs +1 -1
- package/dist/components/chat/ChatScoreBreakdown.cjs.map +1 -1
- package/dist/components/chat/ChatScoreBreakdown.d.ts +1 -0
- package/dist/components/chat/ChatScoreBreakdown.js +66 -57
- package/dist/components/chat/ChatScoreBreakdown.js.map +1 -1
- package/dist/ui.css +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";const e=require("../text/Text.cjs");let t=require("@stokelp/styled-system/jsx"),n=require("react/jsx-runtime");var r=[`origin`,`temperature`,`cutting`,`cooking`,`treatment`,`label`,`packaging`];function i(e){return e>=70?`#3B6D11`:e>=40?`#854F0B`:`#A32D2D`}function a(e){return e>=70?`#639922`:e>=40?`#BA7517`:`#E24B4A`}var o=({percent:o,detail:s,labels:c})=>{let l=r.filter(e=>s[e]?.sim!=null),u=r.filter(e=>s[e]?.sim==null);return(0,n.jsxs)(t.Box,{bg:`white`,borderRadius:`radius-8`,p:`space-
|
|
1
|
+
"use client";const e=require("../text/Text.cjs");let t=require("@stokelp/styled-system/jsx"),n=require("react/jsx-runtime");var r=[`origin`,`temperature`,`cutting`,`cooking`,`treatment`,`label`,`packaging`];function i(e){return e>=70?`#3B6D11`:e>=40?`#854F0B`:`#A32D2D`}function a(e){return e>=70?`#639922`:e>=40?`#BA7517`:`#E24B4A`}var o=({percent:o,detail:s,labels:c})=>{let l=r.filter(e=>s[e]?.sim!=null),u=r.filter(e=>s[e]?.sim==null);return(0,n.jsxs)(t.Box,{bg:`white`,borderRadius:`radius-8`,p:`space-16`,minW:`220px`,maxW:`240px`,css:{"& *":{fontFamily:`inherit`}},children:[(0,n.jsxs)(t.HStack,{justify:`space-between`,alignItems:`baseline`,mb:`space-8`,children:[(0,n.jsx)(e.Text,{as:`span`,fontSize:`body.md`,fontWeight:`bold`,children:c.title}),(0,n.jsxs)(e.Text,{as:`span`,fontSize:`body.lg`,fontWeight:`medium`,style:{color:i(o)},children:[Math.round(o),` %`]})]}),(0,n.jsx)(t.Box,{h:`1px`,bg:`grey.100`,mb:`space-8`}),l.length>0&&(0,n.jsxs)(t.VStack,{alignItems:`stretch`,gap:`space-4`,mb:`space-8`,children:[(0,n.jsx)(e.Text,{as:`span`,fontSize:`body.sm`,fontWeight:`bold`,color:`grey.400`,children:c.compared}),l.map(r=>{let i=s[r].sim;return(0,n.jsxs)(t.HStack,{alignItems:`center`,gap:`space-8`,children:[(0,n.jsx)(e.Text,{as:`span`,fontSize:`body.sm`,color:`grey.500`,minW:`80px`,children:c.attributes[r]}),(0,n.jsx)(t.Box,{flex:`1`,h:`3px`,bg:`grey.100`,borderRadius:`full`,overflow:`hidden`,children:(0,n.jsx)(t.Box,{h:`100%`,borderRadius:`full`,style:{width:`${i}%`,background:a(i)}})}),(0,n.jsxs)(e.Text,{as:`span`,fontSize:`body.sm`,fontWeight:`medium`,minW:`40px`,textAlign:`right`,style:{color:a(i)},children:[Math.round(i),` %`]})]},r)})]}),l.length>0&&u.length>0&&(0,n.jsx)(t.Box,{h:`1px`,bg:`grey.100`,mb:`space-8`}),u.length>0&&(0,n.jsxs)(t.VStack,{alignItems:`stretch`,gap:`space-4`,children:[(0,n.jsx)(e.Text,{as:`span`,fontSize:`body.sm`,fontWeight:`bold`,color:`grey.400`,children:c.notSpecified}),(0,n.jsx)(t.HStack,{flexWrap:`wrap`,gap:`space-4`,children:u.map(t=>(0,n.jsx)(e.Text,{as:`span`,fontSize:`body.sm`,color:`grey.400`,border:`1px solid`,borderColor:`grey.100`,px:`space-8`,py:`2px`,borderRadius:`full`,children:c.attributes[t]},t))})]}),c.footer&&(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.Box,{h:`1px`,bg:`grey.100`,mt:`space-8`,mb:`space-8`}),(0,n.jsx)(e.Text,{as:`span`,fontSize:`body.sm`,color:`grey.400`,children:c.footer})]})]})};exports.ChatScoreBreakdown=o;
|
|
2
2
|
//# sourceMappingURL=ChatScoreBreakdown.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatScoreBreakdown.cjs","names":[],"sources":["../../../src/components/chat/ChatScoreBreakdown.tsx"],"sourcesContent":["import { Box, HStack, VStack } from '@stokelp/styled-system/jsx'\nimport { Text } from '~/components'\n\nexport type ScoreAttributeKey = 'origin' | 'temperature' | 'cutting' | 'cooking' | 'treatment' | 'label' | 'packaging'\n\nexport type ScoreAttributeDetail = {\n sim: number | null\n}\n\nexport type ChatScoreBreakdownLabels = {\n title: string\n compared: string\n notSpecified: string\n attributes: Record<ScoreAttributeKey, string>\n}\n\nexport type ChatScoreBreakdownProps = {\n percent: number\n detail: Record<ScoreAttributeKey, ScoreAttributeDetail>\n labels: ChatScoreBreakdownLabels\n}\n\nconst ATTRIBUTE_ORDER: ScoreAttributeKey[] = [\n 'origin',\n 'temperature',\n 'cutting',\n 'cooking',\n 'treatment',\n 'label',\n 'packaging',\n]\n\nfunction getHeadlineColor(percent: number): string {\n if (percent >= 70) return '#3B6D11'\n if (percent >= 40) return '#854F0B'\n return '#A32D2D'\n}\n\nfunction getBarColor(sim: number): string {\n if (sim >= 70) return '#639922'\n if (sim >= 40) return '#BA7517'\n return '#E24B4A'\n}\n\nexport const ChatScoreBreakdown = ({ percent, detail, labels }: ChatScoreBreakdownProps) => {\n const compared = ATTRIBUTE_ORDER.filter(key => detail[key]?.sim != null)\n const notSpecified = ATTRIBUTE_ORDER.filter(key => detail[key]?.sim == null)\n\n return (\n <Box
|
|
1
|
+
{"version":3,"file":"ChatScoreBreakdown.cjs","names":[],"sources":["../../../src/components/chat/ChatScoreBreakdown.tsx"],"sourcesContent":["import { Box, HStack, VStack } from '@stokelp/styled-system/jsx'\nimport { Text } from '~/components'\n\nexport type ScoreAttributeKey = 'origin' | 'temperature' | 'cutting' | 'cooking' | 'treatment' | 'label' | 'packaging'\n\nexport type ScoreAttributeDetail = {\n sim: number | null\n}\n\nexport type ChatScoreBreakdownLabels = {\n title: string\n compared: string\n notSpecified: string\n attributes: Record<ScoreAttributeKey, string>\n footer?: string\n}\n\nexport type ChatScoreBreakdownProps = {\n percent: number\n detail: Record<ScoreAttributeKey, ScoreAttributeDetail>\n labels: ChatScoreBreakdownLabels\n}\n\nconst ATTRIBUTE_ORDER: ScoreAttributeKey[] = [\n 'origin',\n 'temperature',\n 'cutting',\n 'cooking',\n 'treatment',\n 'label',\n 'packaging',\n]\n\nfunction getHeadlineColor(percent: number): string {\n if (percent >= 70) return '#3B6D11'\n if (percent >= 40) return '#854F0B'\n return '#A32D2D'\n}\n\nfunction getBarColor(sim: number): string {\n if (sim >= 70) return '#639922'\n if (sim >= 40) return '#BA7517'\n return '#E24B4A'\n}\n\nexport const ChatScoreBreakdown = ({ percent, detail, labels }: ChatScoreBreakdownProps) => {\n const compared = ATTRIBUTE_ORDER.filter(key => detail[key]?.sim != null)\n const notSpecified = ATTRIBUTE_ORDER.filter(key => detail[key]?.sim == null)\n\n return (\n <Box\n bg=\"white\"\n borderRadius=\"radius-8\"\n p=\"space-16\"\n minW=\"220px\"\n maxW=\"240px\"\n css={{ '& *': { fontFamily: 'inherit' } }}\n >\n <HStack justify=\"space-between\" alignItems=\"baseline\" mb=\"space-8\">\n <Text as=\"span\" fontSize=\"body.md\" fontWeight=\"bold\">\n {labels.title}\n </Text>\n <Text as=\"span\" fontSize=\"body.lg\" fontWeight=\"medium\" style={{ color: getHeadlineColor(percent) }}>\n {Math.round(percent)} %\n </Text>\n </HStack>\n\n <Box h=\"1px\" bg=\"grey.100\" mb=\"space-8\" />\n\n {compared.length > 0 && (\n <VStack alignItems=\"stretch\" gap=\"space-4\" mb=\"space-8\">\n <Text as=\"span\" fontSize=\"body.sm\" fontWeight=\"bold\" color=\"grey.400\">\n {labels.compared}\n </Text>\n {compared.map(key => {\n const sim = detail[key].sim as number\n return (\n <HStack key={key} alignItems=\"center\" gap=\"space-8\">\n <Text as=\"span\" fontSize=\"body.sm\" color=\"grey.500\" minW=\"80px\">\n {labels.attributes[key]}\n </Text>\n <Box flex=\"1\" h=\"3px\" bg=\"grey.100\" borderRadius=\"full\" overflow=\"hidden\">\n <Box h=\"100%\" borderRadius=\"full\" style={{ width: `${sim}%`, background: getBarColor(sim) }} />\n </Box>\n <Text\n as=\"span\"\n fontSize=\"body.sm\"\n fontWeight=\"medium\"\n minW=\"40px\"\n textAlign=\"right\"\n style={{ color: getBarColor(sim) }}\n >\n {Math.round(sim)} %\n </Text>\n </HStack>\n )\n })}\n </VStack>\n )}\n\n {compared.length > 0 && notSpecified.length > 0 && <Box h=\"1px\" bg=\"grey.100\" mb=\"space-8\" />}\n\n {notSpecified.length > 0 && (\n <VStack alignItems=\"stretch\" gap=\"space-4\">\n <Text as=\"span\" fontSize=\"body.sm\" fontWeight=\"bold\" color=\"grey.400\">\n {labels.notSpecified}\n </Text>\n <HStack flexWrap=\"wrap\" gap=\"space-4\">\n {notSpecified.map(key => (\n <Text\n key={key}\n as=\"span\"\n fontSize=\"body.sm\"\n color=\"grey.400\"\n border=\"1px solid\"\n borderColor=\"grey.100\"\n px=\"space-8\"\n py=\"2px\"\n borderRadius=\"full\"\n >\n {labels.attributes[key]}\n </Text>\n ))}\n </HStack>\n </VStack>\n )}\n\n {labels.footer && (\n <>\n <Box h=\"1px\" bg=\"grey.100\" mt=\"space-8\" mb=\"space-8\" />\n <Text as=\"span\" fontSize=\"body.sm\" color=\"grey.400\">\n {labels.footer}\n </Text>\n </>\n )}\n </Box>\n )\n}\n"],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Text as e } from "../text/Text.js";
|
|
3
3
|
import { Box as t, HStack as n, VStack as r } from "@stokelp/styled-system/jsx";
|
|
4
|
-
import {
|
|
4
|
+
import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
5
5
|
//#region src/components/chat/ChatScoreBreakdown.tsx
|
|
6
|
-
var
|
|
6
|
+
var s = [
|
|
7
7
|
"origin",
|
|
8
8
|
"temperature",
|
|
9
9
|
"cutting",
|
|
@@ -12,131 +12,140 @@ var o = [
|
|
|
12
12
|
"label",
|
|
13
13
|
"packaging"
|
|
14
14
|
];
|
|
15
|
-
function
|
|
15
|
+
function c(e) {
|
|
16
16
|
return e >= 70 ? "#3B6D11" : e >= 40 ? "#854F0B" : "#A32D2D";
|
|
17
17
|
}
|
|
18
|
-
function
|
|
18
|
+
function l(e) {
|
|
19
19
|
return e >= 70 ? "#639922" : e >= 40 ? "#BA7517" : "#E24B4A";
|
|
20
20
|
}
|
|
21
|
-
var
|
|
22
|
-
let
|
|
23
|
-
return /* @__PURE__ */
|
|
21
|
+
var u = ({ percent: u, detail: d, labels: f }) => {
|
|
22
|
+
let p = s.filter((e) => d[e]?.sim != null), m = s.filter((e) => d[e]?.sim == null);
|
|
23
|
+
return /* @__PURE__ */ o(t, {
|
|
24
24
|
bg: "white",
|
|
25
25
|
borderRadius: "radius-8",
|
|
26
|
-
p: "space-
|
|
26
|
+
p: "space-16",
|
|
27
27
|
minW: "220px",
|
|
28
28
|
maxW: "240px",
|
|
29
|
+
css: { "& *": { fontFamily: "inherit" } },
|
|
29
30
|
children: [
|
|
30
|
-
/* @__PURE__ */
|
|
31
|
+
/* @__PURE__ */ o(n, {
|
|
31
32
|
justify: "space-between",
|
|
32
33
|
alignItems: "baseline",
|
|
33
34
|
mb: "space-8",
|
|
34
|
-
children: [/* @__PURE__ */
|
|
35
|
+
children: [/* @__PURE__ */ a(e, {
|
|
35
36
|
as: "span",
|
|
36
|
-
fontSize: "
|
|
37
|
-
fontWeight: "
|
|
38
|
-
children:
|
|
39
|
-
}), /* @__PURE__ */
|
|
37
|
+
fontSize: "body.md",
|
|
38
|
+
fontWeight: "bold",
|
|
39
|
+
children: f.title
|
|
40
|
+
}), /* @__PURE__ */ o(e, {
|
|
40
41
|
as: "span",
|
|
41
|
-
fontSize: "
|
|
42
|
-
fontWeight: "
|
|
43
|
-
style: { color:
|
|
44
|
-
children: [Math.round(
|
|
42
|
+
fontSize: "body.lg",
|
|
43
|
+
fontWeight: "medium",
|
|
44
|
+
style: { color: c(u) },
|
|
45
|
+
children: [Math.round(u), " %"]
|
|
45
46
|
})]
|
|
46
47
|
}),
|
|
47
|
-
/* @__PURE__ */
|
|
48
|
+
/* @__PURE__ */ a(t, {
|
|
48
49
|
h: "1px",
|
|
49
50
|
bg: "grey.100",
|
|
50
51
|
mb: "space-8"
|
|
51
52
|
}),
|
|
52
|
-
|
|
53
|
+
p.length > 0 && /* @__PURE__ */ o(r, {
|
|
53
54
|
alignItems: "stretch",
|
|
54
55
|
gap: "space-4",
|
|
55
56
|
mb: "space-8",
|
|
56
|
-
children: [/* @__PURE__ */
|
|
57
|
+
children: [/* @__PURE__ */ a(e, {
|
|
57
58
|
as: "span",
|
|
58
|
-
fontSize: "
|
|
59
|
-
fontWeight: "
|
|
59
|
+
fontSize: "body.sm",
|
|
60
|
+
fontWeight: "bold",
|
|
60
61
|
color: "grey.400",
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
let o = u[r].sim;
|
|
66
|
-
return /* @__PURE__ */ a(n, {
|
|
62
|
+
children: f.compared
|
|
63
|
+
}), p.map((r) => {
|
|
64
|
+
let i = d[r].sim;
|
|
65
|
+
return /* @__PURE__ */ o(n, {
|
|
67
66
|
alignItems: "center",
|
|
68
67
|
gap: "space-8",
|
|
69
68
|
children: [
|
|
70
|
-
/* @__PURE__ */
|
|
69
|
+
/* @__PURE__ */ a(e, {
|
|
71
70
|
as: "span",
|
|
72
|
-
fontSize: "
|
|
71
|
+
fontSize: "body.sm",
|
|
73
72
|
color: "grey.500",
|
|
74
73
|
minW: "80px",
|
|
75
|
-
children:
|
|
74
|
+
children: f.attributes[r]
|
|
76
75
|
}),
|
|
77
|
-
/* @__PURE__ */
|
|
76
|
+
/* @__PURE__ */ a(t, {
|
|
78
77
|
flex: "1",
|
|
79
78
|
h: "3px",
|
|
80
79
|
bg: "grey.100",
|
|
81
80
|
borderRadius: "full",
|
|
82
81
|
overflow: "hidden",
|
|
83
|
-
children: /* @__PURE__ */
|
|
82
|
+
children: /* @__PURE__ */ a(t, {
|
|
84
83
|
h: "100%",
|
|
85
84
|
borderRadius: "full",
|
|
86
85
|
style: {
|
|
87
|
-
width: `${
|
|
88
|
-
background:
|
|
86
|
+
width: `${i}%`,
|
|
87
|
+
background: l(i)
|
|
89
88
|
}
|
|
90
89
|
})
|
|
91
90
|
}),
|
|
92
|
-
/* @__PURE__ */
|
|
91
|
+
/* @__PURE__ */ o(e, {
|
|
93
92
|
as: "span",
|
|
94
|
-
fontSize: "
|
|
95
|
-
fontWeight: "
|
|
96
|
-
minW: "
|
|
93
|
+
fontSize: "body.sm",
|
|
94
|
+
fontWeight: "medium",
|
|
95
|
+
minW: "40px",
|
|
97
96
|
textAlign: "right",
|
|
98
|
-
style: { color:
|
|
99
|
-
children:
|
|
97
|
+
style: { color: l(i) },
|
|
98
|
+
children: [Math.round(i), " %"]
|
|
100
99
|
})
|
|
101
100
|
]
|
|
102
101
|
}, r);
|
|
103
102
|
})]
|
|
104
103
|
}),
|
|
105
|
-
|
|
104
|
+
p.length > 0 && m.length > 0 && /* @__PURE__ */ a(t, {
|
|
106
105
|
h: "1px",
|
|
107
106
|
bg: "grey.100",
|
|
108
107
|
mb: "space-8"
|
|
109
108
|
}),
|
|
110
|
-
|
|
109
|
+
m.length > 0 && /* @__PURE__ */ o(r, {
|
|
111
110
|
alignItems: "stretch",
|
|
112
111
|
gap: "space-4",
|
|
113
|
-
children: [/* @__PURE__ */
|
|
112
|
+
children: [/* @__PURE__ */ a(e, {
|
|
114
113
|
as: "span",
|
|
115
|
-
fontSize: "
|
|
116
|
-
fontWeight: "
|
|
114
|
+
fontSize: "body.sm",
|
|
115
|
+
fontWeight: "bold",
|
|
117
116
|
color: "grey.400",
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
children: d.notSpecified
|
|
121
|
-
}), /* @__PURE__ */ i(n, {
|
|
117
|
+
children: f.notSpecified
|
|
118
|
+
}), /* @__PURE__ */ a(n, {
|
|
122
119
|
flexWrap: "wrap",
|
|
123
120
|
gap: "space-4",
|
|
124
|
-
children:
|
|
121
|
+
children: m.map((t) => /* @__PURE__ */ a(e, {
|
|
125
122
|
as: "span",
|
|
126
|
-
fontSize: "
|
|
123
|
+
fontSize: "body.sm",
|
|
127
124
|
color: "grey.400",
|
|
128
|
-
|
|
125
|
+
border: "1px solid",
|
|
126
|
+
borderColor: "grey.100",
|
|
129
127
|
px: "space-8",
|
|
130
128
|
py: "2px",
|
|
131
129
|
borderRadius: "full",
|
|
132
|
-
children:
|
|
130
|
+
children: f.attributes[t]
|
|
133
131
|
}, t))
|
|
134
132
|
})]
|
|
135
|
-
})
|
|
133
|
+
}),
|
|
134
|
+
f.footer && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(t, {
|
|
135
|
+
h: "1px",
|
|
136
|
+
bg: "grey.100",
|
|
137
|
+
mt: "space-8",
|
|
138
|
+
mb: "space-8"
|
|
139
|
+
}), /* @__PURE__ */ a(e, {
|
|
140
|
+
as: "span",
|
|
141
|
+
fontSize: "body.sm",
|
|
142
|
+
color: "grey.400",
|
|
143
|
+
children: f.footer
|
|
144
|
+
})] })
|
|
136
145
|
]
|
|
137
146
|
});
|
|
138
147
|
};
|
|
139
148
|
//#endregion
|
|
140
|
-
export {
|
|
149
|
+
export { u as ChatScoreBreakdown };
|
|
141
150
|
|
|
142
151
|
//# sourceMappingURL=ChatScoreBreakdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatScoreBreakdown.js","names":[],"sources":["../../../src/components/chat/ChatScoreBreakdown.tsx"],"sourcesContent":["import { Box, HStack, VStack } from '@stokelp/styled-system/jsx'\nimport { Text } from '~/components'\n\nexport type ScoreAttributeKey = 'origin' | 'temperature' | 'cutting' | 'cooking' | 'treatment' | 'label' | 'packaging'\n\nexport type ScoreAttributeDetail = {\n sim: number | null\n}\n\nexport type ChatScoreBreakdownLabels = {\n title: string\n compared: string\n notSpecified: string\n attributes: Record<ScoreAttributeKey, string>\n}\n\nexport type ChatScoreBreakdownProps = {\n percent: number\n detail: Record<ScoreAttributeKey, ScoreAttributeDetail>\n labels: ChatScoreBreakdownLabels\n}\n\nconst ATTRIBUTE_ORDER: ScoreAttributeKey[] = [\n 'origin',\n 'temperature',\n 'cutting',\n 'cooking',\n 'treatment',\n 'label',\n 'packaging',\n]\n\nfunction getHeadlineColor(percent: number): string {\n if (percent >= 70) return '#3B6D11'\n if (percent >= 40) return '#854F0B'\n return '#A32D2D'\n}\n\nfunction getBarColor(sim: number): string {\n if (sim >= 70) return '#639922'\n if (sim >= 40) return '#BA7517'\n return '#E24B4A'\n}\n\nexport const ChatScoreBreakdown = ({ percent, detail, labels }: ChatScoreBreakdownProps) => {\n const compared = ATTRIBUTE_ORDER.filter(key => detail[key]?.sim != null)\n const notSpecified = ATTRIBUTE_ORDER.filter(key => detail[key]?.sim == null)\n\n return (\n <Box
|
|
1
|
+
{"version":3,"file":"ChatScoreBreakdown.js","names":[],"sources":["../../../src/components/chat/ChatScoreBreakdown.tsx"],"sourcesContent":["import { Box, HStack, VStack } from '@stokelp/styled-system/jsx'\nimport { Text } from '~/components'\n\nexport type ScoreAttributeKey = 'origin' | 'temperature' | 'cutting' | 'cooking' | 'treatment' | 'label' | 'packaging'\n\nexport type ScoreAttributeDetail = {\n sim: number | null\n}\n\nexport type ChatScoreBreakdownLabels = {\n title: string\n compared: string\n notSpecified: string\n attributes: Record<ScoreAttributeKey, string>\n footer?: string\n}\n\nexport type ChatScoreBreakdownProps = {\n percent: number\n detail: Record<ScoreAttributeKey, ScoreAttributeDetail>\n labels: ChatScoreBreakdownLabels\n}\n\nconst ATTRIBUTE_ORDER: ScoreAttributeKey[] = [\n 'origin',\n 'temperature',\n 'cutting',\n 'cooking',\n 'treatment',\n 'label',\n 'packaging',\n]\n\nfunction getHeadlineColor(percent: number): string {\n if (percent >= 70) return '#3B6D11'\n if (percent >= 40) return '#854F0B'\n return '#A32D2D'\n}\n\nfunction getBarColor(sim: number): string {\n if (sim >= 70) return '#639922'\n if (sim >= 40) return '#BA7517'\n return '#E24B4A'\n}\n\nexport const ChatScoreBreakdown = ({ percent, detail, labels }: ChatScoreBreakdownProps) => {\n const compared = ATTRIBUTE_ORDER.filter(key => detail[key]?.sim != null)\n const notSpecified = ATTRIBUTE_ORDER.filter(key => detail[key]?.sim == null)\n\n return (\n <Box\n bg=\"white\"\n borderRadius=\"radius-8\"\n p=\"space-16\"\n minW=\"220px\"\n maxW=\"240px\"\n css={{ '& *': { fontFamily: 'inherit' } }}\n >\n <HStack justify=\"space-between\" alignItems=\"baseline\" mb=\"space-8\">\n <Text as=\"span\" fontSize=\"body.md\" fontWeight=\"bold\">\n {labels.title}\n </Text>\n <Text as=\"span\" fontSize=\"body.lg\" fontWeight=\"medium\" style={{ color: getHeadlineColor(percent) }}>\n {Math.round(percent)} %\n </Text>\n </HStack>\n\n <Box h=\"1px\" bg=\"grey.100\" mb=\"space-8\" />\n\n {compared.length > 0 && (\n <VStack alignItems=\"stretch\" gap=\"space-4\" mb=\"space-8\">\n <Text as=\"span\" fontSize=\"body.sm\" fontWeight=\"bold\" color=\"grey.400\">\n {labels.compared}\n </Text>\n {compared.map(key => {\n const sim = detail[key].sim as number\n return (\n <HStack key={key} alignItems=\"center\" gap=\"space-8\">\n <Text as=\"span\" fontSize=\"body.sm\" color=\"grey.500\" minW=\"80px\">\n {labels.attributes[key]}\n </Text>\n <Box flex=\"1\" h=\"3px\" bg=\"grey.100\" borderRadius=\"full\" overflow=\"hidden\">\n <Box h=\"100%\" borderRadius=\"full\" style={{ width: `${sim}%`, background: getBarColor(sim) }} />\n </Box>\n <Text\n as=\"span\"\n fontSize=\"body.sm\"\n fontWeight=\"medium\"\n minW=\"40px\"\n textAlign=\"right\"\n style={{ color: getBarColor(sim) }}\n >\n {Math.round(sim)} %\n </Text>\n </HStack>\n )\n })}\n </VStack>\n )}\n\n {compared.length > 0 && notSpecified.length > 0 && <Box h=\"1px\" bg=\"grey.100\" mb=\"space-8\" />}\n\n {notSpecified.length > 0 && (\n <VStack alignItems=\"stretch\" gap=\"space-4\">\n <Text as=\"span\" fontSize=\"body.sm\" fontWeight=\"bold\" color=\"grey.400\">\n {labels.notSpecified}\n </Text>\n <HStack flexWrap=\"wrap\" gap=\"space-4\">\n {notSpecified.map(key => (\n <Text\n key={key}\n as=\"span\"\n fontSize=\"body.sm\"\n color=\"grey.400\"\n border=\"1px solid\"\n borderColor=\"grey.100\"\n px=\"space-8\"\n py=\"2px\"\n borderRadius=\"full\"\n >\n {labels.attributes[key]}\n </Text>\n ))}\n </HStack>\n </VStack>\n )}\n\n {labels.footer && (\n <>\n <Box h=\"1px\" bg=\"grey.100\" mt=\"space-8\" mb=\"space-8\" />\n <Text as=\"span\" fontSize=\"body.sm\" color=\"grey.400\">\n {labels.footer}\n </Text>\n </>\n )}\n </Box>\n )\n}\n"],"mappings":"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"}
|