@smart-cloud/ai-kit-ui 1.1.40 → 1.1.42

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 (34) hide show
  1. package/dist/ai-kit-ui.css +22 -11
  2. package/dist/index.cjs +9 -9
  3. package/dist/index.d.cts +15 -1
  4. package/dist/index.d.ts +15 -1
  5. package/dist/index.js +9 -9
  6. package/package.json +3 -2
  7. package/src/ai-feature/AiFeature.tsx +158 -166
  8. package/src/doc-search/DocSearch.tsx +498 -0
  9. package/src/doc-search/index.tsx +1 -0
  10. package/src/i18n/ar.ts +55 -44
  11. package/src/i18n/de.ts +56 -45
  12. package/src/i18n/en.ts +56 -45
  13. package/src/i18n/es.ts +56 -44
  14. package/src/i18n/fr.ts +56 -44
  15. package/src/i18n/he.ts +55 -44
  16. package/src/i18n/hi.ts +55 -44
  17. package/src/i18n/hu.ts +63 -51
  18. package/src/i18n/id.ts +56 -44
  19. package/src/i18n/it.ts +56 -44
  20. package/src/i18n/ja.ts +56 -45
  21. package/src/i18n/ko.ts +55 -44
  22. package/src/i18n/nb.ts +56 -45
  23. package/src/i18n/nl.ts +56 -45
  24. package/src/i18n/pl.ts +57 -45
  25. package/src/i18n/pt.ts +55 -44
  26. package/src/i18n/ru.ts +56 -45
  27. package/src/i18n/sv.ts +56 -45
  28. package/src/i18n/th.ts +55 -44
  29. package/src/i18n/tr.ts +55 -44
  30. package/src/i18n/ua.ts +55 -46
  31. package/src/i18n/zh.ts +54 -43
  32. package/src/index.tsx +1 -0
  33. package/src/poweredBy.tsx +39 -0
  34. package/src/styles/ai-kit-ui.css +22 -11
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@smart-cloud/ai-kit-ui",
3
- "version": "1.1.40",
3
+ "version": "1.1.42",
4
4
  "type": "module",
5
5
  "main": "./dist/index.cjs",
6
6
  "module": "./dist/index.js",
@@ -20,11 +20,12 @@
20
20
  "@emotion/cache": "^11.14.0",
21
21
  "@emotion/react": "^11.14.0",
22
22
  "@mantine/colors-generator": "^8.3.14",
23
- "@smart-cloud/ai-kit-core": "^1.1.20",
23
+ "@smart-cloud/ai-kit-core": "^1.1.21",
24
24
  "@smart-cloud/wpsuite-core": "^2.1.2",
25
25
  "@tabler/icons-react": "^3.36.1",
26
26
  "chroma-js": "^3.2.0",
27
27
  "react-markdown": "^10.1.0",
28
+ "rehype-raw": "^7.0.0",
28
29
  "rehype-sanitize": "^6.0.0",
29
30
  "rehype-stringify": "^10.0.1",
30
31
  "remark-gfm": "^4.0.1",
package/src/ai-feature/AiFeature.tsx CHANGED
@@ -1,6 +1,5 @@
1
1
  import {
2
2
  Alert,
3
- Anchor,
4
3
  Button,
5
4
  Collapse,
6
5
  Divider,
@@ -55,6 +54,7 @@ import {
55
54
  } from "@tabler/icons-react";
56
55
 
57
56
  import { translations } from "../i18n";
57
+ import { PoweredBy } from "../poweredBy";
58
58
  import {
59
59
  isBackendConfigured,
60
60
  readDefaultOutputLanguage,
@@ -169,54 +169,60 @@ async function parseImageMetadataFromPromptResult(
169
169
  typeof parsed.alt === "string"
170
170
  ? outputLang && outputLang !== "en"
171
171
  ? (
172
- await translate(
173
- {
174
- text: parsed.alt,
175
- sourceLanguage: "en",
176
- targetLanguage: outputLang,
177
- },
178
- featureOptions,
179
- )
180
- ).result
172
+ await translate(
173
+ {
174
+ text: parsed.alt,
175
+ sourceLanguage: "en",
176
+ targetLanguage: outputLang,
177
+ },
178
+ featureOptions,
179
+ )
180
+ ).result
181
181
  : parsed.alt
182
182
  : "",
183
183
  title:
184
184
  typeof parsed.title === "string"
185
185
  ? outputLang && outputLang !== "en"
186
186
  ? (
187
- await translate({
188
- text: parsed.title,
189
- sourceLanguage: "en",
190
- targetLanguage: outputLang,
191
- },
192
- featureOptions)
193
- ).result
187
+ await translate(
188
+ {
189
+ text: parsed.title,
190
+ sourceLanguage: "en",
191
+ targetLanguage: outputLang,
192
+ },
193
+ featureOptions,
194
+ )
195
+ ).result
194
196
  : parsed.title
195
197
  : "",
196
198
  caption:
197
199
  typeof parsed.caption === "string"
198
200
  ? outputLang && outputLang !== "en"
199
201
  ? (
200
- await translate({
201
- text: parsed.caption,
202
- sourceLanguage: "en",
203
- targetLanguage: outputLang,
204
- },
205
- featureOptions)
206
- ).result
202
+ await translate(
203
+ {
204
+ text: parsed.caption,
205
+ sourceLanguage: "en",
206
+ targetLanguage: outputLang,
207
+ },
208
+ featureOptions,
209
+ )
210
+ ).result
207
211
  : parsed.caption
