Skip to content

Commit 8d3efdf

Browse files
snopokesnopoke
authored
Merge pull request #3234 from dimagi/sk/chat-widget-prettier
chore(chat-widget): enforce prettier via pre-commit and npm scripts
2 parents 643f77e + f3695e7 commit 8d3efdf

17 files changed

Lines changed: 416 additions & 394 deletions

‎.pre-commit-config.yaml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,12 @@ repos:
4646
files: ^assets/javascript/.*\.[jt]sx?$ # *.js, *.jsx, *.ts and *.tsx
4747
types: [ file ]
4848
args: [ --fix ]
49+
- repo: https://github.com/rbubley/mirrors-prettier
50+
rev: 'v3.8.3'
51+
hooks:
52+
- id: prettier
53+
files: ^components/chat_widget/src/.*\.(ts|tsx|css)$
54+
types: [ file ]
4955
- repo: https://github.com/allganize/ty-pre-commit
5056
# Ty version.
5157
rev: v0.0.32

‎components/chat_widget/.prettierignore‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Stencil-generated files
2+
src/components.d.ts
3+
src/components/**/readme.md
4+
5+
# Build output
6+
dist/
7+
www/
8+
loader/

‎components/chat_widget/.prettierrc.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"arrowParens": "avoid",
33
"bracketSpacing": true,
4-
"jsxBracketSameLine": false,
4+
"bracketSameLine": false,
55
"jsxSingleQuote": false,
66
"quoteProps": "consistent",
77
"printWidth": 180,

‎components/chat_widget/package-lock.json‎

Lines changed: 27 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/chat_widget/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@
3030
"prepublishOnly": "run-s build use:npmReadme",
3131
"postpublish": "npm run use:gitReadme",
3232
"type-check": "tsc --noEmit",
33-
"lint": "eslint --fix src"
33+
"lint": "eslint --fix src",
34+
"format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
35+
"format:check": "prettier --check \"src/**/*.{ts,tsx,css}\""
3436
},
3537
"dependencies": {
3638
"@stencil/core": "^4.27.0",
@@ -51,6 +53,7 @@
5153
"jest-cli": "^29.7.0",
5254
"npm-run-all": "^4.1.5",
5355
"postcss-import": "^16.1.0",
56+
"prettier": "^3.8.3",
5457
"puppeteer": "^24.2.0",
5558
"stencil-tailwind-plugin": "^2.0.5",
5659
"tailwindcss": "^4.1.12",

‎components/chat_widget/src/components/ocs-chat/icons.tsx‎

Lines changed: 58 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,41 @@
11
// eslint-disable-next-line @typescript-eslint/no-unused-vars
2-
import {h} from "@stencil/core";
2+
import { h } from '@stencil/core';
33

44
export const OcsWidgetAvatar = () => {
5-
return <svg width="24" height="24" viewBox="0 0 500 500" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
6-
<path
7-
d="M80.1777 149.487C73.7354 160.531 68.6208 172.445 65.0576 185.012C43.6097 196.458 29.0128 219.057 29.0127 245.065C29.0127 270.995 43.5207 293.535 64.8613 305.014C68.3612 317.586 73.409 329.512 79.7881 340.575C34.4248 332.436 2.20245e-05 292.771 0 245.065C0.000198788 197.223 34.6221 157.469 80.1777 149.487ZM419.821 149.487C465.377 157.469 500 197.223 500 245.065C500 292.771 465.575 332.436 420.211 340.575C426.59 329.512 431.638 317.586 435.138 305.014C456.479 293.535 470.987 270.995 470.987 245.065C470.987 219.056 456.39 196.458 434.941 185.012C431.378 172.445 426.264 160.532 419.821 149.487ZM259.868 16.4473C304.099 16.4473 341.297 46.5498 352.097 87.3848C340.566 81.9422 328.254 77.8819 315.375 75.4209C303.51 57.3742 283.08 45.46 259.868 45.46H253.289C230.975 45.4601 211.232 56.4698 199.197 73.3535C186.6 74.535 174.442 77.2268 162.906 81.248C175.656 43.5694 211.305 16.4474 253.289 16.4473H259.868Z"
8-
/>
9-
<path
10-
d="M286.185 72.6685C371.571 72.6686 440.789 141.888 440.789 227.274V263.458C440.789 348.844 371.57 418.064 286.185 418.064H213.815C128.43 418.064 59.2111 348.844 59.2109 263.458V227.274C59.211 141.888 128.43 72.6686 213.815 72.6685H286.185ZM213.815 105.263C142.963 105.263 85.5265 162.7 85.5264 233.552V256.579C85.5264 327.431 142.963 384.868 213.815 384.869H286.185C357.037 384.868 414.474 327.431 414.474 256.579V233.552C414.473 162.7 357.037 105.263 286.185 105.263H213.815Z"
11-
/>
12-
<rect x="289.475" y="184.808" width="61.9019" height="115.73" rx="30.951" />
13-
<rect x="161.184" y="184.808" width="61.9019" height="115.73" rx="30.951" />
14-
<path d="M325.658 483.553V414.58V401.316H148.027L325.658 483.553Z" />
15-
</svg>;
16-
}
5+
return (
6+
<svg width="24" height="24" viewBox="0 0 500 500" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
7+
<path d="M80.1777 149.487C73.7354 160.531 68.6208 172.445 65.0576 185.012C43.6097 196.458 29.0128 219.057 29.0127 245.065C29.0127 270.995 43.5207 293.535 64.8613 305.014C68.3612 317.586 73.409 329.512 79.7881 340.575C34.4248 332.436 2.20245e-05 292.771 0 245.065C0.000198788 197.223 34.6221 157.469 80.1777 149.487ZM419.821 149.487C465.377 157.469 500 197.223 500 245.065C500 292.771 465.575 332.436 420.211 340.575C426.59 329.512 431.638 317.586 435.138 305.014C456.479 293.535 470.987 270.995 470.987 245.065C470.987 219.056 456.39 196.458 434.941 185.012C431.378 172.445 426.264 160.532 419.821 149.487ZM259.868 16.4473C304.099 16.4473 341.297 46.5498 352.097 87.3848C340.566 81.9422 328.254 77.8819 315.375 75.4209C303.51 57.3742 283.08 45.46 259.868 45.46H253.289C230.975 45.4601 211.232 56.4698 199.197 73.3535C186.6 74.535 174.442 77.2268 162.906 81.248C175.656 43.5694 211.305 16.4474 253.289 16.4473H259.868Z" />
8+
<path d="M286.185 72.6685C371.571 72.6686 440.789 141.888 440.789 227.274V263.458C440.789 348.844 371.57 418.064 286.185 418.064H213.815C128.43 418.064 59.2111 348.844 59.2109 263.458V227.274C59.211 141.888 128.43 72.6686 213.815 72.6685H286.185ZM213.815 105.263C142.963 105.263 85.5265 162.7 85.5264 233.552V256.579C85.5264 327.431 142.963 384.868 213.815 384.869H286.185C357.037 384.868 414.474 327.431 414.474 256.579V233.552C414.473 162.7 357.037 105.263 286.185 105.263H213.815Z" />
9+
<rect x="289.475" y="184.808" width="61.9019" height="115.73" rx="30.951" />
10+
<rect x="161.184" y="184.808" width="61.9019" height="115.73" rx="30.951" />
11+
<path d="M325.658 483.553V414.58V401.316H148.027L325.658 483.553Z" />
12+
</svg>
13+
);
14+
};
1715

