Spaces:

firebird-technologies
/

NoteStack-Test

Runtime error

NoteStack-Test / frontend /src /components /video /SourcePicker.tsx

Refactor VideoTemplateEditor component: remove AI editing features and related state management, streamline template loading, and update styles for improved layout. Enhance CSS for responsive design and visual consistency across various components, including dropdowns, sync stats, and quiz elements. Remove deprecated premium badge styles and adjust layout for chat components.

66de9c8 about 1 month ago

Raw History Blame Contribute Delete

8.24 kB

import { useEffect, useRef, useState } from "react";
import { Link } from "react-router-dom";
import type { ChatSummary, Doc, NotebookSummary } from "../../api/types";
import { DocPicker } from "../DocPicker";
import { Dropdown } from "../Dropdown";
import { Loading } from "../ui";
import { ChatsMenu, PostsMenu } from "./PostsMenu";
import { freshlySeeded, loadDocs, loadNotebooks, sourceCache } from "./sourceCache";

/** What a video is made from: a notebook's (or the whole archive's) ticked posts, combined into one video, or one
 * post. */
export type VideoSource = { kind: "notebook"; id: string } | { kind: "post"; id: string };

const ONE_POST = "__post";
/** Most posts one video can combine. */
export const MAX_VIDEO_POSTS = 5;

