1const chat = useChat({2    id: chatId,3    onToolCall: ({ toolCall }) => {4      return;5    },6    transport: new DefaultChatTransport({7      api: "/api/chat",8      body: {9        technique: selectedTechnique,10        techniqueConfig,11        modelSettings: {12          model: settings.defaultModel,13          temperature: settings.defaultTemperature,14          maxTokens: settings.maxTokens,15        },16      },17    }),18    19  });2021...222324{chat.messages.length > 0 && (25            <div className="space-y-6">26              {chat.messages.map((message) => {27                return (28                  <div29                    key={message.id}30                    className="flex flex-row gap-4 items-start"31                  >32                    <div className="min-w-16">33                      <span34                        className={cn(35                          "rounded-md px-2 py-1 text-xs font-medium",36                          message.role !== "user"37                            ? "bg-yellow-400 dark:bg-yellow-600 text-yellow-900 dark:text-yellow-100"38                            : "bg-blue-400 dark:bg-blue-600 text-blue-900 dark:text-blue-100"39                        )}40                      >41                        {message.role === "user" ? "User" : "AI"}42                      </span>43                    </div>4445                    <div className="flex-1 min-w-0 space-y-4">46                      {message.parts.map((part, i) => {47                        if (part.type === "text") {48                          return (49                            <div50                              key={i}51                              className="prose prose-sm dark:prose-invert max-w-none"52                            >53                              <Markdown>{part.text}</Markdown>54                            </div>55                          );56                        }5758                        if (part.type === "tool-askClarifyingQuestion") {59                          const callId = part.toolCallId;60                          const inputPart = part.input as {61                            suggestions: string[];62                            question: string;63                          };6465                          switch (part.state) {66                            case "input-streaming":67                              return (68                                <div key={callId}>69                                  Loading confirmation request...70                                </div>71                              );72                            case "output-available": {73                              return (74                                <div key={callId}>75                                  {JSON.stringify(part.output, null, 2)}76                                </div>77                              );78                            }7980                            case "input-available": {81                              if (!inputPart) return null;8283                              if (typeof inputPart === "string") {84                                return (85                                  <div key={i}>86                                    <Markdown>{inputPart}</Markdown>87                                  </div>88                                );89                              }9091                              return (92                                <div key={i}>93                                  <Markdown>94                                    {"**" +95                                      inputPart.question +96                                      "** 97" +98                                      inputPart.suggestions99                                        .map((ele) => `- ${ele}`)100                                        .join("101 ")}102                                  </Markdown>103104                                  <form105                                    onSubmit={async (e) => {106                                      console.log("being submitted");107                                      e.preventDefault();108109                                      const formData = new FormData(110                                        e.target as HTMLFormElement111                                      );112                                      const userInput =113                                        formData.get("userInput");114115                                      console.log(userInput);116117                                      if (userInput) {118                                        console.log("userInput tool call: ", {119                                          tool: part.type,120                                          toolCallId: part.toolCallId,121                                          output: userInput,122                                        });123124                                        await chat.addToolOutput({125                                          tool: part.type,126                                          toolCallId: part.toolCallId,127                                          output: userInput,128                                        });129130                                        console.log(131                                          "DONE userInput tool call: ",132                                          {133                                            tool: part.type,134                                            toolCallId: part.toolCallId,135                                            output: userInput,136                                          }137                                        );138                                      }139                                    }}140                                    className="p-2 border bg-secondary/50 rounded-md mt-2"141                                  >142                                    <Textarea143                                      name="userInput"144                                      placeholder="Your answer..."145                                      className="mb-2 w-full"146                                    />147                                    <Button size={"sm"} type="submit">148                                      Response149                                    </Button>150                                  </form>151                                </div>152                              );153                            }154                          }155156                          return null;157                        }158159                        return null;160                      })}161                    </div>162                  </div>163                );164              })}165            </div>166          )}