208
212
  : "",
209
213
  description:
210
214
  typeof parsed.description === "string"
211
215
  ? outputLang && outputLang !== "en"
212
216
  ? (
213
- await translate({
214
- text: parsed.description,
215
- sourceLanguage: "en",
216
- targetLanguage: outputLang,
217
- },
218
- featureOptions)
219
- ).result
217
+ await translate(
218
+ {
219
+ text: parsed.description,
220
+ sourceLanguage: "en",
221
+ targetLanguage: outputLang,
222
+ },
223
+ featureOptions,
224
+ )
225
+ ).result
220
226
  : parsed.description
221
227
  : "",
222
228
  };
@@ -244,30 +250,30 @@ async function parsePostMetadataFromPromptResult(
244
250
  typeof parsed.title === "string"
245
251
  ? outputLang && outputLang !== "en"
246
252
  ? (
247
- await translate(
248
- {
249
- text: parsed.title,
250
- sourceLanguage: "en",
251
- targetLanguage: outputLang,
252
- },
253
- featureOptions,
254
- )
255
- ).result
253
+ await translate(
254
+ {
255
+ text: parsed.title,
256
+ sourceLanguage: "en",
257
+ targetLanguage: outputLang,
258
+ },
259
+ featureOptions,
260
+ )
261
+ ).result
256
262
  : parsed.title
257
263
  : "",
258
264
  excerpt:
259
265
  typeof parsed.excerpt === "string"
260
266
  ? outputLang && outputLang !== "en"
261
267
  ? (
262
- await translate(
263
- {
264
- text: parsed.excerpt,
265
- sourceLanguage: "en",
266
- targetLanguage: outputLang,
267
- },
268
- featureOptions,
269
- )
270
- ).result
268
+ await translate(
269
+ {
270
+ text: parsed.excerpt,
271
+ sourceLanguage: "en",
272
+ targetLanguage: outputLang,
273
+ },
274
+ featureOptions,
275
+ )
276
+ ).result
271
277
  : parsed.excerpt
272
278
  : "",
273
279
  };
@@ -357,7 +363,11 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
357
363
  >(defaults?.outputFormat);
358
364
  const [outputLanguage, setOutputLanguage] = useState<
359
365
  AiKitLanguageCode | "auto" | undefined
360
- >(defaults?.outputLanguage);
366
+ >(
367
+ defaults?.outputLanguage ||
368
+ aiKit.settings.defaultOutputLanguage ||
369
+ (mode === "rewrite" ? "auto" : undefined),
370
+ );
361
371
  const [length, setLength] = useState<
362
372
  WriterLength | RewriterLength | SummarizerLength | undefined
363
373
  >(defaults?.length);
@@ -372,33 +382,36 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
372
382
  if (language) {
373
383
  I18n.setLanguage(language || "en");
374
384
  }
