@truedat/ai 8.4.9 → 8.5.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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@truedat/ai",
3
- "version": "8.4.9",
3
+ "version": "8.5.0",
4
4
  "description": "Truedat Web Artificial Intelligence package",
5
5
  "sideEffects": false,
6
6
  "module": "src/index.js",
@@ -80,5 +80,5 @@
80
80
  "semantic-ui-react": "^3.0.0-beta.2",
81
81
  "swr": "^2.3.3"
82
82
  },
83
- "gitHead": "9fd4bd2126a33342009194c8ae1829cd3c617a48"
83
+ "gitHead": "c09665b24b178f5002c4f1d93ac4ce81e16bc62f"
84
84
  }
@@ -10,14 +10,19 @@ export const providerTypes = [
10
10
  "azure_openai",
11
11
  "bedrock_claude",
12
12
  "gemini",
13
+ "anthropic",
13
14
  ];
14
15
 
16
+ export const agentTypes = ["fast", "high", "thinking"];
17
+
15
18
  export const useResourceTypeOptions = () =>
16
19
  useOptions(resourceTypes, "resourceMappings.resourceType");
17
20
  export const usePromptResourceTypeOptions = () =>
18
21
  useOptions(promptResourceTypes, "resourceMappings.resourceType");
19
22
  export const useProviderTypeOptions = () =>
20
23
  useOptions(providerTypes, "providers.type");
24
+ export const useAgentTypeOptions = () =>
25
+ useOptions(agentTypes, "providers.agent");
21
26
 
