@stokelp/ui 2.108.0 → 2.109.0
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 +9 -3
- package/dist/components/chat/ChatScoreBreakdown.js +82 -28
- 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`,`rawMaterialOrigin`,`temperature`,`cutting`,`cooking`,`treatment`,`label`,`packaging`];function
|
|
1
|
+
"use client";const e=require("../text/Text.cjs");let t=require("@stokelp/styled-system/jsx"),n=require("react/jsx-runtime");var r=[`origin`,`rawMaterialOrigin`,`temperature`,`cutting`,`cooking`,`treatment`,`label`,`packaging`,`grammageGsm`,`recycledPct`,`thicknessMicron`],i={egal:{bg:`#E6F3D9`,color:`#3B6D11`},proche:{bg:`#F0F6DC`,color:`#5E8516`},eloigne:{bg:`#FDF0E0`,color:`#C2740C`},non_correspondant:{bg:`#FCEBEB`,color:`#A32D2D`}};function a(e){return e>=70?`#3B6D11`:e>=40?`#854F0B`:`#A32D2D`}function o(e){return e>=70?`#639922`:e>=40?`#BA7517`:`#E24B4A`}function s(e){return e?.level!=null}function c(e){return e?.matched!=null&&e?.total!=null}function l(e){return s(e)||c(e)}var u=({percent:c,detail:u,labels:d})=>{let f=r.filter(e=>l(u[e])),p=r.filter(e=>!l(u[e])&&d.attributes[e]!=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:d.title}),(0,n.jsxs)(e.Text,{as:`span`,fontSize:`body.lg`,fontWeight:`medium`,style:{color:a(c)},children:[Math.round(c),` %`]})]}),(0,n.jsx)(t.Box,{h:`1px`,bg:`grey.100`,mb:`space-8`}),f.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:d.compared}),f.map(r=>{let a=u[r];if(s(a)){let o=a.level,s=i[o];return(0,n.jsxs)(t.HStack,{alignItems:`center`,gap:`space-8`,justify:`space-between`,children:[(0,n.jsx)(e.Text,{as:`span`,fontSize:`body.sm`,color:`grey.500`,minW:`80px`,children:d.attributes[r]}),(0,n.jsx)(t.Box,{px:`space-8`,py:`2px`,borderRadius:`full`,style:{backgroundColor:s.bg},children:(0,n.jsx)(e.Text,{as:`span`,fontSize:`body.sm`,fontWeight:`medium`,style:{color:s.color},children:d.levels?.[o]??o})})]},r)}let c=a.matched,l=a.total,f=l>0?c/l*100:0;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:d.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:`${f}%`,background:o(f)}})}),(0,n.jsxs)(e.Text,{as:`span`,fontSize:`body.sm`,fontWeight:`medium`,minW:`40px`,textAlign:`right`,style:{color:o(f)},children:[c,`/`,l]})]},r)})]}),f.length>0&&p.length>0&&(0,n.jsx)(t.Box,{h:`1px`,bg:`grey.100`,mb:`space-8`}),p.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:d.notSpecified}),(0,n.jsx)(t.HStack,{flexWrap:`wrap`,gap:`space-4`,children:p.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:d.attributes[t]},t))})]}),d.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:`9px`,color:`grey.300`,style:{lineHeight:1},children:d.footer})]})]})};exports.ChatScoreBreakdown=u;
|
|
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 =\n | 'origin'\n | 'rawMaterialOrigin'\n | 'temperature'\n | 'cutting'\n | 'cooking'\n | 'treatment'\n | 'label'\n | 'packaging'\n\nexport type ScoreAttributeDetail = {\n matched: number | null\n total: 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 'rawMaterialOrigin',\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(ratioPercent: number): string {\n if (ratioPercent >= 70) return '#639922'\n if (ratioPercent >= 40) return '#BA7517'\n return '#E24B4A'\n}\n\nfunction isComparable(detail?: ScoreAttributeDetail): boolean {\n return detail?.matched != null && detail?.total != null\n}\n\nexport const ChatScoreBreakdown = ({ percent, detail, labels }: ChatScoreBreakdownProps) => {\n const compared = ATTRIBUTE_ORDER.filter(key => isComparable(detail[key]))\n const notSpecified = ATTRIBUTE_ORDER.filter(key => !isComparable(detail[key]))\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 matched = detail[key].matched as number\n const total = detail[key].total as number\n const ratioPercent = total > 0 ? (matched / total) * 100 : 0\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\n h=\"100%\"\n borderRadius=\"full\"\n style={{ width: `${ratioPercent}%`, background: getBarColor(ratioPercent) }}\n />\n </Box>\n <Text\n as=\"span\"\n fontSize=\"body.sm\"\n fontWeight=\"medium\"\n minW=\"40px\"\n textAlign=\"right\"\n style={{ color: getBarColor(ratioPercent) }}\n >\n {matched}/{total}\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=\"9px\" color=\"grey.300\" style={{ lineHeight: 1 }}>\n {labels.footer}\n </Text>\n </>\n )}\n </Box>\n )\n}\n"],"mappings":"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"}
|
|
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 ScoreSetAttributeKey =\n | 'origin'\n | 'rawMaterialOrigin'\n | 'temperature'\n | 'cutting'\n | 'cooking'\n | 'treatment'\n | 'label'\n | 'packaging'\n\nexport type ScoreNumericAttributeKey = 'grammageGsm' | 'recycledPct' | 'thicknessMicron'\n\nexport type ScoreAttributeKey = ScoreSetAttributeKey | ScoreNumericAttributeKey\n\n/** Proximity bucket for free numeric packaging specs: egal (equal) → non_correspondant (no match). */\nexport type ScoreLevel = 'egal' | 'proche' | 'eloigne' | 'non_correspondant'\n\nexport type ScoreAttributeDetail = {\n matched: number | null\n total: number | null\n level?: ScoreLevel | null\n}\n\nexport type ChatScoreBreakdownLabels = {\n title: string\n compared: string\n notSpecified: string\n attributes: Record<ScoreSetAttributeKey, string> & Partial<Record<ScoreNumericAttributeKey, string>>\n levels?: Record<ScoreLevel, string>\n footer?: string\n}\n\nexport type ChatScoreBreakdownProps = {\n percent: number\n detail: Record<string, ScoreAttributeDetail>\n labels: ChatScoreBreakdownLabels\n}\n\nconst ATTRIBUTE_ORDER: ScoreAttributeKey[] = [\n 'origin',\n 'rawMaterialOrigin',\n 'temperature',\n 'cutting',\n 'cooking',\n 'treatment',\n 'label',\n 'packaging',\n 'grammageGsm',\n 'recycledPct',\n 'thicknessMicron',\n]\n\nconst LEVEL_COLORS: Record<ScoreLevel, { bg: string; color: string }> = {\n egal: { bg: '#E6F3D9', color: '#3B6D11' },\n proche: { bg: '#F0F6DC', color: '#5E8516' },\n eloigne: { bg: '#FDF0E0', color: '#C2740C' },\n non_correspondant: { bg: '#FCEBEB', color: '#A32D2D' },\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(ratioPercent: number): string {\n if (ratioPercent >= 70) return '#639922'\n if (ratioPercent >= 40) return '#BA7517'\n return '#E24B4A'\n}\n\nfunction hasLevel(detail?: ScoreAttributeDetail): boolean {\n return detail?.level != null\n}\n\nfunction isFraction(detail?: ScoreAttributeDetail): boolean {\n return detail?.matched != null && detail?.total != null\n}\n\nfunction isComparable(detail?: ScoreAttributeDetail): boolean {\n return hasLevel(detail) || isFraction(detail)\n}\n\nexport const ChatScoreBreakdown = ({ percent, detail, labels }: ChatScoreBreakdownProps) => {\n const compared = ATTRIBUTE_ORDER.filter(key => isComparable(detail[key]))\n const notSpecified = ATTRIBUTE_ORDER.filter(key => !isComparable(detail[key]) && labels.attributes[key] != 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 entry = detail[key]\n if (hasLevel(entry)) {\n const level = entry.level as ScoreLevel\n const colors = LEVEL_COLORS[level]\n return (\n <HStack key={key} alignItems=\"center\" gap=\"space-8\" justify=\"space-between\">\n <Text as=\"span\" fontSize=\"body.sm\" color=\"grey.500\" minW=\"80px\">\n {labels.attributes[key]}\n </Text>\n <Box px=\"space-8\" py=\"2px\" borderRadius=\"full\" style={{ backgroundColor: colors.bg }}>\n <Text as=\"span\" fontSize=\"body.sm\" fontWeight=\"medium\" style={{ color: colors.color }}>\n {labels.levels?.[level] ?? level}\n </Text>\n </Box>\n </HStack>\n )\n }\n\n const matched = entry.matched as number\n const total = entry.total as number\n const ratioPercent = total > 0 ? (matched / total) * 100 : 0\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\n h=\"100%\"\n borderRadius=\"full\"\n style={{ width: `${ratioPercent}%`, background: getBarColor(ratioPercent) }}\n />\n </Box>\n <Text\n as=\"span\"\n fontSize=\"body.sm\"\n fontWeight=\"medium\"\n minW=\"40px\"\n textAlign=\"right\"\n style={{ color: getBarColor(ratioPercent) }}\n >\n {matched}/{total}\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=\"9px\" color=\"grey.300\" style={{ lineHeight: 1 }}>\n {labels.footer}\n </Text>\n </>\n )}\n </Box>\n )\n}\n"],"mappings":"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"}
|
|
@@ -1,18 +1,24 @@
|
|
|
1
|
-
export type
|
|
1
|
+
export type ScoreSetAttributeKey = 'origin' | 'rawMaterialOrigin' | 'temperature' | 'cutting' | 'cooking' | 'treatment' | 'label' | 'packaging';
|
|
2
|
+
export type ScoreNumericAttributeKey = 'grammageGsm' | 'recycledPct' | 'thicknessMicron';
|
|
3
|
+
export type ScoreAttributeKey = ScoreSetAttributeKey | ScoreNumericAttributeKey;
|
|
4
|
+
/** Proximity bucket for free numeric packaging specs: egal (equal) → non_correspondant (no match). */
|
|
5
|
+
export type ScoreLevel = 'egal' | 'proche' | 'eloigne' | 'non_correspondant';
|
|
2
6
|
export type ScoreAttributeDetail = {
|
|
3
7
|
matched: number | null;
|
|
4
8
|
total: number | null;
|
|
9
|
+
level?: ScoreLevel | null;
|
|
5
10
|
};
|
|
6
11
|
export type ChatScoreBreakdownLabels = {
|
|
7
12
|
title: string;
|
|
8
13
|
compared: string;
|
|
9
14
|
notSpecified: string;
|
|
10
|
-
attributes: Record<
|
|
15
|
+
attributes: Record<ScoreSetAttributeKey, string> & Partial<Record<ScoreNumericAttributeKey, string>>;
|
|
16
|
+
levels?: Record<ScoreLevel, string>;
|
|
11
17
|
footer?: string;
|
|
12
18
|
};
|
|
13
19
|
export type ChatScoreBreakdownProps = {
|
|
14
20
|
percent: number;
|
|
15
|
-
detail: Record<
|
|
21
|
+
detail: Record<string, ScoreAttributeDetail>;
|
|
16
22
|
labels: ChatScoreBreakdownLabels;
|
|
17
23
|
};
|
|
18
24
|
export declare const ChatScoreBreakdown: ({ percent, detail, labels }: ChatScoreBreakdownProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -11,19 +11,45 @@ var s = [
|
|
|
11
11
|
"cooking",
|
|
12
12
|
"treatment",
|
|
13
13
|
"label",
|
|
14
|
-
"packaging"
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
"packaging",
|
|
15
|
+
"grammageGsm",
|
|
16
|
+
"recycledPct",
|
|
17
|
+
"thicknessMicron"
|
|
18
|
+
], c = {
|
|
19
|
+
egal: {
|
|
20
|
+
bg: "#E6F3D9",
|
|
21
|
+
color: "#3B6D11"
|
|
22
|
+
},
|
|
23
|
+
proche: {
|
|
24
|
+
bg: "#F0F6DC",
|
|
25
|
+
color: "#5E8516"
|
|
26
|
+
},
|
|
27
|
+
eloigne: {
|
|
28
|
+
bg: "#FDF0E0",
|
|
29
|
+
color: "#C2740C"
|
|
30
|
+
},
|
|
31
|
+
non_correspondant: {
|
|
32
|
+
bg: "#FCEBEB",
|
|
33
|
+
color: "#A32D2D"
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
function l(e) {
|
|
17
37
|
return e >= 70 ? "#3B6D11" : e >= 40 ? "#854F0B" : "#A32D2D";
|
|
18
38
|
}
|
|
19
|
-
function
|
|
39
|
+
function u(e) {
|
|
20
40
|
return e >= 70 ? "#639922" : e >= 40 ? "#BA7517" : "#E24B4A";
|
|
21
41
|
}
|
|
22
|
-
function
|
|
42
|
+
function d(e) {
|
|
43
|
+
return e?.level != null;
|
|
44
|
+
}
|
|
45
|
+
function f(e) {
|
|
23
46
|
return e?.matched != null && e?.total != null;
|
|
24
47
|
}
|
|
25
|
-
|
|
26
|
-
|
|
48
|
+
function p(e) {
|
|
49
|
+
return d(e) || f(e);
|
|
50
|
+
}
|
|
51
|
+
var m = ({ percent: f, detail: m, labels: h }) => {
|
|
52
|
+
let g = s.filter((e) => p(m[e])), _ = s.filter((e) => !p(m[e]) && h.attributes[e] != null);
|
|
27
53
|
return /* @__PURE__ */ o(t, {
|
|
28
54
|
bg: "white",
|
|
29
55
|
borderRadius: "radius-8",
|
|
@@ -40,13 +66,13 @@ var d = ({ percent: d, detail: f, labels: p }) => {
|
|
|
40
66
|
as: "span",
|
|
41
67
|
fontSize: "body.md",
|
|
42
68
|
fontWeight: "bold",
|
|
43
|
-
children:
|
|
69
|
+
children: h.title
|
|
44
70
|
}), /* @__PURE__ */ o(e, {
|
|
45
71
|
as: "span",
|
|
46
72
|
fontSize: "body.lg",
|
|
47
73
|
fontWeight: "medium",
|
|
48
|
-
style: { color:
|
|
49
|
-
children: [Math.round(
|
|
74
|
+
style: { color: l(f) },
|
|
75
|
+
children: [Math.round(f), " %"]
|
|
50
76
|
})]
|
|
51
77
|
}),
|
|
52
78
|
/* @__PURE__ */ a(t, {
|
|
@@ -54,7 +80,7 @@ var d = ({ percent: d, detail: f, labels: p }) => {
|
|
|
54
80
|
bg: "grey.100",
|
|
55
81
|
mb: "space-8"
|
|
56
82
|
}),
|
|
57
|
-
|
|
83
|
+
g.length > 0 && /* @__PURE__ */ o(r, {
|
|
58
84
|
alignItems: "stretch",
|
|
59
85
|
gap: "space-4",
|
|
60
86
|
mb: "space-8",
|
|
@@ -63,9 +89,37 @@ var d = ({ percent: d, detail: f, labels: p }) => {
|
|
|
63
89
|
fontSize: "body.sm",
|
|
64
90
|
fontWeight: "bold",
|
|
65
91
|
color: "grey.400",
|
|
66
|
-
children:
|
|
67
|
-
}),
|
|
68
|
-
let i =
|
|
92
|
+
children: h.compared
|
|
93
|
+
}), g.map((r) => {
|
|
94
|
+
let i = m[r];
|
|
95
|
+
if (d(i)) {
|
|
96
|
+
let s = i.level, l = c[s];
|
|
97
|
+
return /* @__PURE__ */ o(n, {
|
|
98
|
+
alignItems: "center",
|
|
99
|
+
gap: "space-8",
|
|
100
|
+
justify: "space-between",
|
|
101
|
+
children: [/* @__PURE__ */ a(e, {
|
|
102
|
+
as: "span",
|
|
103
|
+
fontSize: "body.sm",
|
|
104
|
+
color: "grey.500",
|
|
105
|
+
minW: "80px",
|
|
106
|
+
children: h.attributes[r]
|
|
107
|
+
}), /* @__PURE__ */ a(t, {
|
|
108
|
+
px: "space-8",
|
|
109
|
+
py: "2px",
|
|
110
|
+
borderRadius: "full",
|
|
111
|
+
style: { backgroundColor: l.bg },
|
|
112
|
+
children: /* @__PURE__ */ a(e, {
|
|
113
|
+
as: "span",
|
|
114
|
+
fontSize: "body.sm",
|
|
115
|
+
fontWeight: "medium",
|
|
116
|
+
style: { color: l.color },
|
|
117
|
+
children: h.levels?.[s] ?? s
|
|
118
|
+
})
|
|
119
|
+
})]
|
|
120
|
+
}, r);
|
|
121
|
+
}
|
|
122
|
+
let s = i.matched, l = i.total, f = l > 0 ? s / l * 100 : 0;
|
|
69
123
|
return /* @__PURE__ */ o(n, {
|
|
70
124
|
alignItems: "center",
|
|
71
125
|
gap: "space-8",
|
|
@@ -75,7 +129,7 @@ var d = ({ percent: d, detail: f, labels: p }) => {
|
|
|
75
129
|
fontSize: "body.sm",
|
|
76
130
|
color: "grey.500",
|
|
77
131
|
minW: "80px",
|
|
78
|
-
children:
|
|
132
|
+
children: h.attributes[r]
|
|
79
133
|
}),
|
|
80
134
|
/* @__PURE__ */ a(t, {
|
|
81
135
|
flex: "1",
|
|
@@ -87,8 +141,8 @@ var d = ({ percent: d, detail: f, labels: p }) => {
|
|
|
87
141
|
h: "100%",
|
|
88
142
|
borderRadius: "full",
|
|
89
143
|
style: {
|
|
90
|
-
width: `${
|
|
91
|
-
background:
|
|
144
|
+
width: `${f}%`,
|
|
145
|
+
background: u(f)
|
|
92
146
|
}
|
|
93
147
|
})
|
|
94
148
|
}),
|
|
@@ -98,23 +152,23 @@ var d = ({ percent: d, detail: f, labels: p }) => {
|
|
|
98
152
|
fontWeight: "medium",
|
|
99
153
|
minW: "40px",
|
|
100
154
|
textAlign: "right",
|
|
101
|
-
style: { color:
|
|
155
|
+
style: { color: u(f) },
|
|
102
156
|
children: [
|
|
103
|
-
|
|
157
|
+
s,
|
|
104
158
|
"/",
|
|
105
|
-
|
|
159
|
+
l
|
|
106
160
|
]
|
|
107
161
|
})
|
|
108
162
|
]
|
|
109
163
|
}, r);
|
|
110
164
|
})]
|
|
111
165
|
}),
|
|
112
|
-
|
|
166
|
+
g.length > 0 && _.length > 0 && /* @__PURE__ */ a(t, {
|
|
113
167
|
h: "1px",
|
|
114
168
|
bg: "grey.100",
|
|
115
169
|
mb: "space-8"
|
|
116
170
|
}),
|
|
117
|
-
|
|
171
|
+
_.length > 0 && /* @__PURE__ */ o(r, {
|
|
118
172
|
alignItems: "stretch",
|
|
119
173
|
gap: "space-4",
|
|
120
174
|
children: [/* @__PURE__ */ a(e, {
|
|
@@ -122,11 +176,11 @@ var d = ({ percent: d, detail: f, labels: p }) => {
|
|
|
122
176
|
fontSize: "body.sm",
|
|
123
177
|
fontWeight: "bold",
|
|
124
178
|
color: "grey.400",
|
|
125
|
-
children:
|
|
179
|
+
children: h.notSpecified
|
|
126
180
|
}), /* @__PURE__ */ a(n, {
|
|
127
181
|
flexWrap: "wrap",
|
|
128
182
|
gap: "space-4",
|
|
129
|
-
children:
|
|
183
|
+
children: _.map((t) => /* @__PURE__ */ a(e, {
|
|
130
184
|
as: "span",
|
|
131
185
|
fontSize: "body.sm",
|
|
132
186
|
color: "grey.400",
|
|
@@ -135,11 +189,11 @@ var d = ({ percent: d, detail: f, labels: p }) => {
|
|
|
135
189
|
px: "space-8",
|
|
136
190
|
py: "2px",
|
|
137
191
|
borderRadius: "full",
|
|
138
|
-
children:
|
|
192
|
+
children: h.attributes[t]
|
|
139
193
|
}, t))
|
|
140
194
|
})]
|
|
141
195
|
}),
|
|
142
|
-
|
|
196
|
+
h.footer && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(t, {
|
|
143
197
|
h: "1px",
|
|
144
198
|
bg: "grey.100",
|
|
145
199
|
mt: "space-8",
|
|
@@ -149,12 +203,12 @@ var d = ({ percent: d, detail: f, labels: p }) => {
|
|
|
149
203
|
fontSize: "9px",
|
|
150
204
|
color: "grey.300",
|
|
151
205
|
style: { lineHeight: 1 },
|
|
152
|
-
children:
|
|
206
|
+
children: h.footer
|
|
153
207
|
})] })
|
|
154
208
|
]
|
|
155
209
|
});
|
|
156
210
|
};
|
|
157
211
|
//#endregion
|
|
158
|
-
export {
|
|
212
|
+
export { m as ChatScoreBreakdown };
|
|
159
213
|
|
|
160
214
|
//# 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
|
|
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 ScoreSetAttributeKey =\n | 'origin'\n | 'rawMaterialOrigin'\n | 'temperature'\n | 'cutting'\n | 'cooking'\n | 'treatment'\n | 'label'\n | 'packaging'\n\nexport type ScoreNumericAttributeKey = 'grammageGsm' | 'recycledPct' | 'thicknessMicron'\n\nexport type ScoreAttributeKey = ScoreSetAttributeKey | ScoreNumericAttributeKey\n\n/** Proximity bucket for free numeric packaging specs: egal (equal) → non_correspondant (no match). */\nexport type ScoreLevel = 'egal' | 'proche' | 'eloigne' | 'non_correspondant'\n\nexport type ScoreAttributeDetail = {\n matched: number | null\n total: number | null\n level?: ScoreLevel | null\n}\n\nexport type ChatScoreBreakdownLabels = {\n title: string\n compared: string\n notSpecified: string\n attributes: Record<ScoreSetAttributeKey, string> & Partial<Record<ScoreNumericAttributeKey, string>>\n levels?: Record<ScoreLevel, string>\n footer?: string\n}\n\nexport type ChatScoreBreakdownProps = {\n percent: number\n detail: Record<string, ScoreAttributeDetail>\n labels: ChatScoreBreakdownLabels\n}\n\nconst ATTRIBUTE_ORDER: ScoreAttributeKey[] = [\n 'origin',\n 'rawMaterialOrigin',\n 'temperature',\n 'cutting',\n 'cooking',\n 'treatment',\n 'label',\n 'packaging',\n 'grammageGsm',\n 'recycledPct',\n 'thicknessMicron',\n]\n\nconst LEVEL_COLORS: Record<ScoreLevel, { bg: string; color: string }> = {\n egal: { bg: '#E6F3D9', color: '#3B6D11' },\n proche: { bg: '#F0F6DC', color: '#5E8516' },\n eloigne: { bg: '#FDF0E0', color: '#C2740C' },\n non_correspondant: { bg: '#FCEBEB', color: '#A32D2D' },\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(ratioPercent: number): string {\n if (ratioPercent >= 70) return '#639922'\n if (ratioPercent >= 40) return '#BA7517'\n return '#E24B4A'\n}\n\nfunction hasLevel(detail?: ScoreAttributeDetail): boolean {\n return detail?.level != null\n}\n\nfunction isFraction(detail?: ScoreAttributeDetail): boolean {\n return detail?.matched != null && detail?.total != null\n}\n\nfunction isComparable(detail?: ScoreAttributeDetail): boolean {\n return hasLevel(detail) || isFraction(detail)\n}\n\nexport const ChatScoreBreakdown = ({ percent, detail, labels }: ChatScoreBreakdownProps) => {\n const compared = ATTRIBUTE_ORDER.filter(key => isComparable(detail[key]))\n const notSpecified = ATTRIBUTE_ORDER.filter(key => !isComparable(detail[key]) && labels.attributes[key] != 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 entry = detail[key]\n if (hasLevel(entry)) {\n const level = entry.level as ScoreLevel\n const colors = LEVEL_COLORS[level]\n return (\n <HStack key={key} alignItems=\"center\" gap=\"space-8\" justify=\"space-between\">\n <Text as=\"span\" fontSize=\"body.sm\" color=\"grey.500\" minW=\"80px\">\n {labels.attributes[key]}\n </Text>\n <Box px=\"space-8\" py=\"2px\" borderRadius=\"full\" style={{ backgroundColor: colors.bg }}>\n <Text as=\"span\" fontSize=\"body.sm\" fontWeight=\"medium\" style={{ color: colors.color }}>\n {labels.levels?.[level] ?? level}\n </Text>\n </Box>\n </HStack>\n )\n }\n\n const matched = entry.matched as number\n const total = entry.total as number\n const ratioPercent = total > 0 ? (matched / total) * 100 : 0\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\n h=\"100%\"\n borderRadius=\"full\"\n style={{ width: `${ratioPercent}%`, background: getBarColor(ratioPercent) }}\n />\n </Box>\n <Text\n as=\"span\"\n fontSize=\"body.sm\"\n fontWeight=\"medium\"\n minW=\"40px\"\n textAlign=\"right\"\n style={{ color: getBarColor(ratioPercent) }}\n >\n {matched}/{total}\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=\"9px\" color=\"grey.300\" style={{ lineHeight: 1 }}>\n {labels.footer}\n </Text>\n </>\n )}\n </Box>\n )\n}\n"],"mappings":"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"}
|