fix: switch to using callout component for info

frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/index.tsx

@@ -1,6 +1,8 @@
 import { PlusOutlined } from '@ant-design/icons';
+import { Callout } from '@signozhq/ui';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { EQueryType } from 'types/common/dashboard';
+import DOCLINKS from 'utils/docLinks';
 
 import { QueryButton } from '../../styles';
 import ClickHouseQueryBuilder from './query';
@@ -13,6 +15,28 @@ function ClickHouseQueryContainer(): JSX.Element | null {
 
 	return (
 		<>
+			<div style={{ margin: '8px 8px 16px 16px' }}>
+				<Callout
+					type="info"
+					showIcon
+					title={
+						<span>
+							<a
+								href={DOCLINKS.QUERY_CLICKHOUSE_TRACES}
+								target="_blank"
+								rel="noreferrer"
+							>
+								Learn how to write optimized queries
+							</a>
+							{' · Using an LLM? '}
+							<a href={DOCLINKS.AGENT_SKILL_INSTALL} target="_blank" rel="noreferrer">
+								Install the SigNoz ClickHouse query agent skill
+							</a>
+						</span>
+					}
+				/>
+			</div>
+
 			{currentQuery.clickhouse_sql.map((q, idx) => (
 				<ClickHouseQueryBuilder
 					key={q.name}

frontend/src/utils/docLinks.ts

@@ -8,6 +8,9 @@ const DOCLINKS = {
 		'https://signoz.io/docs/userguide/send-metrics-cloud/',
 	EXTERNAL_API_MONITORING:
 		'https://signoz.io/docs/external-api-monitoring/overview/',
+	QUERY_CLICKHOUSE_TRACES:
+		'https://signoz.io/docs/userguide/writing-clickhouse-traces-query/#timestamp-bucketing-for-distributed_signoz_index_v3',
+	AGENT_SKILL_INSTALL: 'https://signoz.io/docs/ai/agent-skills/#installation',
 };
 
 export default DOCLINKS;