22
27
  const useOptions = (list, formatPrefix) => {
23
28
  const { formatMessage } = useIntl();
@@ -12,12 +12,13 @@ import {
12
12
  } from "semantic-ui-react";
13
13
  import { FormProvider, useForm, Controller } from "react-hook-form";
14
14
  import { ConfirmModal } from "@truedat/core/components";
15
- import { useProviderTypeOptions } from "../constants";
15
+ import { useAgentTypeOptions, useProviderTypeOptions } from "../constants";
16
16
  import {
17
17
  Openai,
18
18
  AzureOpenai,
19
19
  BedrockClaude,
20
20
  Gemini,
21
+ Anthropic,
21
22
  } from "./providerProperties";
22
23
 
23
24
  const providerPropertiesComponents = {
@@ -25,10 +26,12 @@ const providerPropertiesComponents = {
25
26
  azure_openai: <AzureOpenai />,
26
27
  bedrock_claude: <BedrockClaude />,
27
28
  gemini: <Gemini />,
29
+ anthropic: <Anthropic />,
28
30
  };
29
31
 
30
32
  export default function ProviderEditor({
31
33
  selectedProvider,
34
+ providers,
32
35
  onSubmit,
33
36
  onCancel,
34
37
  onDelete,
@@ -37,6 +40,17 @@ export default function ProviderEditor({
37
40
  }) {
38
41
  const { formatMessage } = useIntl();
39
42
  const typeOptions = useProviderTypeOptions();
43
+ const allAgentOptions = useAgentTypeOptions();
44
+
45
+ const usedAgents = _.flow(
46
+ _.filter((p) => p.id !== selectedProvider?.id),
47
+ _.map(_.prop("agents")),
48
+ _.filter(Boolean)
49
+ )(providers);
50
+
51
+ const availableAgentOptions = _.filter(
52
+ (o) => !_.includes(o.value)(usedAgents)
53
+ )(allAgentOptions);
40
54
 
41
55
  const form = useForm({
42
56
  mode: "onTouched",
@@ -129,6 +143,31 @@ export default function ProviderEditor({
129
143
  </Form.Field>
130
144
  )}
131
145
  />
146
+ <Controller
147
+ control={control}
148
+ name="agents"
149
+ render={({ field: { onBlur, onChange, value } }) => (
150
+ <Form.Field>
151
+ <label>
152
+ {formatMessage({ id: "providers.form.agents" })}
153
+ </label>
154
+ <Dropdown
155
+ clearable
156
+ selection
157
+ disabled={availableAgentOptions.length === 0 && !value}
158
+ onBlur={onBlur}
159
+ options={availableAgentOptions}
160
+ onChange={(_e, { value: v }) =>
161
+ onChange(v === "" ? null : v)
162
+ }
163
+ value={value ?? ""}
164
+ placeholder={formatMessage({
165
+ id: "providers.form.agents.placeholder",
166
+ })}
167
+ />
168
+ </Form.Field>
169
+ )}
170
+ />
132
171
  {providerPropertiesComponents[type]}
133
172
  <Divider hidden />
134
173
  <Container textAlign="right">
@@ -193,6 +232,7 @@ export default function ProviderEditor({
193
232
 
194
233
  ProviderEditor.propTypes = {
195
234
  selectedProvider: PropTypes.object,
235
+ providers: PropTypes.array,
196
236
  onSubmit: PropTypes.func,
197
237
  onCancel: PropTypes.func,
198
238
  onDelete: PropTypes.func,
@@ -7,6 +7,7 @@ import {
7
7
  GridColumn,
8
8
  Header,
9
9
  Icon,
10
+ Label,
10
11
  List,
11
12
  Segment,
12
13
  } from "semantic-ui-react";
@@ -19,6 +20,12 @@ import {
19
20
  } from "@truedat/ai/hooks/useProviders";
20
21
  import ProviderEditor from "./ProviderEditor";
21
22
 
23
+ const agentColors = {
24
+ fast: "yellow",
25
+ high: "blue",
26
+ thinking: "purple",
27
+ };
28
+
22
29
  const NEW_PROVIDER = {
23
30
  name: "",
24
31
  type: "openai",
@@ -99,6 +106,14 @@ export default function Providers() {
99
106
  formatMessage({
100
107
  id: "providers.form.name.new",
101
108
  })}
109
+ {provider.agents && (
110
+ <Label color={agentColors[provider.agents]} size="small" style={{ marginLeft: "0.5em" }}>
111
+ {formatMessage({
112
+ id: `providers.agent.${provider.agents}`,
113
+ defaultMessage: provider.agents,
114
+ })}
115
+ </Label>
116
+ )}
102
117
  </List.Header>
103
118
  </List.Content>
104
119
  </List.Item>
@@ -107,6 +107,89 @@ exports[`<ProviderEditor /> matches snapshot without onDelete 1`] = `
107
107
  providers.type.gemini
108
108
  </span>
109
109
  </div>
110
+ <div
111
+ aria-checked="false"
112
+ aria-selected="false"
113
+ class="item"
114
+ role="option"
115
+ style="pointer-events: all;"
116
+ >
117
+ <span
118
+ class="text"
119
+ >
120
+ providers.type.anthropic
121
+ </span>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ <div
127
+ class="field"
128
+ >
129
+ <label>
130
+ providers.form.agents
131
+ </label>
132
+ <div
133
+ aria-disabled="false"
134
+ aria-expanded="false"
135
+ class="ui selection dropdown"
136
+ role="listbox"
137
+ tabindex="0"
138
+ >
139
+ <div
140
+ aria-atomic="true"
141
+ aria-live="polite"
142
+ class="divider default text"
143
+ role="alert"
144
+ >
145
+ providers.form.agents.placeholder
146
+ </div>
147
+ <i
148
+ aria-hidden="true"
149
+ class="dropdown icon"
150
+ />
151
+ <div
152
+ class="menu transition"
153
+ >
154
+ <div
155
+ aria-checked="false"
156
+ aria-selected="true"
157
+ class="selected item"
158
+ role="option"
159
+ style="pointer-events: all;"
160
+ >
161
+ <span
162
+ class="text"
163
+ >
164
+ providers.agent.fast
165
+ </span>
166
+ </div>
167
+ <div
168
+ aria-checked="false"
169
+ aria-selected="false"
170
+ class="item"
171
+ role="option"
172
+ style="pointer-events: all;"
173
+ >
174
+ <span
175
+ class="text"
176
+ >
177
+ providers.agent.high
178
+ </span>
179
+ </div>
180
+ <div
181
+ aria-checked="false"
182
+ aria-selected="false"
183
+ class="item"
184
+ role="option"
185
+ style="pointer-events: all;"
186
+ >
187
+ <span
188
+ class="text"
189
+ >
190
+ providers.agent.thinking
191
+ </span>
192
+ </div>
110
193
  </div>
111
194
  </div>
112
195
  </div>
@@ -294,6 +377,89 @@ exports[`<ProviderEditor /> matches the latest snapshot 1`] = `
294
377
  providers.type.gemini
295
378
  </span>
296
379
  </div>
380
+ <div
381
+ aria-checked="false"
382
+ aria-selected="false"
383
+ class="item"
384
+ role="option"
385
+ style="pointer-events: all;"
386
+ >
387
+ <span
388
+ class="text"
389
+ >
390
+ providers.type.anthropic
391
+ </span>
392
+ </div>
393
+ </div>
394
+ </div>
395
+ </div>
396
+ <div
397
+ class="field"
398
+ >
399
+ <label>
400
+ providers.form.agents
401
+ </label>
402
+ <div
403
+ aria-disabled="false"
404
+ aria-expanded="false"
405
+ class="ui selection dropdown"
406
+ role="listbox"
407
+ tabindex="0"
408
+ >
409
+ <div
410
+ aria-atomic="true"
411
+ aria-live="polite"
412
+ class="divider default text"
413
+ role="alert"
414
+ >
415
+ providers.form.agents.placeholder
416
+ </div>
417
+ <i
418
+ aria-hidden="true"
419
+ class="dropdown icon"
420
+ />
421
+ <div
422
+ class="menu transition"
423
+ >
424
+ <div
425
+ aria-checked="false"
426
+ aria-selected="true"
427
+ class="selected item"
428
+ role="option"
429
+ style="pointer-events: all;"
430
+ >
431
+ <span
432
+ class="text"
433
+ >
434
+ providers.agent.fast
435
+ </span>
436
+ </div>
437
+ <div
438
+ aria-checked="false"
439
+ aria-selected="false"
440
+ class="item"
441
+ role="option"
442
+ style="pointer-events: all;"
443
+ >
444
+ <span
445
+ class="text"
446
+ >
447
+ providers.agent.high
448
+ </span>
449
+ </div>
450
+ <div
451
+ aria-checked="false"
452
+ aria-selected="false"
453
+ class="item"
454
+ role="option"
455
+ style="pointer-events: all;"
456
+ >
457
+ <span
458
+ class="text"
459
+ >
460
+ providers.agent.thinking
461
+ </span>
462
+ </div>
297
463
  </div>
298
464
  </div>
299
465
  </div>
@@ -484,6 +650,89 @@ exports[`<ProviderEditor /> test cancel button with confirm 1`] = `
484
650
  providers.type.gemini
485
651
  </span>
486
652
  </div>
653
+ <div
654
+ aria-checked="false"
655
+ aria-selected="false"
656
+ class="item"
657
+ role="option"
658
+ style="pointer-events: all;"
659
+ >
660
+ <span
661
+ class="text"
662
+ >
663
+ providers.type.anthropic
664
+ </span>
665
+ </div>
666
+ </div>
667
+ </div>
668
+ </div>
669
+ <div
670
+ class="field"
671
+ >
672
+ <label>
673
+ providers.form.agents
674
+ </label>
675
+ <div
676
+ aria-disabled="false"
677
+ aria-expanded="false"
678
+ class="ui selection dropdown"
679
+ role="listbox"
680
+ tabindex="0"
681
+ >
682
+ <div
683
+ aria-atomic="true"
684
+ aria-live="polite"
685
+ class="divider default text"
686
+ role="alert"
687
+ >
688
+ providers.form.agents.placeholder
689
+ </div>
690
+ <i
691
+ aria-hidden="true"
692
+ class="dropdown icon"
693
+ />
694
+ <div
695
+ class="menu transition"
696
+ >
697
+ <div
698
+ aria-checked="false"
699
+ aria-selected="true"
700
+ class="selected item"
701
+ role="option"
702
+ style="pointer-events: all;"
703
+ >
704
+ <span
705
+ class="text"
706
+ >
707
+ providers.agent.fast
708
+ </span>
709
+ </div>
710
+ <div
711
+ aria-checked="false"
712
+ aria-selected="false"
713
+ class="item"
714
+ role="option"
715
+ style="pointer-events: all;"
716
+ >
717
+ <span
718
+ class="text"
719
+ >
720
+ providers.agent.high
721
+ </span>
722
+ </div>
723
+ <div
724
+ aria-checked="false"
725
+ aria-selected="false"
726
+ class="item"
727
+ role="option"
728
+ style="pointer-events: all;"
729
+ >
730
+ <span
731
+ class="text"
732
+ >
733
+ providers.agent.thinking
734
+ </span>
735
+ </div>
487
736
  </div>
488
737
  </div>
489
738
  </div>
@@ -672,6 +921,89 @@ exports[`<ProviderEditor /> test delete button 1`] = `
672
921
  providers.type.gemini
673
922
  </span>
674
923
  </div>
924
+ <div
925
+ aria-checked="false"
926
+ aria-selected="false"
927
+ class="item"
928
+ role="option"
929
+ style="pointer-events: all;"
930
+ >
931
+ <span
932
+ class="text"
933
+ >
934
+ providers.type.anthropic
935
+ </span>
936
+ </div>
937
+ </div>
938
+ </div>
939
+ </div>
940
+ <div
941
+ class="field"
942
+ >
943
+ <label>
944
+ providers.form.agents
945
+ </label>
946
+ <div
947
+ aria-disabled="false"
948
+ aria-expanded="false"
949
+ class="ui selection dropdown"
950
+ role="listbox"
951
+ tabindex="0"
952
+ >
953
+ <div
954
+ aria-atomic="true"
955
+ aria-live="polite"
956
+ class="divider default text"
957
+ role="alert"
958
+ >
959
+ providers.form.agents.placeholder
960
+ </div>
961
+ <i
962
+ aria-hidden="true"
963
+ class="dropdown icon"
964
+ />
965
+ <div
966
+ class="menu transition"
967
+ >
968
+ <div
969
+ aria-checked="false"
970
+ aria-selected="true"
971
+ class="selected item"
972
+ role="option"
973
+ style="pointer-events: all;"
974
+ >
975
+ <span
976
+ class="text"
977
+ >
978
+ providers.agent.fast
979
+ </span>
980
+ </div>
981
+ <div
982
+ aria-checked="false"
983
+ aria-selected="false"
984
+ class="item"
985
+ role="option"
986
+ style="pointer-events: all;"
987
+ >
988
+ <span
989
+ class="text"
990
+ >
991
+ providers.agent.high
992
+ </span>
993
+ </div>
994
+ <div
995
+ aria-checked="false"
996
+ aria-selected="false"
997
+ class="item"
998
+ role="option"
999
+ style="pointer-events: all;"
1000
+ >
1001
+ <span
1002
+ class="text"
1003
+ >
1004
+ providers.agent.thinking
1005
+ </span>
1006
+ </div>
675
1007
  </div>
676
1008
  </div>
677
1009
  </div>
@@ -0,0 +1,113 @@
1
+ import { useIntl } from "react-intl";
2
+ import { Controller, useFormContext } from "react-hook-form";
3
+ import { Form } from "semantic-ui-react";
4
+
5
+ export default function Anthropic() {
6
+ const { formatMessage } = useIntl();
7
+ const { control } = useFormContext();
8
+
9
+ return (
10
+ <>
11
+ <Controller
12
+ control={control}
13
+ name="properties.model"
14
+ rules={{
15
+ required: formatMessage(
16
+ { id: "form.validation.required" },
17
+ {
18
+ prop: formatMessage({
19
+ id: "providerProperties.form.model",
20
+ }),
21
+ }
22
+ ),
23
+ }}
24
+ render={({
25
+ field: { onBlur, onChange, value },
26
+ fieldState: { error },
27
+ }) => (
28
+ <Form.Input
29
+ autoComplete="off"
30
+ placeholder={formatMessage({
31
+ id: "providerProperties.form.model",
32
+ })}
33
+ error={error?.message}
34
+ label={formatMessage({
35
+ id: "providerProperties.form.model",
36
+ })}
37
+ onBlur={onBlur}
38
+ onChange={(_e, { value }) => onChange(value)}
39
+ value={value}
40
+ required
41
+ />
42
+ )}
43
+ />
44
+ <Controller
45
+ control={control}
46
+ name="properties.temperature"
47
+ render={({
48
+ field: { onBlur, onChange, value },
49
+ fieldState: { error },
50
+ }) => (
51
+ <Form.Input
52
+ autoComplete="off"
53
+ placeholder={formatMessage({
54
+ id: "providerProperties.form.temperature",
55
+ })}
56
+ error={error?.message}
57
+ label={formatMessage({
58
+ id: "providerProperties.form.temperature",
59
+ })}
60
+ onBlur={onBlur}
61
+ onChange={(_e, { value }) => onChange(value)}
62
+ value={value}
63
+ />
64
+ )}
65
+ />
66
+ <Controller
67
+ control={control}
68
+ name="properties.top_p"
69
+ render={({
70
+ field: { onBlur, onChange, value },
71
+ fieldState: { error },
72
+ }) => (
73
+ <Form.Input
74
+ autoComplete="off"
75
+ placeholder={formatMessage({
76
+ id: "providerProperties.form.topP",
77
+ })}
78
+ error={error?.message}
79
+ label={formatMessage({
80
+ id: "providerProperties.form.topP",
81
+ })}
82
+ onBlur={onBlur}
83
+ onChange={(_e, { value }) => onChange(value)}
84
+ value={value}
85
+ />
86
+ )}
87
+ />
88
+ <Controller
89
+ control={control}
90
+ name="properties.api_key"
91
+ render={({
92
+ field: { onBlur, onChange, value },
93
+ fieldState: { error },
94
+ }) => (
95
+ <Form.Input
96
+ type="password"
97
+ autoComplete="off"
98
+ placeholder={formatMessage({
99
+ id: "providerProperties.form.apiKey",
100
+ })}
101
+ error={error?.message}
102
+ label={formatMessage({
103
+ id: "providerProperties.form.apiKey",
104
+ })}
105
+ onBlur={onBlur}
106
+ onChange={(_e, { value }) => onChange(value)}
107
+ value={value}
108
+ />
109
+ )}
110
+ />
111
+ </>
112
+ );
113
+ }
@@ -2,5 +2,6 @@ import Openai from "./Openai";
2
2
  import AzureOpenai from "./AzureOpenai";
3
3
  import BedrockClaude from "./BedrockClaude";
4
4
  import Gemini from "./Gemini";
5
+ import Anthropic from "./Anthropic";
5
6
 
6
- export { Openai, AzureOpenai, BedrockClaude, Gemini };
7
+ export { Openai, AzureOpenai, BedrockClaude, Gemini, Anthropic };