@nyaruka/temba-components 0.164.0 → 0.166.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.
Files changed (55) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/DEV_DATA.md +11 -11
  3. package/README.md +4 -4
  4. package/TEST_OPTIMIZATION.md +8 -11
  5. package/dist/locales/es.js +4 -0
  6. package/dist/locales/es.js.map +1 -1
  7. package/dist/locales/fr.js +4 -0
  8. package/dist/locales/fr.js.map +1 -1
  9. package/dist/locales/pt.js +4 -0
  10. package/dist/locales/pt.js.map +1 -1
  11. package/dist/static/svg/index.svg +1 -1
  12. package/dist/temba-components.js +1983 -865
  13. package/dist/temba-components.js.map +1 -1
  14. package/orca/setup.sh +2 -2
  15. package/package.json +13 -18
  16. package/scripts/dev-data-sync.mjs +4 -4
  17. package/src/Icons.ts +3 -2
  18. package/src/display/Chat.ts +232 -18
  19. package/src/display/ProgressBar.ts +15 -2
  20. package/src/form/Compose.ts +31 -1
  21. package/src/form/ContactSearch.ts +229 -126
  22. package/src/interfaces.ts +73 -0
  23. package/src/layout/Card.ts +25 -0
  24. package/src/layout/CardLayout.ts +3 -3
  25. package/src/layout/HeaderBar.ts +4 -1
  26. package/src/list/BroadcastList.ts +912 -0
  27. package/src/list/ContentList.ts +46 -10
  28. package/src/list/FieldList.ts +1057 -0
  29. package/src/list/NotificationList.ts +131 -21
  30. package/src/list/SortableList.ts +7 -2
  31. package/src/list/TembaList.ts +19 -5
  32. package/src/list/TembaMenu.ts +47 -46
  33. package/src/live/CampaignEvents.ts +33 -19
  34. package/src/live/ContactChat.ts +190 -18
  35. package/src/live/ContactDetails.ts +20 -13
  36. package/src/live/ContactFieldEditor.ts +7 -3
  37. package/src/live/ContactStoreElement.ts +3 -1
  38. package/src/live/ContactTimeline.ts +28 -7
  39. package/src/live/Realtime.ts +133 -0
  40. package/src/live/SocketService.ts +24 -0
  41. package/src/locales/es.ts +4 -0
  42. package/src/locales/fr.ts +4 -0
  43. package/src/locales/pt.ts +4 -0
  44. package/src/store/Store.ts +12 -0
  45. package/src/utils.ts +4 -0
  46. package/static/svg/index.svg +1 -1
  47. package/static/svg/packs/2-temba/star-filled.svg +3 -0
  48. package/static/svg/work/traced/star-filled.svg +1 -0
  49. package/static/svg/work/used/star-filled.svg +3 -0
  50. package/stress-test.js +3 -3
  51. package/temba-modules.ts +4 -0
  52. package/web-test-runner.config.mjs +1 -1
  53. package/xliff/es.xlf +12 -0
  54. package/xliff/fr.xlf +12 -0
  55. package/xliff/pt.xlf +12 -0
package/CHANGELOG.md CHANGED
@@ -4,8 +4,28 @@ All notable changes to this project will be documented in this file. Dates are d
4
4
 
5
5
  Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
6
6
 
