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

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 +164 -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.41",
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 => {
@@ -464,10 +477,15 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
464
477
  case "generateImageMetadata":
465
478
  return Boolean(image);
466
479
  case "translate":
480
+ console.log(
481
+ "detectedLanguage",
482
+ detectedLanguage,
483
+ "outputLanguage",
484
+ outputLanguage,
485
+ );
467
486
  return (
468
487
  Boolean(text && text.trim().length > 0) &&
469
- outputLanguage &&
470
- detectedLanguage !== outputLanguage
488
+ (!outputLanguage || detectedLanguage !== outputLanguage)
471
489
  );
472
490
  case "summarize":
473
491
  case "proofread":
@@ -583,6 +601,13 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
583
601
  ? outputLanguage
584
602
  : null) || readDefaultOutputLanguage();
585
603
  if (outLang === inputLang) {
604
+ console.warn(
605
+ "AI Kit: input and output languages are the same",
606
+ {
607
+ inputLang,
608
+ outLang,
609
+ },
610
+ );
586
611
  setError(
587
612
  I18n.get("Input and output languages cannot be the same."),
588
613
  );
@@ -1041,8 +1066,8 @@ Follow these additional instructions: ${instructions}`
1041
1066
  )?.label;
1042
1067
  parts.push(
1043
1068
  I18n.get("Output language") +
1044
- ": " +
1045
- (lang ? I18n.get(lang) : outputLanguage),
1069
+ ": " +
1070
+ (lang ? I18n.get(lang) : outputLanguage),
1046
1071
  );
1047
1072
  }
1048
1073
  if (mode === "summarize" && type && allowOverride?.type) {
@@ -1163,7 +1188,7 @@ Follow these additional instructions: ${instructions}`
1163
1188
  {variation === "modal" && (
1164
1189
  <Modal.Header style={{ zIndex: 1000 }}>
1165
1190
  {getOpenButtonDefaultIcon("ai-feature-title-icon")}
1166
- <Modal.Title>{I18n.get(title || defaultTitle)}</Modal.Title>
1191
+ <Modal.Title>{I18n.get(defaultTitle)}</Modal.Title>
1167
1192
  <Modal.CloseButton />
1168
1193
  </Modal.Header>
1169
1194
  )}
@@ -1247,8 +1272,8 @@ Follow these additional instructions: ${instructions}`
1247
1272
  description={
1248
1273
  optionsDisplay !== "horizontal"
1249
1274
  ? I18n.get(
1250
- "The topic or subject for the AI to write about.",
1251
- )
1275
+ "The topic or subject for the AI to write about.",
1276
+ )
1252
1277
  : undefined
1253
1278
  }
1254
1279
  value={text || ""}
@@ -1284,8 +1309,8 @@ Follow these additional instructions: ${instructions}`
1284
1309
  description={
1285
1310
  optionsDisplay !== "horizontal"
1286
1311
  ? I18n.get(
1287
- "Additional instructions to guide the AI.",
1288
- )
1312
+ "Additional instructions to guide the AI.",
1313
+ )
1289
1314
  : undefined
1290
1315
  }
1291
1316
  value={instructions || ""}
@@ -1317,8 +1342,8 @@ Follow these additional instructions: ${instructions}`
1317
1342
  description={
1318
1343
  optionsDisplay !== "horizontal"
1319
1344
  ? I18n.get(
1320
- "The language of the input text.",
1321
- )
1345
+ "The language of the input text.",
1346
+ )
1322
1347
  : undefined
1323
1348
  }
1324
1349
  data={[
@@ -1337,6 +1362,7 @@ Follow these additional instructions: ${instructions}`
1337
1362
  onChange={(value) => {
1338
1363
  const val = value as AiKitLanguageCode;
1339
1364
  setInputLanguage(val);
1365
+ setDetectedLanguage(undefined);
1340
1366
  onOptionsChanged?.({ inputLanguage: val });
1341
1367
  }}
1342
1368
  />
@@ -1360,17 +1386,17 @@ Follow these additional instructions: ${instructions}`
1360
1386
  description={
1361
1387
  optionsDisplay !== "horizontal"
1362
1388
  ? I18n.get(
1363
- "The language AI-Kit should use for generated text by default (when applicable).",
1364
- )
1389
+ "The language AI-Kit should use for generated text by default (when applicable).",
1390
+ )
1365
1391
  : undefined
1366
1392
  }
1367
1393
  data={[
1368
1394
  ...([
1369
1395
  mode === "rewrite"
1370
1396
  ? {
1371
- value: "auto",
1372
- label: I18n.get("Auto-detect"),
1373
- }
1397
+ value: "auto",
1398
+ label: I18n.get("Auto-detect"),
1399
+ }
1374
1400
  : undefined,
1375
1401
  ].filter(Boolean) as {
1376
1402
  value: string;
@@ -1391,6 +1417,7 @@ Follow these additional instructions: ${instructions}`
1391
1417
  onChange={(value) => {
1392
1418
  const val = value as AiKitLanguageCode;
1393
1419
  setOutputLanguage(val);
1420
+ setDetectedLanguage(undefined);
1394
1421
  onOptionsChanged?.({ outputLanguage: val });
1395
1422
  }}
