create thread from ask result

web/package.json

@@ -44,6 +44,7 @@
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "lucide-react": "^0.451.0",
+    "marked": "^15.0.4",
     "mime-db": "^1.53.0",
     "next": "15.0.0",
     "nuqs": "^1.20.0",

web/src/components/ask/CreateThreadFromResultModal/CreateThreadFromResultModal.tsx

@@ -0,0 +1,56 @@
+import { ModalDrawer } from "@/components/site/Modaldrawer/Modaldrawer";
+import { Button } from "@/components/ui/button";
+import { DiscussionIcon } from "@/components/ui/icons/Discussion";
+import { UseDisclosureProps, useDisclosure } from "@/utils/useDisclosure";
+
+import { CreateThreadFromResultScreen } from "./CreateThreadFromResultScreen";
+import { Props } from "./useCreateThreadFromResult";
+
+export function CreateThreadFromResultModal({
+  contentMarkdown,
+  sources,
+  onClose,
+  onOpen,
+  isOpen,
+}: UseDisclosureProps & Props) {
+  return (
+    <ModalDrawer
+      onOpen={onOpen}
+      isOpen={isOpen}
+      onClose={onClose}
+      title={`Post thread from Ask result`}
+    >
+      <CreateThreadFromResultScreen
+        onFinish={onClose}
+        contentMarkdown={contentMarkdown}
+        sources={sources}
+      />
+    </ModalDrawer>
+  );
+}
+
+export function CreateThreadFromResultModalTrigger({
+  contentMarkdown,
+  sources,
+}: Props) {
+  const disclosure = useDisclosure();
+
+  return (
+    <>
+      <Button
+        size="xs"
+        title="Create a thread from this Ask result"
+        onClick={disclosure.onOpen}
+      >
+        <DiscussionIcon />
+        Create Thread
+      </Button>
+
+      <CreateThreadFromResultModal
+        {...disclosure}
+        contentMarkdown={contentMarkdown}
+        sources={sources}
+      />
+    </>
+  );
+}

web/src/components/ask/CreateThreadFromResultModal/CreateThreadFromResultScreen.tsx

@@ -0,0 +1,56 @@
+import { CategorySelect } from "@/components/category/CategorySelect/CategorySelect";
+import { ContentFormField } from "@/components/content/ContentComposer/ContentField";
+import { Button } from "@/components/ui/button";
+import { FormControl } from "@/components/ui/form/FormControl";
+import { FormErrorText } from "@/components/ui/form/FormErrorText";
+import { FormHelperText } from "@/components/ui/form/FormHelperText";
+import { Input } from "@/components/ui/input";
+import { HStack, WStack } from "@/styled-system/jsx";
+import { lstack } from "@/styled-system/patterns";
+
+import { Props, useCreateThreadFromResult } from "./useCreateThreadFromResult";
+
+export function CreateThreadFromResultScreen(props: Props) {
+  const { form, contentHTML, handlers } = useCreateThreadFromResult(props);
+
+  return (
+    <form className={lstack()} onSubmit={handlers.handleSubmit}>
+      <FormControl>
+        <FormHelperText>Thread title</FormHelperText>
+        <Input placeholder="Title" {...form.register("title")} />
+        <FormErrorText>{form.formState.errors.title?.message}</FormErrorText>
+      </FormControl>
+
+      <FormControl>
+        <FormHelperText>Category</FormHelperText>
+        <CategorySelect name="category" control={form.control} />
+        <FormErrorText>{form.formState.errors.category?.message}</FormErrorText>
+      </FormControl>
+
+      <FormControl>
+        <FormHelperText>Thread content</FormHelperText>
+        <ContentFormField
+          name="content"
+          control={form.control}
+          initialValue={contentHTML}
+        />
+        <FormErrorText>{form.formState.errors.content?.message}</FormErrorText>
+      </FormControl>
+
+      <WStack>
+        <Button
+          size="sm"
+          variant="outline"
+          type="button"
+          onClick={props.onFinish}
+        >
+          Cancel
+        </Button>
+
+        <Button size="sm" variant="solid">
+          Post
+        </Button>
+      </WStack>
+    </form>
+  );
+}