375
- let title;
385
+ if (title) {
386
+ return title;
387
+ }
388
+ let t;
376
389
  switch (mode) {
377
390
  default:
378
391
  case "summarize":
379
- title = I18n.get("Summarize");
392
+ t = "Summarize";
380
393
  break;
381
394
  case "proofread":
382
- title = I18n.get("Proofread");
395
+ t = "Proofread";
383
396
  break;
384
397
  case "write":
385
- title = I18n.get("Write");
398
+ t = "Write";
386
399
  break;
387
400
  case "rewrite":
388
- title = I18n.get("Rewrite");
401
+ t = "Rewrite";
389
402
  break;
390
403
  case "translate":
391
- title = I18n.get("Translate");
404
+ t = "Translate";
392
405
  break;
393
406
  case "generatePostMetadata":
394
- title = I18n.get("Generate Post Metadata");
407
+ t = "Generate Post Metadata";
395
408
  break;
396
409
  case "generateImageMetadata":
397
- title = I18n.get("Generate Image Metadata");
410
+ t = "Generate Image Metadata";
398
411
  break;
399
412
  }
400
- return title;
401
- }, [mode, language]);
413
+ return t;
414
+ }, [title, mode, language]);
402
415
 
403
416
  const formatAiKitStatus = useCallback(
404
417
  (e: AiKitStatusEvent | null): string | null => {
@@ -466,8 +479,7 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
466
479
  case "translate":
467
480
  return (
468
481
  Boolean(text && text.trim().length > 0) &&
469
- outputLanguage &&
470
- detectedLanguage !== outputLanguage
482
+ (!outputLanguage || detectedLanguage !== outputLanguage)
471
483
  );
472
484
  case "summarize":
473
485
  case "proofread":
@@ -583,6 +595,13 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
583
595
  ? outputLanguage
584
596
  : null) || readDefaultOutputLanguage();
585
597
  if (outLang === inputLang) {
598
+ console.warn(
599
+ "AI Kit: input and output languages are the same",
600
+ {
601
+ inputLang,
602
+ outLang,
603
+ },
604
+ );
586
605
  setError(
587
606
  I18n.get("Input and output languages cannot be the same."),
588
607
  );
@@ -1041,8 +1060,8 @@ Follow these additional instructions: ${instructions}`
1041
1060
  )?.label;
1042
1061
  parts.push(
1043
1062
  I18n.get("Output language") +
1044
- ": " +
1045
- (lang ? I18n.get(lang) : outputLanguage),
1063
+ ": " +
1064
+ (lang ? I18n.get(lang) : outputLanguage),
1046
1065
  );
1047
1066
  }
1048
1067
  if (mode === "summarize" && type && allowOverride?.type) {
@@ -1163,7 +1182,7 @@ Follow these additional instructions: ${instructions}`
1163
1182
  {variation === "modal" && (
1164
1183
  <Modal.Header style={{ zIndex: 1000 }}>
1165
1184
  {getOpenButtonDefaultIcon("ai-feature-title-icon")}
1166
- <Modal.Title>{I18n.get(title || defaultTitle)}</Modal.Title>
1185
+ <Modal.Title>{I18n.get(defaultTitle)}</Modal.Title>
1167
1186
  <Modal.CloseButton />
1168
1187
  </Modal.Header>
1169
1188
  )}
@@ -1247,8 +1266,8 @@ Follow these additional instructions: ${instructions}`
1247
1266
  description={
1248
1267
  optionsDisplay !== "horizontal"
1249
1268
  ? I18n.get(
1250
- "The topic or subject for the AI to write about.",
1251
- )
1269
+ "The topic or subject for the AI to write about.",
1270
+ )
1252
1271
  : undefined
1253
1272
  }
1254
1273
  value={text || ""}
@@ -1284,8 +1303,8 @@ Follow these additional instructions: ${instructions}`
1284
1303
  description={
1285
1304
  optionsDisplay !== "horizontal"
1286
1305
  ? I18n.get(
1287
- "Additional instructions to guide the AI.",
1288
- )
1306
+ "Additional instructions to guide the AI.",
1307
+ )
1289
1308
  : undefined
1290
1309
  }
1291
1310
  value={instructions || ""}
@@ -1317,8 +1336,8 @@ Follow these additional instructions: ${instructions}`
1317
1336
  description={
1318
1337
  optionsDisplay !== "horizontal"
1319
1338
  ? I18n.get(
1320
- "The language of the input text.",
1321
- )
1339
+ "The language of the input text.",
1340
+ )
1322
1341
  : undefined
1323
1342
  }
1324
1343
  data={[
@@ -1337,6 +1356,7 @@ Follow these additional instructions: ${instructions}`
1337
1356
  onChange={(value) => {
1338
1357
  const val = value as AiKitLanguageCode;
1339
1358
  setInputLanguage(val);
1359
+ setDetectedLanguage(undefined);
1340
1360
  onOptionsChanged?.({ inputLanguage: val });
1341
1361
  }}
1342
1362
  />
@@ -1360,17 +1380,17 @@ Follow these additional instructions: ${instructions}`
1360
1380
  description={
1361
1381
  optionsDisplay !== "horizontal"
1362
1382
  ? I18n.get(
1363
- "The language AI-Kit should use for generated text by default (when applicable).",
1364
- )
1383
+ "The language AI-Kit should use for generated text by default (when applicable).",
1384
+ )
1365
1385
  : undefined
1366
1386
  }
1367
1387
  data={[
1368
1388
  ...([
1369
1389
  mode === "rewrite"
1370
1390
  ? {
1371
- value: "auto",
1372
- label: I18n.get("Auto-detect"),
1373
- }
1391
+ value: "auto",
1392
+ label: I18n.get("Auto-detect"),
1393
+ }
1374
1394
  : undefined,
1375
1395
  ].filter(Boolean) as {
1376
1396
  value: string;
@@ -1391,6 +1411,7 @@ Follow these additional instructions: ${instructions}`
1391
1411
  onChange={(value) => {
1392
1412
  const val = value as AiKitLanguageCode;
1393
1413
  setOutputLanguage(val);
1414
+ setDetectedLanguage(undefined);
1394
1415
  onOptionsChanged?.({ outputLanguage: val });
1395
1416
  }}
1396
1417
  />
@@ -1460,40 +1481,40 @@ Follow these additional instructions: ${instructions}`
1460
1481
  description={
1461
1482
  optionsDisplay !== "horizontal"
1462
1483
  ? I18n.get(
1463
- "The tone or style for the AI to use.",
1464
- )
1484
+ "The tone or style for the AI to use.",
1485
+ )
1465
1486
  : undefined
1466
1487
  }
1467
1488
  data={
1468
1489
  mode === "write"
1469
1490
  ? [
1470
- {
1471
- value: "neutral",
1472
- label: I18n.get("Neutral"),
1473
- },
1474
- {
1475
- value: "formal",
1476
- label: I18n.get("Formal"),
1477
- },
1478
- {
1479
- value: "casual",
1480
- label: I18n.get("Casual"),
1481
- },
1482
- ]
1491
+ {
1492
+ value: "neutral",
1493
+ label: I18n.get("Neutral"),
1494
+ },
1495
+ {
1496
+ value: "formal",
1497
+ label: I18n.get("Formal"),
1498
+ },
1499
+ {
1500
+ value: "casual",
1501
+ label: I18n.get("Casual"),
1502
+ },
1503
+ ]
1483
1504
  : [
1484
- {
1485
- value: "as-is",
1486
- label: I18n.get("As-Is"),
1487
- },
1488
- {
1489
- value: "more-formal",
1490
- label: I18n.get("More formal"),
1491
- },
1492
- {
1493
- value: "more-casual",
1494
- label: I18n.get("More casual"),
1495
- },
1496
- ]
1505
+ {
1506
+ value: "as-is",
1507
+ label: I18n.get("As-Is"),
1508
+ },
1509
+ {
1510
+ value: "more-formal",
1511
+ label: I18n.get("More formal"),
1512
+ },
1513
+ {
1514
+ value: "more-casual",
1515
+ label: I18n.get("More casual"),
1516
+ },
1517
+ ]
1497
1518
  }
1498
1519
  value={
1499
1520
  tone ||
@@ -1533,33 +1554,33 @@ Follow these additional instructions: ${instructions}`
1533
1554
  data={
1534
1555
  mode === "write" || mode === "summarize"
1535
1556
  ? [
1536
- {
1537
- value: "short",
1538
- label: I18n.get("Short"),
1539
- },
1540
- {
1541
- value: "medium",
1542
- label: I18n.get("Medium"),
1543
- },
1544
- {
1545
- value: "long",
1546
- label: I18n.get("Long"),
1547
- },
1548
- ]
1557
+ {
1558
+ value: "short",
1559
+ label: I18n.get("Short"),
1560
+ },
1561
+ {
1562
+ value: "medium",
1563
+ label: I18n.get("Medium"),
1564
+ },
1565
+ {
1566
+ value: "long",
1567
+ label: I18n.get("Long"),
1568
+ },
1569
+ ]
1549
1570
  : [
1550
- {
1551
- value: "as-is",
1552
- label: I18n.get("As-Is"),
1553
- },
1554
- {
1555
- value: "shorter",
1556
- label: I18n.get("Shorter"),
1557
- },
1558
- {
1559
- value: "longer",
1560
- label: I18n.get("Longer"),
1561
- },
1562
- ]
1571
+ {
1572
+ value: "as-is",
1573
+ label: I18n.get("As-Is"),
1574
+ },
1575
+ {
1576
+ value: "shorter",
1577
+ label: I18n.get("Shorter"),
1578
+ },
1579
+ {
1580
+ value: "longer",
1581
+ label: I18n.get("Longer"),
1582
+ },
1583
+ ]
1563
1584
  }
