> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Conversas e projetos

> Entenda quando continuar o trabalho em uma Conversa e quando usar um Projeto para trabalho substancial de construção ou design.

export const ConversationsProjectsCover = ({handoff = false}) => <div className="chat-mkt" role="img" aria-label={handoff ? "A Replit Conversation flowing into a structured Project window" : "A frosted Replit Conversation window linked to a structured Project window"} style={{
  margin: "28px 0 42px",
  borderTop: 0,
  paddingTop: 0
}}>
    <div className="chat-use-case-visual" style={{
  aspectRatio: "auto",
  minHeight: "clamp(220px, 34vw, 320px)",
  overflow: "hidden",
  background: "radial-gradient(circle at 50% -18%, rgba(255,255,255,.82), transparent 42%), radial-gradient(circle at 4% 96%, rgba(255,184,146,.48), transparent 38%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)"
}}>
      <div aria-hidden="true" style={{
  position: "absolute",
  inset: 0,
  background: "linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 48%, rgba(111,24,0,.2))"
}} />
      <div aria-hidden="true" style={{
  position: "relative",
  zIndex: 1,
  display: "flex",
  width: "100%",
  boxSizing: "border-box",
  minHeight: "inherit",
  alignItems: "center",
  justifyContent: "center",
  gap: handoff ? "clamp(5px, 1vw, 13px)" : "clamp(3px, .8vw, 10px)",
  padding: "clamp(10px, 1.6vw, 18px)"
}}>
        <div style={{
  position: "relative",
  flex: handoff ? "0 1 38%" : "0 1 45%",
  width: handoff ? "38%" : "45%",
  minWidth: 0,
  maxWidth: "none"
}}>
          <div aria-hidden="true" style={{
  position: "absolute",
  width: "84%",
  height: "82%",
  left: "10%",
  top: "9%",
  transform: "rotate(3deg)",
  border: "1px solid rgba(255,255,255,.28)",
  borderRadius: 20,
  opacity: 0.52
}} />
          <div aria-hidden="true" style={{
  position: "relative",
  display: "flex",
  width: "100%",
  boxSizing: "border-box",
  minHeight: "clamp(138px, 20vw, 190px)",
  gap: "clamp(7px, 1.5vw, 14px)",
  padding: "clamp(10px, 2vw, 18px)",
  border: "1px solid rgba(255,255,255,.54)",
  borderRadius: 20,
  background: "linear-gradient(180deg, rgba(255,255,255,.27), rgba(255,255,255,.1))",
  boxShadow: "0 18px 36px rgba(55,27,18,.2)",
  backdropFilter: "blur(5px)"
}}>
            <div style={{
  display: "grid",
  width: "clamp(20px, 4vw, 36px)",
  minWidth: "clamp(20px, 4vw, 36px)",
  alignContent: "start",
  gap: 8,
  paddingRight: "clamp(6px, 1vw, 11px)",
  borderRight: "1px solid rgba(255,255,255,.3)"
}}>
              <span style={{
  width: 10,
  height: 10,
  borderRadius: 4,
  background: "rgba(255,255,255,.9)"
}} />
              <span style={{
  width: 10,
  height: 10,
  borderRadius: 4,
  border: "1px solid rgba(255,255,255,.66)",
  background: "rgba(255,255,255,.12)"
}} />
              <span style={{
  width: 10,
  height: 10,
  borderRadius: 999,
  border: "1px solid rgba(255,255,255,.48)"
}} />
            </div>
            <div style={{
  display: "grid",
  minWidth: 0,
  flex: "1 1 auto",
  alignContent: "space-between",
  gap: 8
}}>
              <div style={{
  display: "grid",
  gap: 7
}}>
                <span style={{
  width: "66%",
  height: 17,
  border: "1px solid rgba(255,255,255,.44)",
  borderRadius: "10px 10px 10px 3px",
  background: "rgba(255,255,255,.17)"
}} />
                <span style={{
  justifySelf: "end",
  width: "56%",
  height: 17,
  borderRadius: "10px 10px 3px 10px",
  background: "rgba(255,255,255,.76)"
}} />
                <span style={{
  width: "76%",
  height: 21,
  border: "1px solid rgba(255,255,255,.4)",
  borderRadius: "10px 10px 10px 3px",
  background: "rgba(255,255,255,.14)"
}} />
              </div>
              <div style={{
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between",
  gap: 6,
  padding: "7px 8px",
  border: "1px solid rgba(255,255,255,.52)",
  borderRadius: 10,
  background: "rgba(255,255,255,.14)"
}}>
                <span style={{
  width: "65%",
  height: 5,
  borderRadius: 999,
  background: "rgba(255,255,255,.7)"
}} />
                <span style={{
  width: 14,
  height: 14,
  borderRadius: 5,
  background: "rgba(255,255,255,.88)"
}} />
              </div>
            </div>
          </div>
        </div>

        <div aria-hidden="true" style={{
  position: "relative",
  width: handoff ? "clamp(30px, 9vw, 92px)" : "clamp(24px, 7vw, 76px)",
  minWidth: handoff ? "clamp(30px, 9vw, 92px)" : "clamp(24px, 7vw, 76px)",
  height: "clamp(38px, 6vw, 56px)"
}}>
          <span style={{
  position: "absolute",
  left: 0,
  right: 0,
  top: "50%",
  width: "100%",
  height: 2,
  borderRadius: 999,
  background: "linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.86), rgba(255,255,255,.18))",
  boxShadow: "0 0 12px rgba(255,255,255,.36)"
}} />
          <span style={{
  position: "absolute",
  left: handoff ? "7%" : "13%",
  top: "calc(50% - 5px)",
  width: handoff ? 7 : 10,
  height: handoff ? 7 : 10,
  border: "1px solid rgba(255,255,255,.72)",
  borderRadius: 999,
  background: "rgba(255,255,255,.18)",
  boxShadow: "0 0 10px rgba(255,255,255,.24)"
}} />
          <span style={{
  position: "absolute",
  left: handoff ? "39%" : "46%",
  top: handoff ? "calc(50% - 6px)" : "calc(50% - 8px)",
  width: handoff ? 12 : 16,
  height: handoff ? 12 : 16,
  border: "1px solid rgba(255,255,255,.86)",
  borderRadius: 999,
  background: "rgba(255,255,255,.28)",
  boxShadow: "0 0 14px rgba(255,255,255,.34)"
}} />
          <span style={{
  position: "absolute",
  right: handoff ? "3%" : "8%",
  top: handoff ? "calc(50% - 9px)" : "calc(50% - 5px)",
  width: handoff ? 18 : 10,
  height: handoff ? 18 : 10,
  border: "1px solid rgba(255,255,255,.72)",
  borderRadius: 999,
  background: handoff ? "rgba(255,255,255,.42)" : "rgba(255,255,255,.18)",
  boxShadow: handoff ? "0 0 18px rgba(255,255,255,.46)" : "0 0 10px rgba(255,255,255,.24)"
}} />
        </div>

        <div style={{
  position: "relative",
  flex: handoff ? "0 1 52%" : "0 1 45%",
  width: handoff ? "52%" : "45%",
  minWidth: 0,
  maxWidth: "none",
  transform: handoff ? "translateX(1%)" : undefined
}}>
          <div aria-hidden="true" style={{
  position: "absolute",
  width: "84%",
  height: "82%",
  right: "10%",
  top: "9%",
  transform: "rotate(-3deg)",
  border: "1px solid rgba(255,255,255,.28)",
  borderRadius: 20,
  opacity: 0.52
}} />
          <div aria-hidden="true" style={{
  position: "relative",
  display: "grid",
  width: "100%",
  boxSizing: "border-box",
  minHeight: "clamp(138px, 20vw, 190px)",
  gridTemplateRows: "auto 1fr",
  gap: "clamp(9px, 1.8vw, 15px)",
  padding: "clamp(10px, 2vw, 18px)",
  border: "1px solid rgba(255,255,255,.54)",
  borderRadius: 20,
  background: "linear-gradient(180deg, rgba(255,255,255,.27), rgba(255,255,255,.1))",
  boxShadow: "0 18px 36px rgba(55,27,18,.2)",
  backdropFilter: "blur(5px)"
}}>
            <div style={{
  display: "flex",
  alignItems: "center",
  gap: 6
}}>
              <span style={{
  width: 8,
  height: 8,
  borderRadius: 999,
  background: "rgba(255,255,255,.92)"
}} />
              <span style={{
  width: 8,
  height: 8,
  borderRadius: 999,
  background: "rgba(255,255,255,.52)"
}} />
              <span style={{
  width: 8,
  height: 8,
  borderRadius: 999,
  background: "rgba(255,255,255,.32)"
}} />
              <span style={{
  width: "34%",
  height: 6,
  marginLeft: 6,
  borderRadius: 999,
  background: "rgba(255,255,255,.62)"
}} />
            </div>
            <div style={{
  display: "grid",
  gridTemplateColumns: "minmax(18px, .45fr) minmax(0, 1fr)",
  gap: "clamp(7px, 1.5vw, 14px)",
  minWidth: 0
}}>
              <div style={{
  display: "grid",
  alignContent: "start",
  gap: 7,
  paddingRight: "clamp(5px, 1vw, 10px)",
  borderRight: "1px solid rgba(255,255,255,.3)"
}}>
                <span style={{
  width: "80%",
  height: 7,
  borderRadius: 999,
  background: "rgba(255,255,255,.8)"
}} />
                <span style={{
  width: "64%",
  height: 7,
  borderRadius: 999,
  background: "rgba(255,255,255,.42)"
}} />
                <span style={{
  width: "74%",
  height: 7,
  borderRadius: 999,
  background: "rgba(255,255,255,.26)"
}} />
              </div>
              <div style={{
  display: "grid",
  gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
  gridTemplateRows: "repeat(2, minmax(0, 1fr))",
  gap: 7,
  minWidth: 0
}}>
                <span style={{
  border: "1px solid rgba(255,255,255,.48)",
  borderRadius: 9,
  background: "rgba(255,255,255,.2)"
}} />
                <span style={{
  border: "1px solid rgba(255,255,255,.32)",
  borderRadius: 9,
  background: "rgba(255,255,255,.1)"
}} />
                <span style={{
  gridColumn: "span 2",
  border: "1px solid rgba(255,255,255,.4)",
  borderRadius: 9,
  background: "rgba(255,255,255,.16)"
}} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>;