web/src/components/ask/CreateThreadFromResultModal/useCreateThreadFromResult.ts

@@ -0,0 +1,65 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { marked } from "marked";
+import { use } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { handle } from "@/api/client";
+import { threadCreate } from "@/api/openapi-client/threads";
+
+type DatagraphRef = {
+  id: string;
+  kp: string;
+  href: string;
+};
+
+export type Props = {
+  contentMarkdown: string;
+  sources: DatagraphRef[];
+  onFinish?: () => void;
+};
+
+export const FormSchema = z.object({
+  category: z.string(),
+  title: z.string(),
+  content: z.string(),
+});
+export type Form = z.infer<typeof FormSchema>;
+
+export function useCreateThreadFromResult(props: Props) {
+  const contentHTML = marked.parse(props.contentMarkdown, {
+    async: false,
+  });
+
+  const form = useForm<Form>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      category: undefined,
+      title: "",
+      content: contentHTML,
+    },
+  });
+
+  console.log(form.watch());
+
+  const handleSubmit = form.handleSubmit(async (data: Form) => {
+    await handle(async () => {
+      await threadCreate({
+        title: data.title,
+        body: data.content,
+        category: data.category,
+        visibility: "published",
+      });
+
+      props.onFinish?.();
+    });
+  });
+
+  return {
+    form,
+    contentHTML,
+    handlers: {
+      handleSubmit,
+    },
+  };
+}

web/src/screens/ask/AskScreen.tsx

@@ -9,6 +9,7 @@ import { handle } from "@/api/client";
 import { useNodeGet } from "@/api/openapi-client/nodes";
 import { useThreadGet } from "@/api/openapi-client/threads";
 import { Account, DatagraphItemKind } from "@/api/openapi-schema";
+import { CreateThreadFromResultModalTrigger } from "@/components/ask/CreateThreadFromResultModal/CreateThreadFromResultModal";
 import {
   DatagraphItemNodeCard,
   DatagraphItemPostGenericCard,
@@ -183,6 +184,8 @@ export function Ask() {
     );
   }
 
+  const isFinishedWithResult = isLoading === false && content.length > 0;
+
   return (
     <LStack>
       <styled.form
@@ -212,6 +215,28 @@ export function Ask() {
           {replaceSdrUrls(content)}
         </ReactMarkdown>
 
+        {isFinishedWithResult && (
+          <WStack>
+            {/* <Button
+              type="button"
+              size="xs"
+              variant="outline" onClick={handleShare}
+            >
+              Share
+            </Button> */}
+
+            <HStack>
+              {/* <Button type="button" size="xs" variant="outline">
+                Create in library
+              </Button> */}
+              <CreateThreadFromResultModalTrigger
+                contentMarkdown={replaceSdrUrls(content)}
+                sources={sourceList}
+              />
+            </HStack>
+          </WStack>
+        )}
+
         {sourceList.length > 0 && (
           <LStack>
             <Heading>Sources from the community</Heading>

web/yarn.lock

@@ -8170,6 +8170,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"marked@npm:^15.0.4":
+  version: 15.0.4
+  resolution: "marked@npm:15.0.4"
+  bin:
+    marked: bin/marked.js
+  checksum: 10c0/e2bfd9178e5242cc814aaf8020f3c2e954c047652c498dac0732f4b711d5e3ab80dbc54b964799d80470d6c515a24905e554c4a40f87b05dedc26e4e36cfdfdb
+  languageName: node
+  linkType: hard
+
 "mdast-util-from-markdown@npm:^2.0.0":
   version: 2.0.2
   resolution: "mdast-util-from-markdown@npm:2.0.2"
@@ -11392,6 +11401,7 @@ __metadata:
     js-cookie: "npm:^3.0.5"
     lodash: "npm:^4.17.21"
     lucide-react: "npm:^0.451.0"
+    marked: "npm:^15.0.4"
     mime-db: "npm:^1.53.0"
     next: "npm:15.0.0"
     nuqs: "npm:^1.20.0"