spb/company-atlas

1import { Search as SearchIcon, Sparkles } from 'lucide-react';2import type { Metadata } from 'next';3import Link from 'next/link';4import { CompanyTable } from '@/components/company/company-table';5import { EventList } from '@/components/events/event-row';6import { Chip, CountryChip } from '@/components/ui/badges';7import { Container, Empty, Note, PageHeader, Section } from '@/components/ui/section';8import { api, safe } from '@/lib/api';9import { fmtDate, fmtInt, fmtScore, pathOf } from '@/lib/format';10import { str, type SP } from '@/lib/params';11import { EXAMPLE_QUERIES, routes } from '@/lib/site';1213export const metadata: Metadata = { title: 'Search', robots: { index: false } };14export const dynamic = 'force-dynamic';1516function looksLikeQuestion(q: string): boolean {17  const s = q.trim().toLowerCase();18  const words = s.split(/\s+/).filter(Boolean);19  if (words.length >= 4) return true;20  return /^(which|what|who|where|how|show|list|find)\b/.test(s) || /\b(hiring|in|with|that|expanding|launch|pricing)\b/.test(s) && words.length >= 3;21}2223export default async function SearchPage({ searchParams }: { searchParams: Promise<SP> }) {24  const sp = await searchParams;25  const q = (str(sp.q) ?? '').trim();26  const ask = q && looksLikeQuestion(q);27  const [res, answer] = await Promise.all([q ? safe(api.search(q, { limit: 10 })) : Promise.resolve(null), ask ? safe(api.ask(q)) : Promise.resolve(null)]);28  const total = res ? res.companies.length + res.events.length + res.industries.length + res.countries.length + res.people.length + res.products.length : 0;29  return (30    <Container wide>31      <PageHeader eyebrow="Search" title={q ? <>Results for “{q}”</> : 'Search the atlas'} lede={q && res ? `${fmtInt(total)} results in ${res.took_ms} ms across companies, events, industries, countries, people and products.` : 'Companies, industries, countries, events, people, products — or ask a question in plain language.'} />32      <form method="get" action="/search" role="search" className="mb-6 flex max-w-2xl items-stretch border border-rule-strong bg-surface focus-within:border-accent">33        <label htmlFor="q" className="sr-only">34          Search35        </label>36        <SearchIcon className="my-auto ml-3 size-4 shrink-0 text-ink-3" aria-hidden />37        <input id="q" name="q" type="search" defaultValue={q} placeholder="e.g. companies hiring AI engineers in Canada" className="h-11 min-w-0 flex-1 bg-transparent px-3 text-[16px] text-ink placeholder:text-ink-3 focus:outline-none" autoComplete="off" spellCheck={false} />38        <button type="submit" className="bg-ink px-4 text-sm font-medium text-canvas hover:opacity-90">39          Search40        </button>41      </form>42      {!q && (43        <div>44          <p className="eyebrow mb-2">Try asking</p>45          <ul className="flex flex-wrap gap-2">46            {EXAMPLE_QUERIES.map((ex) => (47              <li key={ex}>48                <Link href={routes.search(ex)} className="chip-btn">49                  {ex}50                </Link>51              </li>52            ))}53          </ul>54          <Note className="mt-4">Natural-language questions are parsed into structured filters (country, industry, event type, AI-related) and answered from the monitored record; every answer links back to events and their sources.</Note>55        </div>56      )}57      {q && ask && (58        <section className="mb-8 border border-accent/40 bg-accent-soft/40 p-4 md:p-5" data-ask-panel>59          <p className="eyebrow flex items-center gap-1.5 text-accent">60            <Sparkles className="size-3.5" aria-hidden /> Ask Company Atlas61          </p>62          {answer ? (63            <>64              <p className="mt-2 max-w-3xl text-[15px] leading-relaxed text-ink">{answer.answer}</p>65              {Object.keys(answer.interpretation ?? {}).length > 0 && (66                <p className="mt-2 flex flex-wrap items-center gap-1 text-xs text-ink-3">67                  Interpreted as:68                  {Object.entries(answer.interpretation)69                    .filter(([k, v]) => v !== null && v !== undefined && v !== '' && !(Array.isArray(v) && v.length === 0) && typeof v !== 'object' || Array.isArray(v))70                    .filter(([k]) => !['question', 'source', 'parser_version', 'llm_model', 'prompt_version', 'answer_style', 'filters'].includes(k))71                    .filter(([, v]) => !(Array.isArray(v) && v.length === 0))72                    .map(([k, v]) => (73                      <Chip key={k} tone="outline" className="max-w-full whitespace-normal! break-words">74                        {k.replace(/_/g, ' ')} = {Array.isArray(v) ? `${v.slice(0, 3).join(', ')}${v.length > 3 ? ` +${v.length - 3}` : ''}` : String(v)}75                      </Chip>76                    ))}77                </p>78              )}79              {answer.companies.length > 0 && (80                <div className="mt-4">81                  <p className="eyebrow mb-1">Matching companies</p>82                  <CompanyTable items={answer.companies} showSparkline={false} />83                </div>84              )}85              {answer.events.length > 0 && (86                <div className="mt-4">87                  <p className="eyebrow mb-1">Related events</p>88                  <EventList events={answer.events} variant="table" />89                </div>90              )}91              {answer.sources.length > 0 && (92                <p className="mt-3 text-xs text-ink-3">93                  Sources:{' '}94                  {answer.sources.slice(0, 6).map((s, i) => (95                    <span key={s + i}>96                      {i > 0 && ' · '}97                      <a href={s} target="_blank" rel="noopener noreferrer" className="link">98                        {pathOf(s)}99                      </a>100                    </span>101                  ))}102                </p>103              )}104            </>105          ) : (106            <p className="mt-2 text-sm text-ink-3">The question router did not answer in time; the keyword results below still apply.</p>107          )}108        </section>109      )}110      {q && !res && <Empty title="Search is temporarily unavailable." />}111      {q && res && total === 0 && !answer && <Empty title="No monitored evidence matches this query yet.">Try a company name, a domain, an industry or a country.</Empty>}112      {res && res.companies.length > 0 && (113        <Section eyebrow="Companies" title={`${res.companies.length} ${res.companies.length === 1 ? 'company' : 'companies'}`} hairline={false}>114          <CompanyTable items={res.companies} />115        </Section>116      )}117      {res && (res.industries.length > 0 || res.countries.length > 0) && (118        <Section eyebrow="Atlas" title="Industries and countries">119          <ul className="flex flex-wrap gap-2">120            {res.industries.map((i) => (121              <li key={i.slug}>122                <Link href={routes.industry(i.slug)} className="chip-btn">123                  {i.name} <span className="tnum text-ink-3">{fmtInt(i.companies)}</span>124                </Link>125              </li>126            ))}127            {res.countries.map((c) => (128              <li key={c.code}>129                <Link href={routes.country(c.code)} className="chip-btn">130                  <CountryChip code={c.code} link={false} /> {c.name} <span className="tnum text-ink-3">{fmtInt(c.companies)}</span>131                </Link>132              </li>133            ))}134          </ul>135        </Section>136      )}137      {res && res.events.length > 0 && (138        <Section eyebrow="Events" title={`${res.events.length} events`} action={{ href: routes.events({ q }), label: 'All matching events' }}>139          <EventList events={res.events} variant="table" />140        </Section>141      )}142      {res && (res.people.length > 0 || res.products.length > 0) && (143        <div className="grid gap-8 md:grid-cols-2">144          {res.people.length > 0 && (145            <Section eyebrow="People" title="Listed on monitored leadership pages">146              <ul className="divide-y divide-rule border-y border-rule text-sm">147                {res.people.map((p) => (148                  <li key={p.id} className="flex flex-wrap items-center gap-2 py-2">149                    <span className="font-medium text-ink">{p.name}</span>150                    <span className="text-ink-2">{p.title}</span>151                    <Link href={routes.company(p.company.slug, 'leadership')} className="link ml-auto text-xs">152                      {p.company.display_name}153                    </Link>154                    <span className="text-[11px] text-ink-3">{p.status === 'listed' ? 'listed' : 'no longer listed'}</span>155                  </li>156                ))}157              </ul>158            </Section>159          )}160          {res.products.length > 0 && (161            <Section eyebrow="Products" title="Listed in monitored catalogs">162              <ul className="divide-y divide-rule border-y border-rule text-sm">163                {res.products.map((p) => (164                  <li key={p.id} className="flex flex-wrap items-center gap-2 py-2">165                    <span className="font-medium text-ink">{p.name}</span>166                    {p.category && <Chip>{p.category}</Chip>}167                    <Link href={routes.company(p.company.slug, 'products')} className="link ml-auto text-xs">168                      {p.company.display_name}169                    </Link>170                    <span className="text-[11px] text-ink-3">first seen {fmtDate(p.first_seen_at)}</span>171                  </li>172                ))}173              </ul>174            </Section>175          )}176        </div>177      )}178      {res && res.companies.length > 0 && <p className="sr-only">{res.companies.map((c) => `${c.display_name} ${fmtScore(c.metrics.activity_score)}`).join(', ')}</p>}179    </Container>180  );181}182