export const chatIcon = (name, size = 19) => {
  const paths = {
    MessageCircle: <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />,
    ChartNoAxesCombined: <>
        <path d="M12 16v5" />
        <path d="M16 14v7" />
        <path d="M20 10v11" />
        <path d="m22 3-8.646 8.646a.5.5 0 0 1-.708 0L9.354 8.354a.5.5 0 0 0-.708 0L2 15" />
        <path d="M4 18v3" />
        <path d="M8 14v7" />
      </>,
    Workflow: <>
        <rect width="8" height="8" x="3" y="3" rx="2" />
        <path d="M7 11v4a2 2 0 0 0 2 2h4" />
        <rect width="8" height="8" x="13" y="13" rx="2" />
      </>,
    Lightbulb: <>
        <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" />
        <path d="M9 18h6" />
        <path d="M10 22h4" />
      </>,
    Code2: <>
        <path d="m18 16 4-4-4-4" />
        <path d="m6 8-4 4 4 4" />
        <path d="m14.5 4-5 16" />
      </>,
    Presentation: <>
        <path d="M2 3h20" />
        <path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3" />
        <path d="m7 21 5-5 5 5" />
      </>,
    PanelsTopLeft: <>
        <rect width="18" height="18" x="3" y="3" rx="2" />
        <path d="M3 9h18" />
        <path d="M9 21V9" />
      </>,
    Keyboard: <>
        <rect width="20" height="14" x="2" y="5" rx="2" />
        <path d="M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M10 13h.01M14 13h.01M18 13h.01M8 17h8" />
      </>,
    Layers3: <>
        <path d="m12 2 9 5-9 5-9-5 9-5Z" />
        <path d="m3 12 9 5 9-5M3 17l9 5 9-5" />
      </>,
    CalendarClock: <>
        <path d="M16 2v4M8 2v4M3 10h18" />
        <rect width="18" height="19" x="3" y="4" rx="2" />
        <path d="M12 14v3l2 1" />
      </>,
    ConversationProject: <>
        <path d="M3 4h8v6H6l-3 2V4Z" />
        <rect width="9" height="9" x="12" y="11" rx="1.5" />
        <path d="M12 14h9M15 11v9" />
      </>,
    CursorDesign: <>
        <path d="m5 3 13 7-6 2-2 6L5 3Z" />
        <path d="M15 16h6M18 13v6" />
      </>,
    AppWindow: <>
        <rect width="20" height="18" x="2" y="3" rx="2" />
        <path d="M2 8h20M6 5.5h.01M9 5.5h.01" />
      </>,
    CloudUpload: <>
        <path d="M12 13v8M8 17l4-4 4 4" />
        <path d="M20 16.5A5 5 0 0 0 18 7h-1.3A7 7 0 0 0 3.3 9.4 4.5 4.5 0 0 0 5 18h2" />
      </>,
    Image: <>
        <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
        <circle cx="9" cy="9" r="2" />
        <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
      </>,
    FileUp: <>
        <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
        <path d="M14 2v4a2 2 0 0 0 2 2h4" />
        <path d="M12 12v6" />
        <path d="m15 15-3-3-3 3" />
      </>,
    Search: <>
        <circle cx="11" cy="11" r="8" />
        <path d="m21 21-4.3-4.3" />
      </>,
    Sparkles: <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" />,
    Briefcase: <>
        <path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
        <rect width="20" height="14" x="2" y="6" rx="2" />
      </>,
    WandSparkles: <>
        <path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72" />
        <path d="m14 7 3 3" />
        <path d="M5 6v4" />
        <path d="M19 14v4" />
        <path d="M10 2v2" />
        <path d="M7 8H3" />
        <path d="M21 16h-4" />
        <path d="M11 3H9" />
      </>
  };
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {paths[name] ?? paths.Sparkles}
    </svg>;
};