1816
/**
1917
* Heroicon: x-mark
2018
*/
2119
export const XMarkIcon = () => {
22-
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
23-
stroke="currentColor">
24-
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
25-
</svg>;
26-
}
20+
return (
21+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
22+
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
23+
</svg>
24+
);
25+
};
2726

2827
export const GripDotsVerticalIcon = () => {
2928
return (
30-
<svg
31-
xmlns="http://www.w3.org/2000/svg"
32-
fill="currentColor"
33-
viewBox="0 0 24 24"
34-
>
29+
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
3530
{/* Left column of dots */}
36-
<circle cx="8" cy="6" r="1.5"/>
37-
<circle cx="8" cy="12" r="1.5"/>
38-
<circle cx="8" cy="18" r="1.5"/>
31+
<circle cx="8" cy="6" r="1.5" />
32+
<circle cx="8" cy="12" r="1.5" />
33+
<circle cx="8" cy="18" r="1.5" />
3934

4035
{/* Right column of dots */}
41-
<circle cx="16" cy="6" r="1.5"/>
42-
<circle cx="16" cy="12" r="1.5"/>
43-
<circle cx="16" cy="18" r="1.5"/>
36+
<circle cx="16" cy="6" r="1.5" />
37+
<circle cx="16" cy="12" r="1.5" />
38+
<circle cx="16" cy="18" r="1.5" />
4439
</svg>
4540
);
4641
};
@@ -51,64 +46,75 @@ export const GripDotsVerticalIcon = () => {
5146
export const PlusWithCircleIcon = () => {
5247
return (
5348
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
54-
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
49+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
5550
</svg>
56-
)
57-
}
51+
);
52+
};
5853

5954
/**
6055
* Heroicon: arrows-pointing-out
6156
*/
6257
export const ArrowsPointingOutIcon = () => {
6358
return (
6459
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
65-
<path stroke-linecap="round" stroke-linejoin="round"
66-
d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"/>
60+
<path
61+
stroke-linecap="round"
62+
stroke-linejoin="round"
63+
d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
64+
/>
6765
</svg>
68-
)
69-
}
66+
);
67+
};
7068