1564
1585
  value={
1565
1586
  length ||
@@ -1597,8 +1618,8 @@ Follow these additional instructions: ${instructions}`
1597
1618
  description={
1598
1619
  optionsDisplay !== "horizontal"
1599
1620
  ? I18n.get(
1600
- "The format for the generated output.",
1601
- )
1621
+ "The format for the generated output.",
1622
+ )
1602
1623
  : undefined
1603
1624
  }
1604
1625
  data={[
@@ -1636,7 +1657,7 @@ Follow these additional instructions: ${instructions}`
1636
1657
  {ai.busy && statusText && (
1637
1658
  <AiFeatureBorder
1638
1659
  enabled={variation === "modal"}
1639
- working={ai.busy}
1660
+ working={true}
1640
1661
  variation={variation}
1641
1662
  >
1642
1663
  <Group
@@ -1648,7 +1669,7 @@ Follow these additional instructions: ${instructions}`
1648
1669
  >
1649
1670
  <Loader size="sm" />
1650
1671
  <Input.Label className="ai-feature-status-text">
1651
- {statusText ?? "VALAMILYEN SZÖVEG"}
1672
+ {statusText}
1652
1673
  </Input.Label>
1653
1674
  </Group>
1654
1675
  </AiFeatureBorder>
@@ -1659,7 +1680,7 @@ Follow these additional instructions: ${instructions}`
1659
1680
  <Stack mt="md">
1660
1681
  {mode === "proofread" &&
1661
1682
  ((generated as ProofreadResult).corrections.length ===
1662
- 0 ? (
1683
+ 0 ? (
1663
1684
  <Alert color="green">
1664
1685
  {I18n.get(
1665
1686
  "No issues found. Your text looks great!",
@@ -1878,7 +1899,7 @@ Follow these additional instructions: ${instructions}`
1878
1899
  !generated ||
1879
1900
  (mode === "proofread" &&
1880
1901
  (generated as ProofreadResult).corrections.length ===
1881
- 0)
1902
+ 0)
1882
1903
  }
1883
1904
  onClick={async () => {
1884
1905
  onAccept(
@@ -1903,36 +1924,7 @@ Follow these additional instructions: ${instructions}`
1903
1924
  {I18n.get("Close")}
1904
1925
  </Button>
1905
1926
  </Group>
1906
- <div
1907
- style={{
1908
- display: aiKit.settings?.enablePoweredBy ? "flex" : "none",
1909
- justifyContent: aiKit.settings?.enablePoweredBy
1910
- ? "flex-end"
1911
- : undefined,
1912
- padding: 0,
1913
- marginRight: "var(--ai-kit-spacing-sm)",
1914
- marginBottom:
1915
- variation === "default"
1916
- ? "var(--ai-kit-spacing-sm)"
1917
- : undefined,
1918
- }}
1919
- className={
1920
- aiKit.settings?.enablePoweredBy ? undefined : "sr-only"
1921
- }
1922
- >
1923
- <Text c="p" ta="right" fs="italic" fz="xs">
1924
- Powered by{" "}
1925
- <Anchor
1926
- href="https://wpsuite.io/ai-kit/"
1927
- target="_blank"
1928
- td="none"
1929
- fz="xs"
1930
- fw={400}
1931
- >
1932
- WPSuite AI-Kit
1933
- </Anchor>
1934
- </Text>
1935
- </div>
1927
+ <PoweredBy variation={variation} />
1936
1928
  </AiFeatureBorder>
1937
1929
  </BodyComponent>
1938
1930
  </ContentComponent>