1
/*
2
 *  This file is part of CoCalc: Copyright © 2021 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5

6
import { Button, Layout, Tooltip } from "antd";
7
import Link from "next/link";
8
import { join } from "path";
9

10
import { Icon } from "@cocalc/frontend/components/icon";
11
import { IS_MOBILE } from "@cocalc/frontend/feature";
12
import { SoftwareEnvNames } from "@cocalc/util/consts/software-envs";
13
import { COLORS } from "@cocalc/util/theme";
14
import AccountNavTab from "components/account/navtab";
15
import Analytics from "components/analytics";
16
import DemoCell from "components/demo-cell";
17
import LiveDemo from "components/landing/live-demo";
18
import Logo from "components/logo";
19
import A from "components/misc/A";
20
import ChatGPTHelp from "components/openai/chatgpt-help";
21
import basePath from "lib/base-path";
22
import { useCustomize } from "lib/customize";
23
import SubNav, { Page, SubPage } from "./sub-nav";
24

25
const GAP = "3%";
26

27
const SHOW_AI_CHAT: Readonly<string[]> = ["ai"] as const;
28

29
export const LinkStyle: React.CSSProperties = {
30
  color: "white",
31
  marginRight: GAP,
32
  display: "inline-block",
33
} as const;
34

35
// The style shouldn't change the size of the label, e.g., don't
36
// use bold.  Otherwise, everything moves a little when you select
37
// an option, which looks weird.
38
const SelectedStyle: React.CSSProperties = {
39
  ...LinkStyle,
40
  color: COLORS.LANDING.TOP_BG,
41
  borderBottom: "5px solid #c7d9f5",
42
} as const;
43

44
interface Props {
45
  page?: Page;
46
  subPage?: SubPage;
47
  runnableTag?: string; // if on cocalc.com and have jupyter api use this tag for a little runable editable demo Jupyter cell.
48
  softwareEnv?: SoftwareEnvNames;
49
}
50

51
export default function Header(props: Props) {
52
  const { page, subPage, softwareEnv, runnableTag } = props;
53
  const {
54
    siteName,
55
    termsOfServiceURL,
56
    account,
57
    onCoCalcCom,
58
    openaiEnabled,
59
    jupyterApiEnabled,
60
    enabledPages,
61
  } = useCustomize();
62

63
  if (basePath == null) return null;
64

65
  function ask() {
66
    if (onCoCalcCom && !IS_MOBILE) {
67
      return (
68
        <span
69
          style={{
70
            float: "right",
71
            width: "150px", // CRITICAL -- this is to prevent flicker -- see https://github.com/sagemathinc/cocalc/issues/6504
72
          }}
73
        >
74
          {true || account ? (
75
            <LiveDemo context="header" btnType="primary" />
76
          ) : (
77
            <Button
78
              type="primary"
79
              href="/support/new?type=question&subject=&body=&title=Ask%20Us%20Anything!"
80
            >
81
              <Icon name="question-circle" /> Contact
82
            </Button>
83
          )}
84
        </span>
85
      );
86
    }
87
  }
88

89
  return (
90
    <>
91
      <Analytics />
92
      <Layout.Header
93
        style={{
94
          minHeight: "64px",
95
          height: "auto",
96
          lineHeight: "32px",
97
          padding: "16px",
98
          textAlign: "center",
99
        }}
100
      >
101
        {ask()}
102
        <A href="/">
103
          {/* WARNING: This mess is all to support using the next/image component for the image via our Image component.  It's ugly. */}
104
          <div
105
            style={{
106
              position: "relative",
107
              display: "inline-block",
108
              top: "15px",
109
              height: "40px",
110
              width: "40px",
111
              marginTop: "-30px",
112
              marginRight: "64px",
113
            }}
114
          >
115
            <Logo
116
              type="icon"
117
              style={{
118
                height: "40px",
119
                width: "40px",
120
                position: "absolute",
121
              }}
122
            />
123
          </div>
124
        </A>
125
        {account && (
126
          <Tooltip title={"Browse all of your projects"}>
127
            <a style={LinkStyle} href={join(basePath, "projects")}>
128
              Your Projects
129
            </a>
130
          </Tooltip>
131
        )}