7169
/**
7270
* Heroicon: arrows-pointing-in
7371
*/
7472
export const ArrowsPointingInIcon = () => {
7573
return (
7674
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
77-
<path stroke-linecap="round" stroke-linejoin="round"
78-
d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M15 9h4.5M15 9V4.5M15 9l5.25-5.25M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25"/>
75+
<path
76+
stroke-linecap="round"
77+
stroke-linejoin="round"
78+
d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M15 9h4.5M15 9V4.5M15 9l5.25-5.25M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25"
79+
/>
7980
</svg>
80-
)
81-
}
81+
);
82+
};
8283

8384
/**
8485
* Heroicon: paper-clip
8586
*/
8687
export const PaperClipIcon = () => {
8788
return (
8889
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
89-
<path stroke-linecap="round" stroke-linejoin="round"
90-
d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13"/>
90+
<path
91+
stroke-linecap="round"
92+
stroke-linejoin="round"
93+
d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13"
94+
/>
9195
</svg>
92-
)
93-
}
96+
);
97+
};
9498

9599
/**
96100
* Heroicon: document-check
97101
*/
98102
export const CheckDocumentIcon = () => {
99103
return (
100104
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
101-
<path stroke-linecap="round" stroke-linejoin="round"
102-
d="M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12"/>
105+
<path
106+
stroke-linecap="round"
107+
stroke-linejoin="round"
108+
d="M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12"
109+
/>
103110
</svg>
104-
105-
)
106-
}
111+
);
112+
};
107113

108114
export const XIcon = () => {
109115
return (
110116
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
111-
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
117+
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
112118
</svg>
113-
)
114-
}
119+
);
120+
};

‎components/chat_widget/src/components/ocs-chat/ocs-chat.css‎

Lines changed: 9 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -207,28 +207,12 @@
207207
--success-text-color: #10b981; /* Complementary green to existing blue palette */
208208

209209
/* Markdown code variables */
210-
--code-bg-user-color: color-mix(
211-
in srgb,
212-
var(--message-user-bg-color) 80%,
213-
white 20%
214-
);
210+
--code-bg-user-color: color-mix(in srgb, var(--message-user-bg-color) 80%, white 20%);
215211
--code-text-user-color: var(--message-user-text-color);
216-
--code-border-user-color: color-mix(
217-
in srgb,
218-
var(--message-user-bg-color) 90%,
219-
black 10%
220-
);
221-
--code-bg-assistant-color: color-mix(
222-
in srgb,
223-
var(--message-assistant-bg-color) 50%,
224-
white 50%
225-
);
212+
--code-border-user-color: color-mix(in srgb, var(--message-user-bg-color) 90%, black 10%);
213+
--code-bg-assistant-color: color-mix(in srgb, var(--message-assistant-bg-color) 50%, white 50%);
226214
--code-text-assistant-color: var(--message-assistant-text-color);
227-
--code-border-assistant-color: color-mix(
228-
in srgb,
229-
var(--message-assistant-bg-color) 90%,
230-
black 10%
231-
);
215+
--code-border-assistant-color: color-mix(in srgb, var(--message-assistant-bg-color) 90%, black 10%);
232216

233217
--confirmation-overlay-bg-color: rgba(0, 0, 0, 0.5);
234218
--confirmation-dialog-bg-color: var(--chat-window-bg-color);
@@ -247,15 +231,9 @@
247231

248232
/* File upload variables */
249233
--file-attachment-button-bg-color: transparent;
250-
--file-attachment-button-bg-hover-color: var(
251-
--header-button-bg-hover-color
252-
); /* #f3f4f6 */
253-
--file-attachment-button-text-color: var(
254-
--header-button-text-color
255-
); /* #6b7280 */
256-
--file-attachment-button-text-disabled-color: var(
257-
--send-button-text-disabled-color
258-
); /* #6b7280 */
234+
--file-attachment-button-bg-hover-color: var(--header-button-bg-hover-color); /* #f3f4f6 */
235+
--file-attachment-button-text-color: var(--header-button-text-color); /* #6b7280 */
236+
--file-attachment-button-text-disabled-color: var(--send-button-text-disabled-color); /* #6b7280 */
259237

260238
/* Selected files variables */
261239
--selected-files-bg-color: var(--chat-window-bg-color); /* transparent */
@@ -266,9 +244,7 @@
266244

267245
/* Selected file text variables */
268246
--selected-file-font-size: var(--chat-window-font-size-sm);
269-
--selected-file-name-color: var(
270-
--message-assistant-text-color
271-
); /* #1f2937 */
247+
--selected-file-name-color: var(--message-assistant-text-color); /* #1f2937 */
272248
--selected-file-size-color: var(--input-placeholder-color); /* #6b7280 */
273249

274250
/* Selected file icon variables */
@@ -285,7 +261,7 @@
285261
bottom: 30px;
286262
}
287263

288-
:host([mode="kiosk"]) {
264+
:host([mode='kiosk']) {
289265
position: absolute;
290266
inset: 0;
291267
right: auto;

0 commit comments

Comments
 (0)