2 files changed, 26 insertions, 22 deletions
diff --git a/packages/prosody-ui/src/thai/ThaiText.tsx b/packages/prosody-ui/src/thai/ThaiText.tsx
index fc1e1e6..794804a 100644
--- a/packages/prosody-ui/src/thai/ThaiText.tsx
+++ b/packages/prosody-ui/src/thai/ThaiText.tsx
@@ -1,49 +1,49 @@
 import React, { useCallback, useEffect, useState } from "react";
 import "../assets/fonts/Thai/style.css";
 import { segmentateThai } from "./logic/thainlp";
-import type { AnalyzeRes } from "../logic/types";
+import type { AnalyzeRes, ColorTheme, LangToColor } from "../logic/types";
 import { ColoredText } from "../components/Sentence";
 import Word from "../components/Word";
 
 export default function ThaiText({
   text,
   openWord,
+  theme,
 }: {
   text: string;
-  openWord: (s: string) => void;
+  openWord: (s: AnalyzeRes) => void;
+  theme: ColorTheme;
 }) {
   useEffect(() => {
     pythonseg();
   }, [text]);
 
-  const [data, setData] = useState<Record<string, AnalyzeRes>>({});
+  const [data, setData] = useState<Array<LangToColor<AnalyzeRes>>>([]);
   const [modal, setModal] = useState<any>();
   const pythonseg = useCallback(async () => {
     const s2 = await segmentateThai(text.trim());
     if ("ok" in s2) {
-      const ob = s2.ok.reduce((acc, item) => {
-        acc[item.word] = item;
-        return acc;
-      }, {} as any);
-      setData(ob);
+      const ob = s2.ok.reduce(
+        (acc, item) => {
+          acc[item.word] = item;
+          return acc;
+        },
+        {} as Record<string, AnalyzeRes>,
+      );
+      const d = Object.values(ob).map((w) => ({
+        data: w,
+        colorBy: w.pos,
+        display: w.word,
+      }));
+      setData(d);
       console.log(s2, "s2");
     } else console.error(s2.error);
   }, [text]);
 
-  // function openWord(e: React.MouseEvent<any>) {
-  //   const s = e.currentTarget.innerText;
-  //   const d = data[s];
-  //   setModal(d);
-  //   // setModal(<WordModal data={d} lang={lang} />);
-  // }
   return (
     <div className="thaitext">
-      <ColoredText lang="tha" frags={Object.keys(data)} fn={openWord} />
+      <ColoredText lang="tha" theme={theme} frags={data} fn={openWord} />
       {modal && <Word data={modal} lang={"tha"} />}
     </div>
   );
 }
-
-function ThaiWord() {
-  return <div />;
-}
diff --git a/packages/prosody-ui/src/thai/logic/thainlp.ts b/packages/prosody-ui/src/thai/logic/thainlp.ts
index 031bf4c..dc6ed23 100644
--- a/packages/prosody-ui/src/thai/logic/thainlp.ts
+++ b/packages/prosody-ui/src/thai/logic/thainlp.ts
@@ -1,4 +1,4 @@
-import type { AsyncRes } from "sortug";
+import type { AsyncRes } from "@sortug/lib";
 import type { AnalyzeRes } from "../../logic/types";
 
 const ENDPOINT = "http://192.168.1.110:8001";
@@ -24,7 +24,7 @@ export async function segmentateThai(sentence: string): AsyncRes<AnalyzeRes[]> {
   return await call("/segmentate", { word: sentence });
 }
 
-export const POSMAP: Record<string, string> = {
+export const POSMAP = {
   ADJ: "Adjective",
   ADP: "Adposition",
   ADV: "Adverb",
@@ -87,4 +87,8 @@ export const POSMAP: Record<string, string> = {
   EITT: "Ending for interrogative sentence",
   NEG: "Negator",
   PUNC: "Punctuation",
-};
+} as const;
+type POSTYPE = typeof POSMAP;
+
+export type POS_CODE = keyof POSTYPE;
+export type POS = POSTYPE[POS_CODE];