Val Town Code SearchReturn to Val Town

256        </>
257      );
258    case "fetch":
259      return (
260        <Details
269          summary={(
270            <>
271              <div>fetch:</div>
272              <div>{args?.valPath}</div>
273              <div>{args?.urlPath || "/"}</div>
275          )}>
276          {result?.type === "success" ? (
277            <div className="fetch-result">
278              <div className="fetch-header">
279                <span className={`status-badge ${result.data.status >= 200 && result.data.status < 300 ? 'success' : 
280                                               result.data.status >= 300 && result.data.status < 400 ? 'redirect' : 
284                <span className="response-time">{result.data.responseTime}ms</span>
285              </div>
286              <div className="fetch-section">
287                <h4>Headers</h4>
288                <pre className="fetch-headers">{JSON.stringify(result.data.headers, null, 2)}</pre>
289              </div>
290              <div className="fetch-section">
291                <h4>Response Body</h4>
292                <pre className="fetch-body">
293                  {typeof result.data.body === 'object' 
294                    ? JSON.stringify(result.data.body, null, 2) 
298            </div>
299          ) : (
300            <div className="fetch-error">
301              <h4>Error</h4>
302              <pre>{result?.message || "Unknown error"}</pre>

215});
216
217export default app.fetch;
218

27
28// This is the entry point for HTTP vals
29export default app.fetch;
30

1import { makeChangeValTypeTool } from "./change-val-type.ts";
2import { makeFetchTool } from "./fetch.ts";
3import { makeTextEditorTool } from "./text-editor.ts";
4import { makeTracesTool } from "./traces.ts";
8  makeTextEditorTool, 
9  makeChangeValTypeTool, 
10  makeFetchTool,
11  makeTracesTool,
12  thinkTool,

11 * Creates a tool for making HTTP requests to vals in a Val Town project
12 */
13export const makeFetchTool = (
14  { bearerToken, project, branch_id }: { bearerToken?: string; project?: any; branch_id?: string } = {},
15) =>
16  tool({
17    name: "fetch",
18    description: "Make an HTTP request to a Val Town val and return the response. Useful for testing HTTP vals. The HTTP response body will be truncated to 5000 characters.",
19    parameters: z.object({
68        return {
69          type: "error",
70          message: `Error fetching val at path '${valPath}': ${error.message}`,
71        };
72      }
83        return {
84          type: "error",
85          message: `The val at path '${valPath}' is not an HTTP val. Only HTTP vals can be called with fetch.`,
86        };
87      }
111      let response;
112      try {
113        response = await fetch(valEndpoint + urlPath, options);
114      } catch (error: any) {
115        // Return error information

239    
240    // Inject data to avoid extra round-trips
241    const initialData = await fetchInitialData();
242    const dataScript = `<script>
243      window.__INITIAL_DATA__ = ${JSON.stringify(initialData)};
286
2875. **API Design:**
288   - `fetch` handler is the entry point for HTTP vals
289   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`
290
291

7  const [loading, setLoading] = useState(true);
8
9  const fetchBalance = async () => {
10    try {
11      const response = await fetch("/api/credit-balance");
12      if (response.ok) {
13        const data = await response.json();
15        setBalance(data.balance);
16      } else {
17        console.error("Failed to fetch balance");
18      }
19    } catch (err) {
20      console.error("Error fetching balance:", err);
21    } finally {
22      setLoading(false);
25
26  useEffect(() => {
27    fetchBalance();
28  }, []);
29

51        files={project.data?.files}
52        branchId={branchId}
53        refetch={project.refetch}
54      />
55    </ProjectContext.Provider>
61  files,
62  branchId,
63  refetch,
64}: {
65  project: any;
66  files: any[];
67  branchId: string;
68  refetch: () => void;
69}) {
70  const [images, setImages] = useState<(string|null)[]>([]);
71  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
72  const { audio, user } = useContext(AppContext);
73  const { balance, loading: balanceLoading, refetch: refetchBalance } = useCreditBalance();
74
75  const {
94  useLoadingFavicon(running);
95
96  // Track when requests end and refetch balance
97  const prevRunning = useRef(running);
98  useEffect(() => {
99    // If running changed from true to false, request just ended
100    if (prevRunning.current === true && running === false) {
101      refetchBalance();
102    }
103    prevRunning.current = running;
104  }, [running, refetchBalance]);
105
106  // Auto-poll balance every 4 seconds when credits are insufficient
110    if (hasInsufficientCredits) {
111      const intervalId = setInterval(() => {
112        refetchBalance();
113      }, 4000); // 4 seconds
114      
115      return () => clearInterval(intervalId);
116    }
117  }, [balanceLoading, balance, refetchBalance]);
118
119  useEffect(() => {
120    if (!messages?.length) return;
121    let last = messages.at(-1);
122    if (shouldRefetch(last)) {
123      refetch();
124    }
125  }, [messages]);
196                <button
197                  onClick={() => {
198                    refetchBalance();
199                  }}
200                  className="icon-button"
227}
228
229function shouldRefetch (message) {
230  for (let i = 0; i < message?.parts?.length; i++) {
231    let part = message.parts[i];

32        return;
33      }
34      branches.refetch();
35      if (res?.branch?.id) {
36        navigate(`/chat/${projectId}/branch/${res.branch.id}`);

62    });
63
64    const response = await fetch(tokenUrl, {
65      method: "POST",
66      headers: {
96    });
97
98    const response = await fetch(tokenUrl, {
99      method: "POST",
100      headers: {