<ConversationsProjectsCover handoff />

Você pesquisou a vizinhança, conectou suas ferramentas e criou um plano de
lançamento. Agora é hora de contar às pessoas sobre sua cafeteria. Para isso,
você vai criar um site de abertura.

Antes de começar, ajuda entender os dois lugares onde esse trabalho vive no
Replit: conversas e projetos.

## Do plano ao projeto

O lançamento da cafeteria começou em uma conversa. Foi ali que você moldou a
ideia, pesquisou o mercado, conectou ferramentas e criou uma Rotina.

Agora você está pronto para construir um site de abertura. Um projeto é o
lugar para esse trabalho substancial de design e construção. O Replit pode
usar o contexto já existente na conversa, então você não precisa começar do
zero.

## O que é uma conversa?

Uma **conversa** é uma única thread onde você faz perguntas, explora
informações, executa Rotinas e continua o trabalho por meio de
acompanhamentos. Nesta história, ela guarda a pesquisa e o plano de
lançamento da cafeteria.

## O que é um projeto?

Um **projeto** é um espaço durável e estruturado para trabalho substancial de
construção e design. Nesta história, é onde você vai criar e refinar o site
de abertura.

## Como eles trabalham juntos

| Área        | Conversa                                                                               | Projeto                                                                        |
| ----------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
| Melhor para | Explorar a ideia, pesquisar concorrentes e executar o monitoramento semanal de mercado | Projetar e construir o site de abertura                                        |
| Estrutura   | Uma única thread com sua pesquisa, decisões e acompanhamentos                          | Um espaço estruturado para o site, seu design e outros artefatos de construção |
| Rotinas     | Criar e gerenciar pesquisas recorrentes                                                | Usar os resultados que retornam à conversa                                     |
| Contexto    | Guarda o plano de lançamento que trouxe você até aqui                                  | Começa com a direção que você estabeleceu na conversa                          |

