improve querying, rendering

src/App.css

@@ -4,3 +4,25 @@
   padding: 2rem;
   text-align: center;
 }
+
+.data {
+  text-align: left;
+  max-width: 60em;
+  margin: auto;
+  overflow-x: auto;
+  border: 1px solid grey;
+}
+
+.message {
+  .lines {
+    margin-bottom: 1em;
+  }
+
+  .line {
+    margin: 0.2em;
+  }
+
+  details {
+    margin: 1em;
+  }
+}

src/App.tsx

@@ -1,62 +1,106 @@
-import { useEffect, useState } from 'react'
+import { FormEvent, useEffect, useState, KeyboardEvent, } from 'react'
 import './App.css'
 import Anthropic from "@anthropic-ai/sdk"
 import useLocalStorageState from "use-local-storage-state"
 import { useQuery } from "react-query"
-
+type Message = Anthropic.Message;
 
 const TokenKey = "anthropic-token"
+const PromptKey = "anthropic-prompt"
 
+function Message(msg: Message) {
+  const { content } = msg
+  return <div className={"message"}>
+    <h2>Response:</h2>
+    {
+      content.map((block, idx) =>
+        block.type === "text" ?
+          <div key={idx} className={"lines"}>{block.text.split("\n").map(
+            (line, lineno) => <p key={`line-${lineno}`} className={"line"}>{line}</p>
+          )}</div> :
+          <pre key={idx}>{JSON.stringify(block, null, 2)}</pre>
+      )
+    }
+    <details>
+      <summary>Raw</summary>
+      <pre className={"data"}>{JSON.stringify(msg, null, 2)}</pre>
+    </details>
+  </div>
+}
 function App() {
   const [ token, setToken ] = useLocalStorageState<string | null>(TokenKey, { defaultValue: null })
   const [ anthropic, setAnthropic ] = useState<Anthropic | null>(null)
-  const [ prompt, setPrompt ] = useState("")
+  const [ prompt, setPrompt ] = useLocalStorageState(PromptKey, { defaultValue: "" })
+  const [ submitPrompt, setSubmitPrompt ] = useState("")
+
   useEffect(() => {
     const anthropic = new Anthropic({ apiKey: token, dangerouslyAllowBrowser: true })
     setAnthropic(anthropic)
-  }, [ token ])
+  }, [token])
 
-  const response = useQuery({ queryKey: ['query', token ], queryFn: async () => {
-      if (!anthropic) {
+  const response = useQuery({
+    queryKey: ['query', token, submitPrompt],
+    queryFn: async () => {
+      if (!anthropic || !submitPrompt) {
         return
       }
-      const response = await anthropic.messages.create({
-        messages: [{ content: prompt, role: "user" }],
+      const message = await anthropic.messages.create({
+        messages: [{ content: submitPrompt, role: "user" }],
         model: "claude-3-5-sonnet-20240620",
         system: "Respond only with short poems.",
         max_tokens: 100,
         temperature: 0,
       })
-      console.log("anthropic response", response)
-      return response
-    }
+      console.log("anthropic response", message)
+      return message
+    },
   })
+  const { data, refetch, isLoading, isError, error } = response
+  console.log("response", response)
+
+  const handleSubmit = (e?: FormEvent<HTMLFormElement>) => {
+    e?.preventDefault()
+    setSubmitPrompt(prompt)
+    refetch()
+    console.log("submitting prompt", prompt)
+  }
+
+  const handleKeyPress = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault()
+      handleSubmit()
+    }
+  }
+
   return (
     <div>
       <h1>Claude client</h1>
-      <form>
+      <form onSubmit={handleSubmit}>
         <div>
           <label>
-            Query:
+            <h2>Query:</h2>
             <textarea
               cols={50}
               rows={5}
               value={prompt}
               onChange={(e) => setPrompt(e.target.value)}
+              onKeyDown={handleKeyPress}
             />
           </label>
         </div>
         <div>
-          <button onClick={() => response.refetch()}>Submit</button>
+          <button type="submit">Submit</button>
         </div>
         <div>
-          <pre>{JSON.stringify(response.data, null, 2)}</pre>
+          {isLoading && <p>Loading...</p>}
+          {isError && <p>Error: {(error as Error).message}</p>}
+          {data && <Message {...data} />}
         </div>
         <div>
           <label>
             Token:
             <input
-              type={"password"}
+              type="password"
               value={token ?? ""}
               onChange={(e) => setToken(e.target.value)}
             />