7
+ #### [v0.166.0](https://github.com/nyaruka/temba-components/compare/v0.165.0...v0.166.0)
8
+
9
+ - Add typing indicators to contact chat [`#1064`](https://github.com/nyaruka/temba-components/pull/1064)
10
+ - Consume realtime notifications from the socket instead of polling [`#1063`](https://github.com/nyaruka/temba-components/pull/1063)
11
+
12
+ #### [v0.165.0](https://github.com/nyaruka/temba-components/compare/v0.164.0...v0.165.0)
13
+
14
+ > 21 July 2026
15
+
16
+ - Add temba-field-list for the contact fields list page [`#1061`](https://github.com/nyaruka/temba-components/pull/1061)
17
+ - Initialize deep-linked search, reflect list state in URL, and sync content menu search [`#1060`](https://github.com/nyaruka/temba-components/pull/1060)
18
+ - Add temba-broadcast-list for the broadcast list pages [`#1059`](https://github.com/nyaruka/temba-components/pull/1059)
19
+ - Switch from pnpm to bun for dependency management [`#1050`](https://github.com/nyaruka/temba-components/pull/1050)
20
+ - Refine fixed-mode exclusion reconciliation in temba-contact-search [`#1058`](https://github.com/nyaruka/temba-components/pull/1058)
21
+ - Don't subscribe to mismatched ticket history channels during contact switches [`#1056`](https://github.com/nyaruka/temba-components/pull/1056)
22
+ - Add fixed mode with interrupt confirmation to temba-contact-search [`#1054`](https://github.com/nyaruka/temba-components/pull/1054)
23
+ - Mobile nav and chat-first layout fixes [`#1051`](https://github.com/nyaruka/temba-components/pull/1051)
24
+
7
25
  #### [v0.164.0](https://github.com/nyaruka/temba-components/compare/v0.163.0...v0.164.0)
8
26
 
27
+ > 15 July 2026
28
+
9
29
  - Add temba-campaign-events for the campaign read page [`#1048`](https://github.com/nyaruka/temba-components/pull/1048)
10
30
  - Add chat-first card layout for contact pages [`#1049`](https://github.com/nyaruka/temba-components/pull/1049)
11
31
  - Add temba-campaign-list content list component [`#1045`](https://github.com/nyaruka/temba-components/pull/1045)
package/DEV_DATA.md CHANGED
@@ -25,37 +25,37 @@ When working with the Temba Components development server, demo flows and API da
25
25
 
26
26
  ## Available Commands
27
27
 
28
- ### `pnpm dev-data:status`
28
+ ### `bun run dev-data:status`
29
29
 
30
30
  Shows the current state of development data:
31
31
 
32
32
  ```bash
33
- pnpm dev-data:status
33
+ bun run dev-data:status
34
34
  ```
35
35
 
36
- ### `pnpm dev-data:copy` / `pnpm dev-data:sync`
36
+ ### `bun run dev-data:copy` / `bun run dev-data:sync`
37
37
 
38
38
  Copies changes from development directory back to the project:
39
39
 
40
40
  ```bash
41
- pnpm dev-data:copy
41
+ bun run dev-data:copy
42
42
  ```
43
43
 
44
44
  This is useful when you want to commit your development changes.
45
45
 
46
- ### `pnpm dev-data:reset` / `pnpm dev-data:wipe`
46
+ ### `bun run dev-data:reset` / `bun run dev-data:wipe`
47
47
 
48
48
  Wipes development data and restores from project defaults:
49
49
 
50
50
  ```bash
51
- pnpm dev-data:reset
51
+ bun run dev-data:reset
52
52
  ```
53
53
 
54
54
  This is useful when you want to start fresh or undo experimental changes.
55
55
 
56
56
  ## Typical Workflow
57
57
 
58
- 1. **Start Development**: `pnpm start`
58
+ 1. **Start Development**: `bun run start`
59
59
 
60
60
  - Server automatically sets up external data directory with defaults
61
61
 
@@ -63,15 +63,15 @@ This is useful when you want to start fresh or undo experimental changes.
63
63
 
64
64
  - Changes are saved to `/tmp/temba-dev-data/`
65
65
 
66
- 3. **Check Status**: `pnpm dev-data:status`
66
+ 3. **Check Status**: `bun run dev-data:status`
67
67
 
68
68
  - See what files are in development vs project directories
69
69
 
70
- 4. **Commit Changes** (if desired): `pnpm dev-data:copy`
70
+ 4. **Commit Changes** (if desired): `bun run dev-data:copy`
71
71
 
72
72
  - Copies your changes back to the project for committing
73
73
 
74
- 5. **Reset When Needed**: `pnpm dev-data:reset`
74
+ 5. **Reset When Needed**: `bun run dev-data:reset`
75
75
  - Start fresh with default data
76
76
 
77
77
  ## File Locations
@@ -84,6 +84,6 @@ This is useful when you want to start fresh or undo experimental changes.
84
84
  ## Notes
85
85
 
86
86
  - Development data doesn't survive container rebuilds
87
- - Always use `pnpm dev-data:copy` before committing if you want to keep changes
87
+ - Always use `bun run dev-data:copy` before committing if you want to keep changes
88
88
  - The server prioritizes development files over project defaults when both exist
89
89
  - You can manually edit files in `/tmp/temba-dev-data/` if needed
package/README.md CHANGED
@@ -22,10 +22,10 @@ Some of the components:
22
22
 
23
23
  ## Install
24
24
 
25
- We use pnpm, so you'll want to install with that if you care about our lock file.
25
+ We use [bun](https://bun.com), so you'll want to install with that if you care about our lock file.
26
26
 
27
27
  ```bash
28
- % pnpm install
28
+ % bun install
29
29
  ```
30
30
 
31
31
  ## Demo
@@ -33,7 +33,7 @@ We use pnpm, so you'll want to install with that if you care about our lock file
33
33
  To view the interactive demo, use start.
34
34
 
35
35
  ```bash
36
- % pnpm start
36
+ % bun run start
37
37
  ```
38
38
 
39
39
  ## Testing
@@ -43,7 +43,7 @@ comparision under [/screenshots](screenshots/truth). Running tests requires that
43
43
  installed.
44
44
 
45
45
  ```bash
46
- % pnpm test
46
+ % bun run test
47
47
  ```
48
48
 
49
49
  ## Usage
@@ -7,22 +7,19 @@ This document outlines strategies for running tests efficiently and optimizing d
7
7
  ### Fast Test Execution
8
8
  ```bash
9
9
  # Run tests in fast mode (skips network idle waits)
10
- pnpm test:fast
11
-
12
- # Run only unit tests (excludes visual regression tests)
13
- pnpm test:unit
10
+ bun run test:fast
14
11
 
15
12
  # Watch mode for iterative development
16
- pnpm test:watch
13
+ bun run test:watch
17
14
  ```
18
15
 
19
16
  ### Coverage and Validation
20
17
  ```bash
21
18
  # Full test suite with coverage
22
- pnpm test --coverage
19
+ bun run test --coverage
23
20
 
24
21
  # Complete validation (formatting, build, tests)
25
- pnpm validate
22
+ bun run validate
26
23
  ```
27
24
 
28
25
  ## Test Categories
@@ -95,10 +92,10 @@ await assertScreenshot('select/open', getClipWithOptions(select));
95
92
  ### Individual Test Files
96
93
  ```bash
97
94
  # Run specific test file
98
- pnpm test test/temba-select.test.ts
95
+ bun run test test/temba-select.test.ts
99
96
 
100
97
  # Run multiple specific files
101
- pnpm test test/temba-select.test.ts test/temba-list.test.ts
98
+ bun run test test/temba-select.test.ts test/temba-list.test.ts
102
99
  ```
103
100
 
104
101
  ### Isolating Tests During Development
@@ -135,10 +132,10 @@ Monitor test execution times to identify slow tests:
135
132
 
136
133
  ```bash
137
134
  # Time full test suite
138
- time pnpm test
135
+ time bun run test
139
136
 
140
137
  # Profile individual test files
141
- time pnpm test test/specific-file.test.ts
138
+ time bun run test test/specific-file.test.ts
142
139
  ```
143
140
 
144
141
  ### Common Performance Issues
@@ -7,6 +7,10 @@ export const templates = {
7
7
  's73b4d70c02f4b4e0': `No options`,
8
8
  'sbc913d7dc0f33877': `to add`,
9
9
  's81f17cfc89a04338': `Interrupt flow`,
10
+ 's122d4de68bcfcdf4': `It's okay to restart`,
11
+ 's3eb2567092b4d7c1': `from the beginning`,
12
+ 's28f37776b3901438': `It's okay to interrupt`,
13
+ 's6838d20b10f7512a': `and start this one`,
10
14
  's8f02e3a18ffc083a': `Are not currently in a flow`,
11
15
  's638236250662c6b3': `Have sent a message in the last`,
12
16
  's4788ee206c4570c7': `Have not started this flow in the last 90 days`,
@@ -1 +1 @@
1
- {"version":3,"file":"es.js","sourceRoot":"","sources":["../../../src/locales/es.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,4CAA4C;IACvE,mBAAmB,EAAE,YAAY;IACjC,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,gBAAgB;IACrC,mBAAmB,EAAE,6BAA6B;IAClD,mBAAmB,EAAE,iCAAiC;IACtD,mBAAmB,EAAE,gDAAgD;IACrE,mBAAmB,EAAE,QAAQ;CACxB,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 'scf1453991c986b25': `Tab para completar, enter para seleccionar`,\n's73b4d70c02f4b4e0': `No options`,\n'sbc913d7dc0f33877': `to add`,\n's81f17cfc89a04338': `Interrupt flow`,\n's8f02e3a18ffc083a': `Are not currently in a flow`,\n's638236250662c6b3': `Have sent a message in the last`,\n's4788ee206c4570c7': `Have not started this flow in the last 90 days`,\n'sea4f08110bb8f15d': `Remove`,\n };\n "]}
1
+ {"version":3,"file":"es.js","sourceRoot":"","sources":["../../../src/locales/es.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,4CAA4C;IACvE,mBAAmB,EAAE,YAAY;IACjC,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,gBAAgB;IACrC,mBAAmB,EAAE,sBAAsB;IAC3C,mBAAmB,EAAE,oBAAoB;IACzC,mBAAmB,EAAE,wBAAwB;IAC7C,mBAAmB,EAAE,oBAAoB;IACzC,mBAAmB,EAAE,6BAA6B;IAClD,mBAAmB,EAAE,iCAAiC;IACtD,mBAAmB,EAAE,gDAAgD;IACrE,mBAAmB,EAAE,QAAQ;CACxB,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 'scf1453991c986b25': `Tab para completar, enter para seleccionar`,\n's73b4d70c02f4b4e0': `No options`,\n'sbc913d7dc0f33877': `to add`,\n's81f17cfc89a04338': `Interrupt flow`,\n's122d4de68bcfcdf4': `It's okay to restart`,\n's3eb2567092b4d7c1': `from the beginning`,\n's28f37776b3901438': `It's okay to interrupt`,\n's6838d20b10f7512a': `and start this one`,\n's8f02e3a18ffc083a': `Are not currently in a flow`,\n's638236250662c6b3': `Have sent a message in the last`,\n's4788ee206c4570c7': `Have not started this flow in the last 90 days`,\n'sea4f08110bb8f15d': `Remove`,\n };\n "]}
@@ -7,6 +7,10 @@ export const templates = {
7
7
  'scf1453991c986b25': `Tab to complete, enter to select`,
8
8
  'sbc913d7dc0f33877': `to add`,
9
9
  's81f17cfc89a04338': `Interrupt flow`,
10
+ 's122d4de68bcfcdf4': `It's okay to restart`,
11
+ 's3eb2567092b4d7c1': `from the beginning`,
12
+ 's28f37776b3901438': `It's okay to interrupt`,
13
+ 's6838d20b10f7512a': `and start this one`,
10
14
  's8f02e3a18ffc083a': `Are not currently in a flow`,
11
15
  's638236250662c6b3': `Have sent a message in the last`,
12
16
  's4788ee206c4570c7': `Have not started this flow in the last 90 days`,
@@ -1 +1 @@
1
- {"version":3,"file":"fr.js","sourceRoot":"","sources":["../../../src/locales/fr.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,YAAY;IACvC,mBAAmB,EAAE,kCAAkC;IACvD,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,gBAAgB;IACrC,mBAAmB,EAAE,6BAA6B;IAClD,mBAAmB,EAAE,iCAAiC;IACtD,mBAAmB,EAAE,gDAAgD;IACrE,mBAAmB,EAAE,QAAQ;CACxB,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 's73b4d70c02f4b4e0': `No options`,\n'scf1453991c986b25': `Tab to complete, enter to select`,\n'sbc913d7dc0f33877': `to add`,\n's81f17cfc89a04338': `Interrupt flow`,\n's8f02e3a18ffc083a': `Are not currently in a flow`,\n's638236250662c6b3': `Have sent a message in the last`,\n's4788ee206c4570c7': `Have not started this flow in the last 90 days`,\n'sea4f08110bb8f15d': `Remove`,\n };\n "]}
1
+ {"version":3,"file":"fr.js","sourceRoot":"","sources":["../../../src/locales/fr.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,YAAY;IACvC,mBAAmB,EAAE,kCAAkC;IACvD,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,gBAAgB;IACrC,mBAAmB,EAAE,sBAAsB;IAC3C,mBAAmB,EAAE,oBAAoB;IACzC,mBAAmB,EAAE,wBAAwB;IAC7C,mBAAmB,EAAE,oBAAoB;IACzC,mBAAmB,EAAE,6BAA6B;IAClD,mBAAmB,EAAE,iCAAiC;IACtD,mBAAmB,EAAE,gDAAgD;IACrE,mBAAmB,EAAE,QAAQ;CACxB,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 's73b4d70c02f4b4e0': `No options`,\n'scf1453991c986b25': `Tab to complete, enter to select`,\n'sbc913d7dc0f33877': `to add`,\n's81f17cfc89a04338': `Interrupt flow`,\n's122d4de68bcfcdf4': `It's okay to restart`,\n's3eb2567092b4d7c1': `from the beginning`,\n's28f37776b3901438': `It's okay to interrupt`,\n's6838d20b10f7512a': `and start this one`,\n's8f02e3a18ffc083a': `Are not currently in a flow`,\n's638236250662c6b3': `Have sent a message in the last`,\n's4788ee206c4570c7': `Have not started this flow in the last 90 days`,\n'sea4f08110bb8f15d': `Remove`,\n };\n "]}
@@ -7,6 +7,10 @@ export const templates = {
7
7
  'scf1453991c986b25': `Tab to complete, enter to select`,
8
8
  'sbc913d7dc0f33877': `to add`,
9
9
  's81f17cfc89a04338': `Interrupt flow`,
10
+ 's122d4de68bcfcdf4': `It's okay to restart`,
11
+ 's3eb2567092b4d7c1': `from the beginning`,
12
+ 's28f37776b3901438': `It's okay to interrupt`,
13
+ 's6838d20b10f7512a': `and start this one`,
10
14
  's8f02e3a18ffc083a': `Are not currently in a flow`,
11
15
  's638236250662c6b3': `Have sent a message in the last`,
12
16
  's4788ee206c4570c7': `Have not started this flow in the last 90 days`,
@@ -1 +1 @@
1
- {"version":3,"file":"pt.js","sourceRoot":"","sources":["../../../src/locales/pt.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,YAAY;IACvC,mBAAmB,EAAE,kCAAkC;IACvD,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,gBAAgB;IACrC,mBAAmB,EAAE,6BAA6B;IAClD,mBAAmB,EAAE,iCAAiC;IACtD,mBAAmB,EAAE,gDAAgD;IACrE,mBAAmB,EAAE,QAAQ;CACxB,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 's73b4d70c02f4b4e0': `No options`,\n'scf1453991c986b25': `Tab to complete, enter to select`,\n'sbc913d7dc0f33877': `to add`,\n's81f17cfc89a04338': `Interrupt flow`,\n's8f02e3a18ffc083a': `Are not currently in a flow`,\n's638236250662c6b3': `Have sent a message in the last`,\n's4788ee206c4570c7': `Have not started this flow in the last 90 days`,\n'sea4f08110bb8f15d': `Remove`,\n };\n "]}
1
+ {"version":3,"file":"pt.js","sourceRoot":"","sources":["../../../src/locales/pt.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,YAAY;IACvC,mBAAmB,EAAE,kCAAkC;IACvD,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,gBAAgB;IACrC,mBAAmB,EAAE,sBAAsB;IAC3C,mBAAmB,EAAE,oBAAoB;IACzC,mBAAmB,EAAE,wBAAwB;IAC7C,mBAAmB,EAAE,oBAAoB;IACzC,mBAAmB,EAAE,6BAA6B;IAClD,mBAAmB,EAAE,iCAAiC;IACtD,mBAAmB,EAAE,gDAAgD;IACrE,mBAAmB,EAAE,QAAQ;CACxB,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 's73b4d70c02f4b4e0': `No options`,\n'scf1453991c986b25': `Tab to complete, enter to select`,\n'sbc913d7dc0f33877': `to add`,\n's81f17cfc89a04338': `Interrupt flow`,\n's122d4de68bcfcdf4': `It's okay to restart`,\n's3eb2567092b4d7c1': `from the beginning`,\n's28f37776b3901438': `It's okay to interrupt`,\n's6838d20b10f7512a': `and start this one`,\n's8f02e3a18ffc083a': `Are not currently in a flow`,\n's638236250662c6b3': `Have sent a message in the last`,\n's4788ee206c4570c7': `Have not started this flow in the last 90 days`,\n'sea4f08110bb8f15d': `Remove`,\n };\n "]}