mirror of
https://github.com/cline/cline.git
synced 2026-09-19 02:05:44 +08:00
webview logic
This commit is contained in:
Trevor Hudson
+2
-1
@@ -18,4 +18,5 @@ coverage
|
||||
# But don't ignore the coverage scripts in .github/scripts/
|
||||
!.github/scripts/coverage/
|
||||
|
||||
*evals.env
|
||||
*evals.env
|
||||
*.zip
|
||||
|
||||
@@ -114,7 +114,7 @@ const AppContent = () => {
|
||||
return (
|
||||
<>
|
||||
{showWelcomeLocal ? (
|
||||
<WelcomeWrapper />
|
||||
<WelcomeWrapper showWelcome={showWelcomeLocal} />
|
||||
) : (
|
||||
<>
|
||||
{showSettings && <SettingsView onDone={hideSettings} />}
|
||||
|
||||
@@ -142,42 +142,42 @@
|
||||
}
|
||||
|
||||
.feature-icon-1 {
|
||||
background-image: url("../images/feature-icon-1.svg");
|
||||
background-image: url("../images/rocket.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.feature-icon-2 {
|
||||
background-image: url("../images/feature-icon-2.svg");
|
||||
background-image: url("../images/rocket.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.feature-icon-3 {
|
||||
background-image: url("../images/feature-icon-3.svg");
|
||||
background-image: url("../images/play.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.feature-icon-4 {
|
||||
background-image: url("../images/feature-icon-4.svg");
|
||||
background-image: url("../images/rules.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.action-icon-1 {
|
||||
background-image: url("../images/action-icon-1.svg");
|
||||
background-image: url("../images/star-check.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.action-icon-2 {
|
||||
background-image: url("../images/action-icon-2.svg");
|
||||
background-image: url("../images/rocket.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
|
Before Width: | Height: | Size: 198 B After Width: | Height: | Size: 198 B |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 349 B After Width: | Height: | Size: 349 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.982 0C19.7852 0.00900726 13.6746 3.96537 9.31269 8H1L0 9V15L0.294 15.708L2.27591 17.6899L2.27799 17.708L10.278 25.708L10.296 25.7101L12.294 27.7081L13 28.0001H19L20 27.0001V18.692C24.0381 14.3368 27.992 8.22601 27.984 1L26.982 0ZM2 10H7.28614C5.18494 12.208 3.6634 14.2399 2.83687 15.4219L2 14.586V10ZM13.4 26.0001L12.561 25.1531C13.7452 24.331 15.7799 22.8169 17.99 20.7222V26.0001H13.4ZM11.114 23.712L4.27199 16.874C6.25599 14 14.758 2.71 25.956 2.032C25.304 13.256 13.982 21.738 11.114 23.712ZM6 28V26H2V22H0V28H6ZM19.4951 12.6657C19.8243 12.1726 20 11.5929 20 11C20 10.6052 19.9221 10.2143 19.7707 9.84965C19.6193 9.48502 19.3974 9.15386 19.1178 8.87515C18.8382 8.59645 18.5063 8.37568 18.1411 8.2255C17.776 8.07533 17.3848 7.9987 16.99 8.00002C16.3971 8.00199 15.8181 8.17962 15.326 8.51046C14.834 8.84131 14.451 9.31053 14.2255 9.85888C14 10.4072 13.942 11.0101 14.0589 11.5914C14.1758 12.1727 14.4623 12.7063 14.8822 13.1248C15.3022 13.5434 15.8367 13.8281 16.4184 13.9431C17.0001 14.058 17.6028 13.998 18.1504 13.7707C18.6979 13.5433 19.1659 13.1588 19.4951 12.6657Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 970 KiB After Width: | Height: | Size: 970 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 332 B After Width: | Height: | Size: 332 B |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 907 B After Width: | Height: | Size: 907 B |
@@ -1,43 +1,14 @@
|
||||
import { useState, useRef, useEffect, memo, Dispatch, SetStateAction } from "react"
|
||||
import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
|
||||
import { useExtensionState } from "@/context/ExtensionStateContext"
|
||||
import { vscode } from "@/utils/vscode"
|
||||
import { AccountServiceClient } from "@/services/grpc-client"
|
||||
import { EmptyRequest } from "@shared/proto/common"
|
||||
import ClineLogoWhite from "@/assets/ClineLogoWhite"
|
||||
import ApiOptionsSection from "./ApiOptionsSection"
|
||||
|
||||
// Import images
|
||||
import featureIcon1 from "@/assets/images/feature-icon-1.svg"
|
||||
import featureIcon2 from "@/assets/images/feature-icon-2.svg"
|
||||
import featureIcon3 from "@/assets/images/feature-icon-3.svg"
|
||||
import featureIcon4 from "@/assets/images/feature-icon-4.svg"
|
||||
import actionIcon1 from "@/assets/images/action-icon-1.svg"
|
||||
import actionIcon2 from "@/assets/images/action-icon-2.svg"
|
||||
import vector1 from "@/assets/images/vector-1.svg"
|
||||
import buttonIcon1 from "@/assets/images/button-icon-1.svg"
|
||||
import anthropicModel from "@/assets/images/anthropic-model.jpg"
|
||||
import googleModel from "@/assets/images/google-model.jpg"
|
||||
import metaModel from "@/assets/images/meta-model.jpg"
|
||||
import planLine from "@/assets/images/plan-line.svg"
|
||||
import actLine from "@/assets/images/act-line.svg"
|
||||
import disabledLine from "@/assets/images/disabled-line.svg"
|
||||
import featureImage from "@/assets/images/feature-image.jpg"
|
||||
import featureBg from "@/assets/images/feature-bg.png"
|
||||
|
||||
// Import CSS styles
|
||||
import "@/assets/css/styles.css"
|
||||
import { WebviewType } from "@shared/WebviewMessage"
|
||||
import { validateApiConfiguration } from "@/utils/validate" // Added import
|
||||
|
||||
interface WelcomeTabViewProps {
|
||||
onToggleView?: () => void
|
||||
showApiOptions?: boolean
|
||||
setShowApiOptions?: Dispatch<SetStateAction<boolean>>
|
||||
webviewType: WebviewType
|
||||
}
|
||||
|
||||
const WelcomeTabView = memo(({ onToggleView, showApiOptions, setShowApiOptions, webviewType }: WelcomeTabViewProps) => {
|
||||
const WelcomeTabView = ({ showWelcome }: { showWelcome: boolean }) => {
|
||||
const { apiConfiguration } = useExtensionState()
|
||||
const isApiConfigValid = validateApiConfiguration(apiConfiguration) === undefined
|
||||
const [activeTab, setActiveTab] = useState("Key Features")
|
||||
@@ -83,31 +54,6 @@ const WelcomeTabView = memo(({ onToggleView, showApiOptions, setShowApiOptions,
|
||||
|
||||
return (
|
||||
<div className="home">
|
||||
{/* Toggle button to switch between old and new welcome views */}
|
||||
{onToggleView && (
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "10px",
|
||||
right: "10px",
|
||||
zIndex: 100,
|
||||
}}>
|
||||
<button
|
||||
onClick={onToggleView}
|
||||
style={{
|
||||
padding: "8px 12px",
|
||||
backgroundColor: "#0078d4",
|
||||
color: "#ffffff",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
cursor: "pointer",
|
||||
fontSize: "12px",
|
||||
fontWeight: "bold",
|
||||
}}>
|
||||
Switch to Classic View
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div className="main-container">
|
||||
{/* Account Info */}
|
||||
<div className="account-info">
|
||||
@@ -123,16 +69,9 @@ const WelcomeTabView = memo(({ onToggleView, showApiOptions, setShowApiOptions,
|
||||
Let's Create your Account!
|
||||
</button>
|
||||
</div>
|
||||
{showApiOptions !== undefined && (
|
||||
<ApiOptionsSection
|
||||
showApiOptions={showApiOptions}
|
||||
webviewType={webviewType}
|
||||
setShowApiOptions={setShowApiOptions}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Conditionally render features-container */}
|
||||
{!isApiConfigValid && !showApiOptions && (
|
||||
{isApiConfigValid && !showWelcome ? (
|
||||
<div className="features-container">
|
||||
<div className="feature-row">
|
||||
<div
|
||||
@@ -187,63 +126,6 @@ const WelcomeTabView = memo(({ onToggleView, showApiOptions, setShowApiOptions,
|
||||
<div className="feature-description">> Read my code & suggest...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="footer">
|
||||
<div
|
||||
className="input-field"
|
||||
ref={inputFieldRef}
|
||||
onClick={handleInputFieldClick}
|
||||
style={{
|
||||
position: "relative",
|
||||
cursor: "text",
|
||||
}}>
|
||||
{showPlaceholder && <div className="input-placeholder">Type your prompt here...</div>}
|
||||
{!showPlaceholder && (
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={inputValue}
|
||||
onChange={handleInputChange}
|
||||
onBlur={handleInputBlur}
|
||||
style={{
|
||||
width: "100%",
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
outline: "none",
|
||||
color: "#FFFFFF",
|
||||
fontSize: "14px",
|
||||
fontFamily: "SF Pro, Inter, sans-serif",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="input-actions-container">
|
||||
<div className="input-actions">
|
||||
<button
|
||||
className="action-button action-button-secondary"
|
||||
style={{
|
||||
transition: "all 0.2s ease",
|
||||
opacity: 0.5,
|
||||
}}>
|
||||
<div className="action-icon action-icon-1"></div>
|
||||
<span className="action-text">Improve prompt</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="action-button action-button-primary"
|
||||
style={{
|
||||
transition: "all 0.2s ease",
|
||||
opacity: 0.5,
|
||||
}}>
|
||||
<div className="action-icon action-icon-2"></div>
|
||||
<span className="action-text">Start construction</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* ... other content of features-container ... */}
|
||||
{/* Ensure the footer is also inside this conditional block if it's part of features-container */}
|
||||
<div className="footer">
|
||||
<div
|
||||
className="input-field"
|
||||
@@ -299,7 +181,7 @@ const WelcomeTabView = memo(({ onToggleView, showApiOptions, setShowApiOptions,
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
) : null}
|
||||
{/* End of conditional rendering for features-container */}
|
||||
</div>
|
||||
|
||||
@@ -394,7 +276,7 @@ const WelcomeTabView = memo(({ onToggleView, showApiOptions, setShowApiOptions,
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img src={featureBg} alt="Feature Background" className="feature-bg" />
|
||||
<img alt="Feature Background" className="feature-bg" />
|
||||
|
||||
<div className="divider"></div>
|
||||
|
||||
@@ -577,39 +459,12 @@ const WelcomeTabView = memo(({ onToggleView, showApiOptions, setShowApiOptions,
|
||||
</p>
|
||||
<button className="mcp-button">Add an MCP Server</button>
|
||||
</div>
|
||||
<div className="mcp-count">
|
||||
<svg width="1048" height="187" viewBox="0 0 1048 187" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M64.0535 186.531C51.9601 186.531 41.2428 184.279 31.9016 179.775C22.6439 175.271 15.221 169.141 9.63304 161.385C4.12845 153.545 0.959134 144.704 0.125104 134.863L0 133.361H26.7724L26.8975 134.237C27.7315 139.658 29.8166 144.579 33.1527 148.999C36.5722 153.336 40.9509 156.798 46.2886 159.383C51.6264 161.885 57.5898 163.136 64.1786 163.136C71.7683 163.136 78.4822 161.51 84.3204 158.257C90.1586 155.004 94.7041 150.501 97.9568 144.746C101.21 138.991 102.836 132.402 102.836 124.979V124.729C102.836 117.39 101.168 110.884 97.8317 105.213C94.579 99.5414 90.0752 95.0794 84.3204 91.8267C78.5656 88.574 71.9768 86.9476 64.5539 86.9476C58.9659 86.9476 53.7949 87.7816 49.0409 89.4497C44.287 91.0343 40.0751 93.453 36.4054 96.7057C34.8207 98.1236 33.2778 99.7082 31.7765 101.46C30.3587 103.211 29.0659 105.088 27.8983 107.089H3.25272L12.1351 3.00251H119.85V26.6472H34.9041L29.3995 83.82H30.0251C32.694 79.7332 36.0718 76.272 40.1585 73.4363C44.3287 70.6006 48.9992 68.4738 54.1702 67.056C59.4246 65.5547 65.0126 64.8041 70.9342 64.8041C82.4438 64.8041 92.6607 67.3896 101.585 72.5606C110.509 77.6482 117.515 84.654 122.602 93.5781C127.773 102.502 130.359 112.719 130.359 124.229V124.479C130.359 136.656 127.523 147.415 121.852 156.756C116.18 166.097 108.34 173.395 98.3321 178.649C88.4071 183.904 76.9809 186.531 64.0535 186.531Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M218.933 186.531C204.587 186.531 192.244 182.736 181.902 175.146C171.643 167.557 163.762 156.798 158.257 142.869C152.753 128.941 150 112.427 150 93.3279V93.0777C150 73.9784 152.753 57.4646 158.257 43.5363C163.762 29.6081 171.643 18.8908 181.902 11.3845C192.244 3.79483 204.587 0 218.933 0C233.278 0 245.58 3.79483 255.839 11.3845C266.181 18.8908 274.104 29.6081 279.608 43.5363C285.196 57.4646 287.99 73.9784 287.99 93.0777V93.3279C287.99 112.427 285.196 128.941 279.608 142.869C274.104 156.798 266.181 167.557 255.839 175.146C245.58 182.736 233.278 186.531 218.933 186.531ZM218.933 163.011C227.523 163.011 234.821 160.217 240.826 154.629C246.914 149.041 251.543 141.034 254.713 130.609C257.965 120.184 259.592 107.757 259.592 93.3279V93.0777C259.592 78.649 257.965 66.2637 254.713 55.9217C251.543 45.4963 246.914 37.4896 240.826 31.9016C234.821 26.3136 227.523 23.5196 218.933 23.5196C210.342 23.5196 203.003 26.3136 196.914 31.9016C190.909 37.4896 186.322 45.4963 183.153 55.9217C179.984 66.2637 178.399 78.649 178.399 93.0777V93.3279C178.399 107.757 179.984 120.184 183.153 130.609C186.322 141.034 190.909 149.041 196.914 154.629C203.003 160.217 210.342 163.011 218.933 163.011Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M313.512 122.602V97.9568H443.745V122.602H313.512ZM366.306 173.019V47.5397H390.826V173.019H366.306Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M526.44 183.528V3.00251H558.842L617.265 146.998H618.016L676.44 3.00251H708.967V183.528H683.321V50.4171H670.435L699.709 8.00668L628.024 183.528H607.257L535.697 8.00668L564.972 50.4171H552.086V183.528H526.44Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M819.559 186.531C802.545 186.531 787.741 182.736 775.147 175.146C762.637 167.557 752.962 156.798 746.123 142.869C739.284 128.858 735.864 112.302 735.864 93.2028V93.0777C735.864 73.9784 739.284 57.4646 746.123 43.5363C752.962 29.6081 762.637 18.8908 775.147 11.3845C787.658 3.79483 802.462 0 819.559 0C832.82 0 844.789 2.54379 855.464 7.63137C866.14 12.719 874.939 19.7665 881.861 28.774C888.784 37.7815 893.162 48.2486 894.997 60.1752L895.122 61.4263H867.224L866.473 58.9242C864.555 51.8349 861.428 45.7465 857.091 40.6589C852.837 35.5714 847.541 31.6931 841.202 29.0242C834.947 26.2719 827.733 24.8958 819.559 24.8958C808.383 24.8958 798.667 27.6898 790.41 33.2778C782.236 38.8658 775.898 46.7474 771.394 56.9225C766.89 67.0977 764.638 79.1494 764.638 93.0777V93.2028C764.638 107.048 766.89 119.141 771.394 129.483C775.898 139.742 782.278 147.665 790.535 153.253C798.792 158.841 808.467 161.635 819.559 161.635C827.566 161.635 834.697 160.301 840.952 157.632C847.291 154.879 852.67 150.876 857.091 145.622C861.511 140.367 864.805 133.945 866.974 126.355L867.349 125.104H895.247L894.997 126.355C893.162 138.366 888.784 148.916 881.861 158.007C875.022 167.014 866.265 174.02 855.589 179.024C844.914 184.029 832.904 186.531 819.559 186.531Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M934.78 121.852V98.3321H981.069C993.163 98.3321 1002.55 95.2045 1009.22 88.9493C1015.97 82.6106 1019.35 73.8533 1019.35 62.6773V62.4271C1019.35 51.0843 1015.97 42.2853 1009.22 36.0301C1002.55 29.7749 993.163 26.6472 981.069 26.6472H934.78V3.00251H988.075C999.918 3.00251 1010.3 5.5046 1019.23 10.5088C1028.23 15.4295 1035.28 22.352 1040.37 31.2761C1045.46 40.1168 1048 50.4171 1048 62.1769V62.4271C1048 74.1869 1045.46 84.5706 1040.37 93.5781C1035.28 102.502 1028.23 109.466 1019.23 114.471C1010.3 119.391 999.918 121.852 988.075 121.852H934.78ZM920.769 183.528V3.00251H948.792V183.528H920.769Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mcp-count"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
export default WelcomeTabView
|
||||
|
||||
@@ -3,7 +3,7 @@ import { WebviewType } from "@shared/WebviewMessage"
|
||||
import WelcomeView from "./WelcomeView"
|
||||
import WelcomeTabView from "./WelcomeTabView"
|
||||
|
||||
const WelcomeWrapper = memo(() => {
|
||||
const WelcomeWrapper = memo(({ showWelcome }: { showWelcome: boolean }) => {
|
||||
const [showApiOptions, setShowApiOptions] = useState(false)
|
||||
|
||||
// Determine which welcome view to show based on webview type
|
||||
@@ -14,7 +14,7 @@ const WelcomeWrapper = memo(() => {
|
||||
{webviewType === "sidebar" ? (
|
||||
<WelcomeView showApiOptions={showApiOptions} setShowApiOptions={setShowApiOptions} webviewType={webviewType} />
|
||||
) : (
|
||||
<WelcomeTabView showApiOptions={showApiOptions} setShowApiOptions={setShowApiOptions} webviewType={webviewType} />
|
||||
<WelcomeTabView showWelcome={showWelcome} />
|
||||
)}
|
||||
</>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user