Comece em uma conversa quando quiser perguntar ou explorar. Passe para um
projeto quando estiver pronto para construir. A transição mantém a direção
que você já criou.

## Relacionados

<section className="chat-mkt chat-workflow-grid has-visuals">
  <a className="chat-example has-visual" href="/pt/chat/conversations">
    <div className="chat-use-case-visual">
      <div className="chat-use-case-icon">
        {chatIcon("MessageCircle", 32)}
      </div>
    </div>

    <div className="chat-example-tag">Perguntar e explorar</div>
    <div className="chat-card-title">Conversas</div>

    <p>
      Saiba como as Conversas dão suporte a perguntas, exploração, Rotinas e
      resultados.
    </p>

    <div className="chat-card-link">Explorar →</div>
  </a>

  <a className="chat-example has-visual" href="/pt/features/projects-and-artifacts/projects">
    <div className="chat-use-case-visual palette-stone">
      <div className="chat-use-case-icon">
        {chatIcon("PanelsTopLeft", 32)}
      </div>
    </div>

    <div className="chat-example-tag">Construir e organizar</div>
    <div className="chat-card-title">Projetos</div>

    <p>
      Saiba como os Projetos organizam trabalho substancial de construção e
      design com múltiplos artefatos.
    </p>

    <div className="chat-card-link">Explorar →</div>
  </a>
</section>

## Próximo

<section className="chat-mkt chat-workflow-grid has-visuals">
  <a className="chat-example has-visual" href="/pt/home/design-an-opening-site">
    <div className="chat-use-case-visual">
      <div className="chat-use-case-window">
        <b />

        <b />

        <b />
      </div>
    </div>

    <div className="chat-example-tag">Site de abertura</div>
    <div className="chat-card-title">Projetar o site de abertura</div>
    <p>Use a conversa e o plano de lançamento para criar um site para seu café.</p>
    <div className="chat-card-link">Continuar →</div>
  </a>
</section>