@folio-agent/widget 0.1.0 → 0.2.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/styles.d.ts +1 -1
- package/dist/styles.js +26 -17
- package/package.json +3 -2
package/dist/styles.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const WIDGET_STYLES = "\n :host {\n all: initial;\n font-family: var(--folio-agent-font,
|
|
1
|
+
export declare const WIDGET_STYLES = "\n :host {\n all: initial;\n color: inherit;\n color-scheme: inherit;\n font-family: var(--folio-agent-font, inherit);\n }\n .toggle {\n position: fixed;\n right: 20px;\n bottom: 20px;\n width: 56px;\n height: 56px;\n border-radius: 50%;\n border: none;\n background: var(--folio-agent-accent, CanvasText);\n color: var(--folio-agent-accent-contrast, Canvas);\n font-size: 24px;\n cursor: pointer;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);\n z-index: 2147483000;\n }\n .panel {\n position: fixed;\n right: 20px;\n bottom: 88px;\n width: 320px;\n max-height: 420px;\n display: flex;\n flex-direction: column;\n background: var(--folio-agent-surface, Canvas);\n border-radius: 12px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\n overflow: hidden;\n z-index: 2147483000;\n }\n .panel[hidden] {\n display: none;\n }\n .messages {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n font-size: 14px;\n line-height: 1.6;\n color: var(--folio-agent-text, CanvasText);\n }\n .message {\n white-space: pre-wrap;\n }\n .message.assistant {\n align-self: flex-start;\n background: color-mix(in srgb, CanvasText 8%, Canvas);\n border: 1px solid color-mix(in srgb, CanvasText 16%, Canvas);\n border-radius: 8px;\n padding: 10px 14px;\n }\n .message.user {\n align-self: flex-end;\n background: color-mix(in srgb, CanvasText 14%, Canvas);\n border: 1px solid color-mix(in srgb, CanvasText 24%, Canvas);\n border-radius: 8px;\n padding: 10px 14px;\n }\n .disclosure {\n font-size: 12px;\n color: var(--folio-agent-muted, color-mix(in srgb, CanvasText 55%, Canvas));\n padding: 0 0 4px;\n }\n .disclosure a {\n color: #2563eb;\n }\n form {\n display: flex;\n border-top: 1px solid color-mix(in srgb, CanvasText 16%, Canvas);\n }\n input {\n flex: 1;\n border: none;\n background: transparent;\n color: inherit;\n padding: 10px;\n font-size: 14px;\n }\n input:focus {\n outline: none;\n }\n button[type=\"submit\"] {\n border: none;\n background: none;\n padding: 0 14px;\n cursor: pointer;\n color: var(--folio-agent-accent, CanvasText);\n font-weight: 600;\n }\n";
|
package/dist/styles.js
CHANGED
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
// テーマ注入: 利用側サイトのグローバルCSSで
|
|
2
2
|
// folio-agent-widget { --folio-agent-accent: #...; }
|
|
3
3
|
// のようにカスタムプロパティを指定するとShadow DOM内に継承されテーマが反映される。
|
|
4
|
-
//
|
|
4
|
+
// 未指定の場合は各プロパティがホスト配色（CSSシステムカラー）から導出した値を使い、
|
|
5
|
+
// サイトのライト/ダークいずれの配色にも自動で馴染む。
|
|
5
6
|
export const WIDGET_STYLES = `
|
|
6
7
|
:host {
|
|
7
8
|
all: initial;
|
|
8
|
-
|
|
9
|
+
color: inherit;
|
|
10
|
+
color-scheme: inherit;
|
|
11
|
+
font-family: var(--folio-agent-font, inherit);
|
|
9
12
|
}
|
|
10
13
|
.toggle {
|
|
11
14
|
position: fixed;
|
|
@@ -15,8 +18,8 @@ export const WIDGET_STYLES = `
|
|
|
15
18
|
height: 56px;
|
|
16
19
|
border-radius: 50%;
|
|
17
20
|
border: none;
|
|
18
|
-
background: var(--folio-agent-accent,
|
|
19
|
-
color: var(--folio-agent-accent-contrast,
|
|
21
|
+
background: var(--folio-agent-accent, CanvasText);
|
|
22
|
+
color: var(--folio-agent-accent-contrast, Canvas);
|
|
20
23
|
font-size: 24px;
|
|
21
24
|
cursor: pointer;
|
|
22
25
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
|
|
@@ -30,7 +33,7 @@ export const WIDGET_STYLES = `
|
|
|
30
33
|
max-height: 420px;
|
|
31
34
|
display: flex;
|
|
32
35
|
flex-direction: column;
|
|
33
|
-
background: var(--folio-agent-surface,
|
|
36
|
+
background: var(--folio-agent-surface, Canvas);
|
|
34
37
|
border-radius: 12px;
|
|
35
38
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
|
36
39
|
overflow: hidden;
|
|
@@ -42,30 +45,34 @@ export const WIDGET_STYLES = `
|
|
|
42
45
|
.messages {
|
|
43
46
|
flex: 1;
|
|
44
47
|
overflow-y: auto;
|
|
45
|
-
padding:
|
|
48
|
+
padding: 16px;
|
|
46
49
|
display: flex;
|
|
47
50
|
flex-direction: column;
|
|
48
|
-
gap:
|
|
51
|
+
gap: 10px;
|
|
49
52
|
font-size: 14px;
|
|
50
|
-
line-height: 1.
|
|
51
|
-
color: var(--folio-agent-text,
|
|
53
|
+
line-height: 1.6;
|
|
54
|
+
color: var(--folio-agent-text, CanvasText);
|
|
55
|
+
}
|
|
56
|
+
.message {
|
|
57
|
+
white-space: pre-wrap;
|
|
52
58
|
}
|
|
53
59
|
.message.assistant {
|
|
54
60
|
align-self: flex-start;
|
|
55
|
-
background:
|
|
61
|
+
background: color-mix(in srgb, CanvasText 8%, Canvas);
|
|
62
|
+
border: 1px solid color-mix(in srgb, CanvasText 16%, Canvas);
|
|
56
63
|
border-radius: 8px;
|
|
57
|
-
padding:
|
|
64
|
+
padding: 10px 14px;
|
|
58
65
|
}
|
|
59
66
|
.message.user {
|
|
60
67
|
align-self: flex-end;
|
|
61
|
-
background:
|
|
62
|
-
|
|
68
|
+
background: color-mix(in srgb, CanvasText 14%, Canvas);
|
|
69
|
+
border: 1px solid color-mix(in srgb, CanvasText 24%, Canvas);
|
|
63
70
|
border-radius: 8px;
|
|
64
|
-
padding:
|
|
71
|
+
padding: 10px 14px;
|
|
65
72
|
}
|
|
66
73
|
.disclosure {
|
|
67
74
|
font-size: 12px;
|
|
68
|
-
color: var(--folio-agent-muted,
|
|
75
|
+
color: var(--folio-agent-muted, color-mix(in srgb, CanvasText 55%, Canvas));
|
|
69
76
|
padding: 0 0 4px;
|
|
70
77
|
}
|
|
71
78
|
.disclosure a {
|
|
@@ -73,11 +80,13 @@ export const WIDGET_STYLES = `
|
|
|
73
80
|
}
|
|
74
81
|
form {
|
|
75
82
|
display: flex;
|
|
76
|
-
border-top: 1px solid
|
|
83
|
+
border-top: 1px solid color-mix(in srgb, CanvasText 16%, Canvas);
|
|
77
84
|
}
|
|
78
85
|
input {
|
|
79
86
|
flex: 1;
|
|
80
87
|
border: none;
|
|
88
|
+
background: transparent;
|
|
89
|
+
color: inherit;
|
|
81
90
|
padding: 10px;
|
|
82
91
|
font-size: 14px;
|
|
83
92
|
}
|
|
@@ -89,7 +98,7 @@ export const WIDGET_STYLES = `
|
|
|
89
98
|
background: none;
|
|
90
99
|
padding: 0 14px;
|
|
91
100
|
cursor: pointer;
|
|
92
|
-
color: var(--folio-agent-accent,
|
|
101
|
+
color: var(--folio-agent-accent, CanvasText);
|
|
93
102
|
font-weight: 600;
|
|
94
103
|
}
|
|
95
104
|
`;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@folio-agent/widget",
|
|
3
|
-
"version": "0.1
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Framework-agnostic reception chat widget (silent until clicked)",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -28,7 +28,8 @@
|
|
|
28
28
|
"access": "public"
|
|
29
29
|
},
|
|
30
30
|
"scripts": {
|
|
31
|
-
"build": "tsc -b"
|
|
31
|
+
"build": "tsc -b",
|
|
32
|
+
"prepublishOnly": "tsc -b --force"
|
|
32
33
|
},
|
|
33
34
|
"devDependencies": {
|
|
34
35
|
"happy-dom": "^20.10.6"
|