1396
1423
  />
@@ -1460,40 +1487,40 @@ Follow these additional instructions: ${instructions}`
1460
1487
  description={
1461
1488
  optionsDisplay !== "horizontal"
1462
1489
  ? I18n.get(
1463
- "The tone or style for the AI to use.",
1464
- )
1490
+ "The tone or style for the AI to use.",
1491
+ )
1465
1492
  : undefined
1466
1493
  }
1467
1494
  data={
1468
1495
  mode === "write"
1469
1496
  ? [
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
- ]
1497
+ {
1498
+ value: "neutral",
1499
+ label: I18n.get("Neutral"),
1500
+ },
1501
+ {
1502
+ value: "formal",
1503
+ label: I18n.get("Formal"),
1504
+ },
1505
+ {
1506
+ value: "casual",
1507
+ label: I18n.get("Casual"),
1508
+ },
1509
+ ]
1483
1510
  : [
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
- ]
1511
+ {
1512
+ value: "as-is",
1513
+ label: I18n.get("As-Is"),
1514
+ },
1515
+ {
1516
+ value: "more-formal",
1517
+ label: I18n.get("More formal"),
1518
+ },
1519
+ {
1520
+ value: "more-casual",
1521
+ label: I18n.get("More casual"),
1522
+ },
1523
+ ]
1497
1524
  }
1498
1525
  value={
1499
1526
  tone ||
@@ -1533,33 +1560,33 @@ Follow these additional instructions: ${instructions}`
1533
1560
  data={
1534
1561
  mode === "write" || mode === "summarize"
1535
1562
  ? [
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
- ]
1563
+ {
1564
+ value: "short",
1565
+ label: I18n.get("Short"),
1566
+ },
1567
+ {
1568
+ value: "medium",
1569
+ label: I18n.get("Medium"),
1570
+ },
1571
+ {
1572
+ value: "long",
1573
+ label: I18n.get("Long"),
1574
+ },
1575
+ ]
1549
1576
  : [
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
- ]
1577
+ {
1578
+ value: "as-is",
1579
+ label: I18n.get("As-Is"),
1580
+ },
1581
+ {
1582
+ value: "shorter",
1583
+ label: I18n.get("Shorter"),
1584
+ },
1585
+ {
1586
+ value: "longer",
1587
+ label: I18n.get("Longer"),
1588
+ },
1589
+ ]
1563
1590
  }
1564
1591
  value={
1565
1592
  length ||
@@ -1597,8 +1624,8 @@ Follow these additional instructions: ${instructions}`
1597
1624
  description={
1598
1625
  optionsDisplay !== "horizontal"
1599
1626
  ? I18n.get(
1600
- "The format for the generated output.",
1601
- )
1627
+ "The format for the generated output.",
1628
+ )
1602
1629
  : undefined
1603
1630
  }
1604
1631
  data={[
@@ -1636,7 +1663,7 @@ Follow these additional instructions: ${instructions}`
1636
1663
  {ai.busy && statusText && (
1637
1664
  <AiFeatureBorder
1638
1665
  enabled={variation === "modal"}
1639
- working={ai.busy}
1666
+ working={true}
1640
1667
  variation={variation}
1641
1668
  >
1642
1669
  <Group
@@ -1648,7 +1675,7 @@ Follow these additional instructions: ${instructions}`
1648
1675
  >
1649
1676
  <Loader size="sm" />
1650
1677
  <Input.Label className="ai-feature-status-text">
1651
- {statusText ?? "VALAMILYEN SZÖVEG"}
1678
+ {statusText}
1652
1679
  </Input.Label>
1653
1680
  </Group>
1654
1681
  </AiFeatureBorder>
@@ -1659,7 +1686,7 @@ Follow these additional instructions: ${instructions}`
1659
1686
  <Stack mt="md">
1660
1687
  {mode === "proofread" &&
1661
1688
  ((generated as ProofreadResult).corrections.length ===
1662
- 0 ? (
1689
+ 0 ? (
1663
1690
  <Alert color="green">
1664
1691
  {I18n.get(
1665
1692
  "No issues found. Your text looks great!",
@@ -1878,7 +1905,7 @@ Follow these additional instructions: ${instructions}`
1878
1905
  !generated ||
1879
1906
  (mode === "proofread" &&
1880
1907
  (generated as ProofreadResult).corrections.length ===
1881
- 0)
1908
+ 0)
1882
1909
  }
1883
1910
  onClick={async () => {
1884
1911
  onAccept(
@@ -1903,36 +1930,7 @@ Follow these additional instructions: ${instructions}`
1903
1930
  {I18n.get("Close")}
1904
1931
  </Button>
1905
1932
  </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>
1933
+ <PoweredBy variation={variation} />
1936
1934
  </AiFeatureBorder>
1937
1935
  </BodyComponent>
1938
1936
  </ContentComponent>