132
        {enabledPages?.store && (
133
          <A href="/store" style={page === "store" ? SelectedStyle : LinkStyle}>
134
            Store
135
          </A>
136
        )}
137
        {enabledPages?.features && (
138
          <A
139
            href="/features/"
140
            style={page === "features" ? SelectedStyle : LinkStyle}
141
          >
142
            Features
143
          </A>
144
        )}
145
        {/* supportedRoutes?.software && (
146
          <A
147
            href="/software"
148
            style={page == "software" ? SelectedStyle : LinkStyle}
149
          >
150
            Software
151
          </A>
152
        )*/}
153
        {enabledPages?.legal && (
154
          <A
155
            style={LinkStyle}
156
            href={termsOfServiceURL}
157
            title="View the terms of service and other legal documents."
158
          >
159
            Legal
160
          </A>
161
        )}
162
        {enabledPages?.info && (
163
          <A
164
            style={page === "info" ? SelectedStyle : LinkStyle}
165
            href="/info"
166
            title="Documentation and links to resources for learning more about CoCalc"
167
          >
168
            Docs
169
          </A>
170
        )}
171
        {enabledPages?.share && (
172
          <Link
173
            href={"/share/public_paths/page/1"}
174
            style={page === "share" ? SelectedStyle : LinkStyle}
175
            title="View files that people have published."
176
          >
177
            Share
178
          </Link>
179
        )}
180
        {enabledPages?.support && (
181
          <A
182
            style={page === "support" ? SelectedStyle : LinkStyle}
183
            href="/support"
184
            title="Create and view support tickets"
185
          >
186
            Support
187
          </A>
188
        )}
189
        {enabledPages?.news && (
190
          <A
191
            style={page === "news" ? SelectedStyle : LinkStyle}
192
            href="/news"
193
            title={`News about ${siteName}`}
194
          >
195
            News
196
          </A>
197
        )}
198
        {enabledPages?.about.index && (
199
          <A
200
            style={page === "about" ? SelectedStyle : LinkStyle}
201
            href="/about"
202
            title={`About ${siteName}`}
203
          >
204
            About
205
          </A>
206
        )}
207
        {enabledPages?.policies.index && (
208
          <A
209
            style={page === "policies" ? SelectedStyle : LinkStyle}
210
            href="/policies"
211
            title={`Policies of ${siteName}`}
212
          >
213
            Policies
214
          </A>
215
        )}
216
        {account ? (
217
          <AccountNavTab
218
            style={page === "account" ? SelectedStyle : LinkStyle}
219
          />
220
        ) : (
221
          <>
222
            <A
223
              style={page === "sign-up" ? SelectedStyle : LinkStyle}
224
              href="/auth/sign-up"
225
              title={`Sign up for a ${siteName} account.`}
226
            >
227
              Sign Up
228
            </A>
229
            <A
230
              style={page === "sign-in" ? SelectedStyle : LinkStyle}
231
              href="/auth/sign-in"
232
              title={`Sign in to ${siteName} or create an account.`}
233
            >
234
              Sign In
235
            </A>
236
          </>
237
        )}
238
        {enabledPages?.auth.try && (
239
          <A
240
            style={page === "try" ? SelectedStyle : LinkStyle}
241
            href={"/auth/try"}
242
            title={`Try ${siteName} immediately without creating an account.`}
243
          >
244
            Try
245
          </A>
246
        )}{" "}
247
      </Layout.Header>
248
      <SubNav page={page} subPage={subPage} softwareEnv={softwareEnv} />
249
      {openaiEnabled &&
250
      onCoCalcCom &&
251
      page === "features" &&
252
      typeof subPage === "string" &&
253
      SHOW_AI_CHAT.includes(subPage) ? (
254
        <div style={{ width: "700px", maxWidth: "100%", margin: "15px auto" }}>
255
          <ChatGPTHelp
256
            size="large"
257
            prompt={subPage ? `I am using ${subPage}.` : ""}
258
            tag={`features-${subPage}`}
259
          />
260
        </div>
261
      ) : undefined}
262
      {jupyterApiEnabled && onCoCalcCom && runnableTag ? (
263
        <DemoCell tag={runnableTag} />
264
      ) : undefined}
265
    </>
266
  );
267
}
268

269