summaryrefslogtreecommitdiffhomepage
path: root/js/example/client.tsx
blob: 65f0ebe15dafee17874861776bc7b23a698dd3b8 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import React, { useEffect, useState } from "react";
import type { Server } from "../src/server/server";
import type { Session } from "../src/session/session";
import { hc } from "hono/client";
import { createInterface, Interface } from "readline";

const client = hc<Server.App>(`http://localhost:16713`);


const session = await client.session_create.$post().then((res) => res.json());

const initial: {
  session: {
    info: {
      [sessionID: string]: Session.Info;
    };
    message: {
      [sessionID: string]: {
        [messageID: string]: Session.Message;
      };
    };
  };
} = {
  session: {
    info: {
      [session.id]: session
    },
    message: {
      [session.id]: {}
    },
  },
};

import { render, Text, Newline, useStdout, Box } from "ink";
import TextInput from "ink-text-input"

function App() {
  const [state, setState] = useState(initial)
  const [input, setInput] = useState("")

  useEffect(() => {
    fetch("http://localhost:16713/event")
      .then(stream => {
        const decoder = new TextDecoder();
        stream.body!.pipeTo(
          new WritableStream({
            write(chunk) {
              const data = decoder.decode(chunk);
              if (data.startsWith("data: ")) {
                try {
                  const event = JSON.parse(data.substring(6));
                  switch (event.type) {
                    case "storage.write":
                      const splits: string[] = event.properties.key.split("/");
                      let item = state as any;
                      for (let i = 0; i < splits.length; i++) {
                        const part = splits[i];
                        if (i === splits.length - 1) {
                          item[part] = event.properties.body;
                          continue;
                        }
                        if (!item[part]) item[part] = {};
                        item = item[part];
                      }
                  }
                  setState({ ...state })
                } catch {
                }
              }
            },
          }),
        )
      });
  }, [])


  return (
    <>
      <Text>{session.title}</Text>
      {
        Object.values(state.session.message[session.id]).map(message => {
          return Object.values(message.parts).map((part, index) => {
            if (part.type === "text") {
              return <Text key={`${message.id}-${index}`}>{message.role}: {part.text}</Text>
            }
          })
        })
      }
      <Box gap={1} >
        <Text>Input:</Text>
        <TextInput
          value={input}
          onChange={setInput}
          onSubmit={() => {
            setInput("")
            client.session_chat.$post({
              json: {
                sessionID: session.id,
                parts: [
                  {
                    type: "text",
                    text: input,
                  },
                ],
              }
            })
          }}
        />
      </Box>
    </>
  );
};

console.clear();
render(<App />);