/** Step 1's source: a notebook (its first MAX_VIDEO_POSTS indexed posts ticked, retick to change) or a single post. */
export function SourcePicker({
  source,
  onSource,
  postIds,
  onPostIds,
  max = MAX_VIDEO_POSTS,
  what = "video",
  compact = false,
  notebookTitle,
  chats,
  chatIds = [],
  onChatIds,
  autoSelect = true,
  autoCount,
}: {
  source: VideoSource | null;
  onSource: (s: VideoSource | null) => void;
  postIds: string[];
  onPostIds: (ids: string[]) => void;
  /** Most posts that can be ticked. */
  max?: number;
  /** What is being made, for the wording ("video", "quiz"). */
  what?: string;
  /** Under a heading that already says "made from": no repeated labels or hints. */
  compact?: boolean;
  /** With compact: the name of the fixed notebook. */
  notebookTitle?: string;
  /** With compact: the notebook's chats, to pick from beside the posts (posts and chats can be combined). */
  chats?: ChatSummary[];
  chatIds?: string[];
  onChatIds?: (ids: string[]) => void;
  /** Tick the first posts when the list loads. Off when the dialog was opened from a chat. */
  autoSelect?: boolean;
  /** How many posts to tick to start with (default: as many as can be ticked). */
  autoCount?: number;
}) {
  const [notebooks, setNotebooks] = useState<NotebookSummary[] | null>(sourceCache.notebooks);
  const [docs, setDocs] = useState<Doc[] | null>(null);
  const ticks = useRef(postIds);
  ticks.current = postIds;
  // "Create a video on a single post" picked in the menu: the archive is listed, and stays listed once a post is
  // chosen (its radio ticked), so another can be picked from the same list.
  const [choosing, setChoosing] = useState(false);
  useEffect(() => {
    loadNotebooks().then(setNotebooks).catch(() => setNotebooks((n) => n ?? []));
  }, []);
  const notebookId = source?.kind === "notebook" ? source.id : null;
  const postId = source?.kind === "post" ? source.id : null;
  useEffect(() => {
    if (!notebookId) return;
    let live = true;
    const tickable = (list: Doc[]) => list.filter((d) => !d.locked).map((d) => d.id);
    const firstFew = (list: Doc[]) => tickable(list).slice(0, Math.min(autoCount ?? max, max));
    // A cached list shows at once, the first few posts ticked; the refresh below then only updates it.
    const cached = sourceCache.docs.get(notebookId);
    setDocs(cached ?? null);
    if (cached && autoSelect) onPostIds(firstFew(cached));
    // Just handed over by the page that holds them (the notebook page): already current, no need to load them again.
    if (cached && freshlySeeded(notebookId)) return;
    loadDocs(notebookId).then((fresh) => {
      if (!live) return;
      setDocs(fresh);
      if (!cached) return autoSelect ? onPostIds(firstFew(fresh)) : undefined; // the first few in by default
      // Keep the user's ticks through the refresh: drop posts that are gone, tick new ones while there is room.
      const now = new Set(tickable(fresh));
      const before = new Set(cached.map((d) => d.id));
      onPostIds([...ticks.current.filter((id) => now.has(id)), ...[...now].filter((id) => !before.has(id))]
        .slice(0, max));
    }).catch(() => undefined);
    return () => {
      live = false;
    };
  }, [notebookId, onPostIds, max, autoSelect, autoCount]);

  const ticked = docs ? postIds.length : 0;
  const pickable = docs?.filter((d) => !d.locked).length ?? 0;

  // Compact (the quiz, flashcard and report dialogs): the notebook the dialog was opened from, shown and fixed, and one
  // dropdown to pick its posts from. No notebook choice and no list.
  if (compact) {
    return (
      <div className="sp-fixed">
        <div className="sp-notebook" title="What this is made from">
          <strong>{notebookTitle || "This notebook"}</strong>
          {(docs || chatIds.length > 0) && (
            <span className="muted">
              {[docs && postIds.length ? `${postIds.length} post${postIds.length === 1 ? "" : "s"}` : "",
                chatIds.length ? `${chatIds.length} chat${chatIds.length === 1 ? "" : "s"}` : ""].filter(Boolean).join(" + ")
                || (docs ? `${docs.length} post${docs.length === 1 ? "" : "s"}` : "")}
            </span>
          )}
        </div>
        <div className="sp-menus">
          {chats && onChatIds && <ChatsMenu chats={chats} selected={chatIds} onChange={onChatIds} max={5} />}
          {notebookId && docs && docs.length === 0 ? (
            <p className="muted small">
              No posts yet. <Link to="/app/sources">Connect a source</Link>
            </p>
          ) : notebookId ? (
            <PostsMenu docs={docs} loading={!docs} selected={postIds} onChange={onPostIds} max={max} />
          ) : null}
        </div>
      </div>
    );
  }

  return (
    <>
      <div className="field">
        {!compact && <span className="vw-label">Made from</span>}
        <Dropdown
          label="Made from"
          value={choosing || postId ? ONE_POST : notebookId ?? ONE_POST}
          onChange={(v) => {
            if (v === ONE_POST) {
              setChoosing(true);
              onSource(null);
            } else {
              setChoosing(false);
              onSource({ kind: "notebook", id: v });
            }
          }}
          options={[
            // The API lists the "All posts" notebook first, so the sections come out in order.
            ...(notebooks ?? []).map((n) => ({ value: n.id, label: n.is_archive ? "My whole archive" : n.title,
                                               hint: `${n.document_count} posts`, group: n.is_archive ? "Archive" : "Notebooks" })),
            { value: ONE_POST, label: `Create a ${what} on a single post`, group: "Single post" },
          ]}
        />
        {!compact && <small className="muted vw-hint">Choose a notebook, your whole archive or a single post.</small>}
      </div>
      {(choosing || postId) && (
        <DocPicker selected={postId ? [postId] : []} onChange={(ids) => onSource({ kind: "post", id: ids[0] })} single />
      )}
      {notebookId && !choosing && (
        !docs ? (
          // Same shape as the loaded list, so the form does not jump when the posts arrive.
          <div className="field">
            {!compact && <span className="vw-label">Posts</span>}
            <div className="picker">
              <div className="picker-bar">
                <input className="input input-sm" placeholder="Search posts" disabled aria-label="Search posts" />
                <div className="picker-actions mono muted"><span>Loading</span></div>
              </div>
              <div className="picker-list vw-posts-wait"><Loading label="Loading posts" /></div>
            </div>
            <small className="muted">&nbsp;</small>
          </div>
        ) : docs.length === 0 ? (
          <p className="muted">
            This notebook has no posts yet. <Link to="/app/sources">Connect a source</Link> or pick another notebook.
          </p>
        ) : (
          <div className="field">
            {!compact && <span className="vw-label">Posts</span>}
            <DocPicker docs={docs} selected={postIds} onChange={onPostIds} max={max} count={false} />
            <small className="muted vw-hint">
              {ticked === 0
                ? "Tick at least one post."
                : `You can select up to ${Math.min(max, pickable)} (${ticked} selected). They are combined into one ${what}.`}
            </small>
          </div>
        )
      )}
    </>
  );
}

	import { useEffect, useRef, useState } from "react";
	import { Link } from "react-router-dom";
	import type { ChatSummary, Doc, NotebookSummary } from "../../api/types";
	import { DocPicker } from "../DocPicker";
	import { Dropdown } from "../Dropdown";
	import { Loading } from "../ui";
	import { ChatsMenu, PostsMenu } from "./PostsMenu";
	import { freshlySeeded, loadDocs, loadNotebooks, sourceCache } from "./sourceCache";

	/** What a video is made from: a notebook's (or the whole archive's) ticked posts, combined into one video, or one
	* post. */
	export type VideoSource = { kind: "notebook"; id: string } \| { kind: "post"; id: string };

	const ONE_POST = "__post";
	/** Most posts one video can combine. */
	export const MAX_VIDEO_POSTS = 5;

	/** Step 1's source: a notebook (its first MAX_VIDEO_POSTS indexed posts ticked, retick to change) or a single post. */
	export function SourcePicker({
	source,
	onSource,
	postIds,
	onPostIds,
	max = MAX_VIDEO_POSTS,
	what = "video",
	compact = false,
	notebookTitle,
	chats,
	chatIds = [],
	onChatIds,
	autoSelect = true,
	autoCount,
	}: {
	source: VideoSource \| null;
	onSource: (s: VideoSource \| null) => void;
	postIds: string[];
	onPostIds: (ids: string[]) => void;
	/** Most posts that can be ticked. */
	max?: number;
	/** What is being made, for the wording ("video", "quiz"). */
	what?: string;
	/** Under a heading that already says "made from": no repeated labels or hints. */
	compact?: boolean;
	/** With compact: the name of the fixed notebook. */
	notebookTitle?: string;
	/** With compact: the notebook's chats, to pick from beside the posts (posts and chats can be combined). */
	chats?: ChatSummary[];
	chatIds?: string[];
	onChatIds?: (ids: string[]) => void;
	/** Tick the first posts when the list loads. Off when the dialog was opened from a chat. */
	autoSelect?: boolean;
	/** How many posts to tick to start with (default: as many as can be ticked). */
	autoCount?: number;
	}) {
	const [notebooks, setNotebooks] = useState<NotebookSummary[] \| null>(sourceCache.notebooks);
	const [docs, setDocs] = useState<Doc[] \| null>(null);
	const ticks = useRef(postIds);
	ticks.current = postIds;
	// "Create a video on a single post" picked in the menu: the archive is listed, and stays listed once a post is
	// chosen (its radio ticked), so another can be picked from the same list.
	const [choosing, setChoosing] = useState(false);

	useEffect(() => {
	loadNotebooks().then(setNotebooks).catch(() => setNotebooks((n) => n ?? []));
	}, []);

	const notebookId = source?.kind === "notebook" ? source.id : null;
	const postId = source?.kind === "post" ? source.id : null;

	useEffect(() => {
	if (!notebookId) return;
	let live = true;
	const tickable = (list: Doc[]) => list.filter((d) => !d.locked).map((d) => d.id);
	const firstFew = (list: Doc[]) => tickable(list).slice(0, Math.min(autoCount ?? max, max));
	// A cached list shows at once, the first few posts ticked; the refresh below then only updates it.
	const cached = sourceCache.docs.get(notebookId);
	setDocs(cached ?? null);
	if (cached && autoSelect) onPostIds(firstFew(cached));
	// Just handed over by the page that holds them (the notebook page): already current, no need to load them again.
	if (cached && freshlySeeded(notebookId)) return;
	loadDocs(notebookId).then((fresh) => {
	if (!live) return;
	setDocs(fresh);
	if (!cached) return autoSelect ? onPostIds(firstFew(fresh)) : undefined; // the first few in by default
	// Keep the user's ticks through the refresh: drop posts that are gone, tick new ones while there is room.
	const now = new Set(tickable(fresh));
	const before = new Set(cached.map((d) => d.id));
	onPostIds([...ticks.current.filter((id) => now.has(id)), ...[...now].filter((id) => !before.has(id))]
	.slice(0, max));
	}).catch(() => undefined);
	return () => {
	live = false;
	};
	}, [notebookId, onPostIds, max, autoSelect, autoCount]);

	const ticked = docs ? postIds.length : 0;
	const pickable = docs?.filter((d) => !d.locked).length ?? 0;

	// Compact (the quiz, flashcard and report dialogs): the notebook the dialog was opened from, shown and fixed, and one
	// dropdown to pick its posts from. No notebook choice and no list.
	if (compact) {
	return (
	<div className="sp-fixed">
	<div className="sp-notebook" title="What this is made from">
	<strong>{notebookTitle \|\| "This notebook"}</strong>
	{(docs \|\| chatIds.length > 0) && (
	<span className="muted">
	{[docs && postIds.length ? `${postIds.length} post${postIds.length === 1 ? "" : "s"}` : "",
	chatIds.length ? `${chatIds.length} chat${chatIds.length === 1 ? "" : "s"}` : ""].filter(Boolean).join(" + ")
	\|\| (docs ? `${docs.length} post${docs.length === 1 ? "" : "s"}` : "")}
	</span>
	)}
	</div>
	<div className="sp-menus">
	{chats && onChatIds && <ChatsMenu chats={chats} selected={chatIds} onChange={onChatIds} max={5} />}
	{notebookId && docs && docs.length === 0 ? (
	<p className="muted small">
	No posts yet. <Link to="/app/sources">Connect a source</Link>
	</p>
	) : notebookId ? (
	<PostsMenu docs={docs} loading={!docs} selected={postIds} onChange={onPostIds} max={max} />
	) : null}
	</div>
	</div>
	);
	}

	return (
	<>
	<div className="field">
	{!compact && <span className="vw-label">Made from</span>}
	<Dropdown
	label="Made from"
	value={choosing \|\| postId ? ONE_POST : notebookId ?? ONE_POST}
	onChange={(v) => {
	if (v === ONE_POST) {
	setChoosing(true);
	onSource(null);
	} else {
	setChoosing(false);
	onSource({ kind: "notebook", id: v });
	}
	}}
	options={[
	// The API lists the "All posts" notebook first, so the sections come out in order.
	...(notebooks ?? []).map((n) => ({ value: n.id, label: n.is_archive ? "My whole archive" : n.title,
	hint: `${n.document_count} posts`, group: n.is_archive ? "Archive" : "Notebooks" })),
	{ value: ONE_POST, label: `Create a ${what} on a single post`, group: "Single post" },
	]}
	/>
	{!compact && <small className="muted vw-hint">Choose a notebook, your whole archive or a single post.</small>}
	</div>

	{(choosing \|\| postId) && (
	<DocPicker selected={postId ? [postId] : []} onChange={(ids) => onSource({ kind: "post", id: ids[0] })} single />
	)}

	{notebookId && !choosing && (
	!docs ? (
	// Same shape as the loaded list, so the form does not jump when the posts arrive.
	<div className="field">
	{!compact && <span className="vw-label">Posts</span>}
	<div className="picker">
	<div className="picker-bar">
	<input className="input input-sm" placeholder="Search posts" disabled aria-label="Search posts" />
	<div className="picker-actions mono muted"><span>Loading</span></div>
	</div>
	<div className="picker-list vw-posts-wait"><Loading label="Loading posts" /></div>
	</div>
	<small className="muted"> </small>
	</div>
	) : docs.length === 0 ? (
	<p className="muted">
	This notebook has no posts yet. <Link to="/app/sources">Connect a source</Link> or pick another notebook.
	</p>
	) : (
	<div className="field">
	{!compact && <span className="vw-label">Posts</span>}
	<DocPicker docs={docs} selected={postIds} onChange={onPostIds} max={max} count={false} />
	<small className="muted vw-hint">
	{ticked === 0
	? "Tick at least one post."
	: `You can select up to ${Math.min(max, pickable)} (${ticked} selected). They are combined into one ${what}.`}
	</small>
	</div>
	)
	)}
	</>
	);
	}